Material Design 3 Top app bar does not have a shadow. How to enable it?

Question

The new 'Material Design 3 top app bar' docs says they got rid of the drop shadow. How can I enable it? Setting elevation on Toolbar or AppBar does not work at all.

Answer 1

I had the same situation. I found that:

1. The shadow drop applies starting from API 28, below API 28 - the shadow effect is the same as with a MaterialComponents theme.
2. A color fill works below API 28 (tested on API 26).

Docs for Top app bar specs says that the container of the TopAppBar has a role "Surface" and Elevation (on scroll) Level 2.

On the page Color system - Color roles I found information that:

At elevation +2 components with surface color containers receive a primary color overlay with 8% opacity.

So the default style for a TopAppBarLayout uses ?attr/colorSurface as a background color and ?attr/colorPrimary with 8% opacity as an overlay (kind of a scrim effect).

My solution:

• Case 1 - Only enable a shadow effect.

Create a style for AppBarLayout and set android:outlineAmbientShadowColor and android:outlineSpotShadowColor to black (as it's a default color for creating shadow). These attributes are set as transparent in Widget.Material3.AppBarLayout.

<style name="Widget.App.AppBarLayout" parent="Widget.Material3.AppBarLayout">
      <item name="android:outlineAmbientShadowColor" ns1:ignore="NewApi">@android:color/black</item>
      <item name="android:outlineSpotShadowColor" ns1:ignore="NewApi">@android:color/black</item>
</style>

• Case 2 - Enable a shadow effect and get rid of the overlay.

In addition to the above you can add either an android:background attribute with you color or a materialThemeOverlay attribute with setting colorSurface to your color (a background) and colorPrimary to @android:transparent (an overlay). I prefer to add directly android:background because adding materialThemeOverlay can have impact on the child views of your AppBarLayout which.

   <style name="Widget.App.AppBarLayout" parent="Widget.Material3.AppBarLayout">
        <item name="android:outlineAmbientShadowColor" ns1:ignore="NewApi">@android:color/black</item>
        <item name="android:outlineSpotShadowColor" ns1:ignore="NewApi">@android:color/black</item>
        <item name="android:background">@color/white</item>
    </style>

or

<style name="Widget.App.AppBarLayout" parent="Widget.Material3.AppBarLayout">
        <item name="android:outlineAmbientShadowColor" ns1:ignore="NewApi">@android:color/black</item>
        <item name="android:outlineSpotShadowColor" ns1:ignore="NewApi">@android:color/black</item>
        <item name="materialThemeOverlay">@style/ThemeOverlay.App.DayNight.NoActionBar</item>
    </style>

    <style name="ThemeOverlay.App.DayNight.NoActionBar" parent="Theme.Material3.DayNight.NoActionBar">
        <item name="colorPrimary">@android:color/transparent</item>
        <item name="colorSurface">@android:color/white</item>
    </style>

Don't forget apply your style to your AppBarLayout or theme.

By the way, a liftOnScroll attribute is set to true in Widget.Material3.AppBarLayout so there's no need for setting it. Everything works with setting only layout_behavior for a scrolling view.

Answer 2

It seems the answers above only tackle Android but i'm not seeing the shadow on iOS, but i suppose the following should work also for Android

return Scaffold(
  key: _scaffoldMessengerKey,
  appBar: AppBar(
    elevation: 6,
    shadowColor: Colors.black.withOpacity(.5),
    ...
  )
  ...
)

or globally to apply on all pages

return MaterialApp(
  title: 'Flutter App',
  theme: ThemeData(
    colorScheme: ColorScheme.fromSeed(
      seedColor: Colors.red,
      background: Colors.grey.shade50,
    ),
    useMaterial3: true,
    appBarTheme: AppBarTheme.of(context).copyWith(
      elevation: 6,
      shadowColor: Colors.black.withOpacity(.5),
    ),
  ),
  ...
);

Answer 3

You can use, special attribute for your theme from material docs

<style name="AppTheme" parent="Theme.Material3.Light.NoActionBar">
    <item name="elevationOverlayEnabled">false</item>
</style>

Answer 4

Update code with surfaceTinColor and shadowColor.

AppBar(
   backgroundColour: blue, //whatever you want
   surfaceTinColor: blue, // backgraound of appbar when you scroll
   elevetion: 4, // default level of material 2
   shadowColor: Colors.black.withOpacity(0.6), //looks good to me
)