Flutter Material3 disable appbar color change on scroll

Question

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:

score 47 · Answer 1 · answered Jun 27 '22 at 14:03

47

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.

answered Jun 27 '22 at 14:03

testerino

642
8
19

12

I confirm setting `scrolledUnderElevation` to `0` also works for me to solve the issue. – ezze Jun 29 '22 at 18:55
3

Worked for me as well – Dominik Roszkowski Jul 29 '22 at 10:52
Saved me couple of hours – Paul Grei Nov 15 '22 at 13:28
This did work for me as well. – Pierre Massé Apr 07 '23 at 11:51
but with this solution i am not able to cast a shadow below the appbar :-/ – Maurice Raguse Jul 12 '23 at 13:27
This worked for me – Muhammad Zeeshan Jul 27 '23 at 09:42

score 17 · Answer 2 · edited May 29 '22 at 10:34

17

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.

edited May 29 '22 at 10:34

Tyler2P

2,324
26
22
31

answered May 28 '22 at 06:31

CEOSiyris

171
3

1

for me it worked with Colors.white – basti394 May 28 '22 at 15:39
thanks! But for me it also worked with Colors.white – dukaric1991 May 29 '22 at 14:25
not working for me :( – judehall Jun 14 '22 at 22:20
thanks, this work for me. Just add this into Theme – wanz Oct 10 '22 at 13:35
didn't work for me, it shows a light black shadow. `scrolledUnderElevation` worked well. – Sos. Jan 24 '23 at 09:47
This is what I needed to stop the colour change but also maintain the shadow. Note that the shadow itself can be changed with the shadowColor property! – Rik Jul 05 '23 at 04:00

score 11 · Answer 3 · edited Jul 27 '23 at 22:52

11

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

edited Jul 27 '23 at 22:52

Jared Burrows

54,294
25
151
185

answered Feb 15 '23 at 14:33

John Kinyanjui

904
11
9

score 0 · Answer 4 · edited Jun 15 '23 at 07:31

0

just add below property to AppBar :

forceMaterialTransparency: true,

problem will solved.

edited Jun 15 '23 at 07:31

Super Kai - Kazuya Ito

22,221
10
124
129

answered Jun 15 '23 at 05:37

hp007

1
1

score 0 · Answer 5 · answered Jul 24 '23 at 10:53

0

use surfaceTintColor: Colors.yourColor,

answered Jul 24 '23 at 10:53

maskey

1
1

score 0 · Answer 6 · answered Jul 26 '23 at 03:47

0

It works for me:

surfaceTintColor: Colors.transparent;   // add required color

Either add in the appBar or otherwise in the ThemeData.

answered Jul 26 '23 at 03:47

ankushlokhande

870
5
20

score 0 · Answer 7 · answered Aug 29 '23 at 11:35

0

Best solution is chage the following property AppBar

scrolledUnderElevation: 0

answered Aug 29 '23 at 11:35

ijas

409
5
8

Flutter Material3 disable appbar color change on scroll

7 Answers7

Linked