Flutter 3 Transparent AppBar with transparent shadowColor is still visible

Question

I'm trying to make a screen layout with a transparent AppBar that has to scroll content under it.

The problem is that when content is scrolled, the AppBar shows a shadow, shadowColor, but it is set to transparent color.

EDIT: I noticed that the cause of this is having useMaterial3 set to true in my App Theme.

I'm using Flutter 3.0.2.

This is my code:

Stack(
        fit: StackFit.expand,
        children: [
          //AuthBackground(),
          Container(color: Colors.brown,),
          Theme(
            data: AppStyles.mainDarkTheme.copyWith(
              textTheme: AppStyles.mainDarkTheme.textTheme.apply(
                bodyColor: Colors.blue,
                displayColor: Colors.blue,
              )
            ),
            child: Scaffold(
              backgroundColor: Colors.transparent,
              extendBodyBehindAppBar: true,
              appBar: AppBar(
                backgroundColor: Colors.transparent,
                shadowColor: Colors.transparent,
                elevation: 0.0,
                bottomOpacity: 0.0,
              ),
              body: _content(),
            ),
          ),
        ],
      )

Here you have a pic where you can notice the shadow on AppBar when content is scrolled:

Thanks in advance!

Answer 1

Finally I got it.

I answered myself on this post:

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.

Answer 2

Set elevation = 0 works for me

  appBar: AppBar(
    elevation: 0,
    backgroundColor: Colors.transparent,
    shadowColor: Colors.transparent,

Answer 3

This is because the default elevation property is set to appbar. so the simple solution is to set the elevation property. like below

elevation: 0,

it's done.

Answer 4

You have to set the scrolledUnderElevation property of AppBar to 0

AppBar(
  elevation: 0,
  shadowColor: Colors.transparent,
  backgroundColor: Colors.transparent,
  scrolledUnderElevation: 0,
)