[SOLVED] Flutter AppBar elevation changes background color how to maintain background while showing shadow?

Flutter AppBar elevation changes background color how to maintain background while showing shadow?

Problem Description:

I'm working on a Flutter app, and I want to add a shadow to the AppBar using the elevation and shadowColor properties. However, when I set these, the AppBar's background color appears to change slightly, even though I've explicitly set the backgroundColor to Colors.white.

The scrolling behavior is working fine, and the correct background color is displayed when the page is scrolled. But when the elevation and shadowColor are applied, the background color looks different.

What I Tried:

Here’s the code I’m using for my AppBar:

AppBar(
  backgroundColor: Colors.white,
  scrolledUnderElevation: 0,
  elevation: 1.0,
  shadowColor: const Color.fromRGBO(0, 0, 0, 0.25),
)

Despite setting backgroundColor to Colors.white, the background appears slightly off when elevation and shadow are applied.

Expected and Actual Results:

Expected: The AppBar should maintain the white background while displaying the shadow.
Actual: The AppBar's background color changes slightly when the shadow is added.

Specific Question:

How can I ensure the AppBar maintains its background color (pure white) while still showing the shadow effect from elevation and shadowColor?

Solution

Set the surfaceTintColor to Colors.transparent

AppBar(
  backgroundColor: Colors.white,
  scrolledUnderElevation: 0,
  elevation: 1.0,
  shadowColor: const Color.fromRGBO(0, 0, 0, 0.25),
  surfaceTintColor: Colors.transparent,
)

The surfaceTintColor is the color of the surface tint overlay applied to the material color to indicate elevation.

Material Design 3 introduced a new way for some components to indicate their elevation by using a surface tint color overlay on top of the base material color. This overlay is painted with an opacity that is related to the elevation of the material.