CODEWITHSUNDEEP
fluttermaterial-ui
dukaric1991
dukaric1991

Reputation: 1410

Flutter Material3 disable appbar color change on scroll

Using Material3 useMaterial3: true in Flutter version 3.0.1, when scrolling lets say listview, the appbar changes to darker color... Can this be disabled?

Example from native android Material3 MaterialToolbar disable coloring at scroll:

enter image description here

Upvotes: 111

Views: 43451

Answers (18)

Wahab Khan Jadon
Wahab Khan Jadon

Reputation: 1176

Instead of putting scrolledUnderElevation: 0.0 in every Appbar separately, you can use this property in ThemeData as follows and it's gonna reflect in the whole app.

void main() {
  runApp(
    const MaterialApp(
      theme: ThemeData(
        appBarTheme: AppBarTheme(
          scrolledUnderElevation: 0.0,
        ),
      ),
      home: const MyHomePage(),
    ),
  );
}

Upvotes: 4

Rohan Kumar Panigrahi
Rohan Kumar Panigrahi

Reputation: 11

The easiest one liner for me has been

forceMaterialTransparency: true,

on the AppBar widget

Upvotes: 0

ijas
ijas

Reputation: 359

Best solution is to change the following property in AppBar

scrolledUnderElevation: 0

Upvotes: 9

Quy Phan
Quy Phan

Reputation: 11

scrolledUnderElevation: 0 worked for me.

Upvotes: 1

Thendo Tshikota
Thendo Tshikota

Reputation: 61

forceMaterialTransparency: true,
surfaceTintColor: Colors.transparent,

Works for API 34 on Pixel 8.

Upvotes: 6

Sanny khan
Sanny khan

Reputation: 383

The simplest way is useMaterial3: false in MaterialApp

MaterialApp(
    debugShowCheckedModeBanner: false,
    theme: ThemeData(
        useMaterial3: false,
    ),
);

Upvotes: -2

Ariana
Ariana

Reputation: 31

However, this question has been already answered. But as you can see there different ways to do it. I would like to point out a little difference since I got a little confused in the beginning, and that is, Though both the solutions work but are different

appBar: AppBar(
      scrolledUnderElevation: 0.0, 
      title: Title
    ),

In the above case, you can have a different color for the scaffold, and the AppBar

appBar: AppBar(
      forceMaterialTransparency: true,
      title: Title
    ),

In the above case doesn't matter if you have a separate color for the AppBar, it will make your AppBar transparent in terms of color,

Upvotes: 0

Rohan KP
Rohan KP

Reputation: 1

As other have pointed out setting the scrolledUnderElevation to 0.0 on the concerned AppBar widget solves the issue.

Upvotes: 0

Parth Dasawant
Parth Dasawant

Reputation: 119

appBar: AppBar(
      scrolledUnderElevation: 0.0, // This will fix the problem
      title: Title
    ),

Upvotes: 11

pasul
pasul

Reputation: 1372

Overriding defaultScrollNotificationPredicate of an AppBar also seems to reach the desired behavior, i.e:

AppBar(
    notificationPredicate: (_) => false,
    ...
)

Upvotes: 4

Marek Lipskij
Marek Lipskij

Reputation: 21

Use the AppBar's property surfaceTintColor: Colors.transparent, to disable the "recoloring".

You can set it as a property of the AppBar widget for each app bar.

Or better yet, override the surfaceTintColor in the AppBarThemeData property of ThemeData when setting the global theme of the app. This way you can set the property for all AppBars in your app.

Upvotes: 1

Usama Sadiq
Usama Sadiq

Reputation: 11

surfaceTintColor: Colors.transparent; This works for instead of adding to every appbar of page add it in appbar

appBarTheme: const AppBarTheme( backgroundColor: Colors.transparent, surfaceTintColor: Colors.transparent, ),

Upvotes: 0

John Kinyanjui
John Kinyanjui

Reputation: 1204

I think this is the best solution mostly with the material3 flutter

scrolledUnderElevation: 0,

to disable it completely just make sure it is 0 incase you just want to reduce the opacity just increase the value i.e 0.6

Upvotes: 33

ankushlokhande
ankushlokhande

Reputation: 1844

It works for me:

surfaceTintColor: Colors.transparent;   // add required color

Either add in the appBar or otherwise in the ThemeData.

Upvotes: 1

maskey
maskey

Reputation: 89

use surfaceTintColor: Colors.yourColor,

Upvotes: 0

hp007
hp007

Reputation: 327

just add below property to AppBar :

forceMaterialTransparency: true,

problem will solved.

Upvotes: 31

testerino
testerino

Reputation: 2192

I had same problem.

In my case i had an AppBar with transparent background and a Scaffold with extendBodyBehindAppBar set to true.

I tried with shadowColor and surfaceTintColor with Colors.transparent value, but the shadow was still visible.

Then I noticed the scrolledUnderElevation property of AppBar. Setting it to 0.0 was the solution.

Upvotes: 199

CEOSiyris
CEOSiyris

Reputation: 769

I think you can just set the surfaceTintColor property of AppBar:

surfaceTintColor: Colors.transparent

I was facing this same issue and solved it right after looking at your question.

Upvotes: 76

Related Questions