Add support for AppBarTheme.scrolledUnderElevation parameter

[Willian199]

In my app, I have a list screen where I'm using a GridView.
However, when scrolling the AppBar receives a shadow effect (only happens with material3).
To remove the shadow, I need to set the parameter scrolledUnderElevation = 0.

AppBar( scrolledUnderElevation: 0, ... )

If can set AppBarTheme.scrolledUnderElevation default to zero or a parameter for FlexSubThemesData.

https://github.com/rydmike/flex_color_scheme/blob/master/lib/src/flex_color_scheme.dart#L5894
appBarTheme: AppBarTheme( scrolledUnderElevation: 0, ...)

[rydmike]

Hi @Willian199, thanks for you suggestion.

This is potentially something I will add, as support for Material 3 is getting more ready in Flutter.

I am currently reviewing what critical changes and additions will be needed when next release of Flutter comes out. From the looks of things in master channel, it will finally have very good M3 support, I might added this then, or in a later release.

---

Meanwhile and as info, you can always adjust any theme returned by FlexColorScheme by doing a copyWith on the ThemeData it created, to set any additional needed direct ThemeData properties and anything in all its sub-theme properties.

The doc FAQ talks about it here https://docs.flexcolorscheme.com/faq#how-do-i-modify-the-component-themes-with-custom-features

And some concrete examples are provided in discussions in the these links:

• AppBar example: Custom AppBarTheme options - (How to add custom component theme properties not included in FlexColorScheme) #41
• BottomSheet example: Change BottomSheet backgroundColor (Modifying component theme properties not currently supported by FlexColorScheme) #85
• Button example: Flutter web button margins (Theme managed) (Custom modifications to button themes made by FlexColorScheme) #92

Following those example you can already see how it can be done to set scrolledUnderElevation on the theme returned by FlexColorScheme, while keeping all its other values intact.

So for AppBarTheme.scrolledUnderElevation this should work:

class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
    final ThemeData lightTheme = 
      FlexThemeData.light(scheme: FlexScheme.mandyRed, useMaterial3: true);
    return MaterialApp(
      title: 'Flutter Demo',
      theme: lightTheme.copyWith(appBarTheme: lightTheme.appBarTheme.copyWith(
          shadowColor: Colors.transparent,
          scrolledUnderElevation: 1, // <= Or whatever you want :)
        ),
      ),
      themeMode: ThemeMode.light,
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

I put it here to 1 (default is 3 in M3) and the shadowColor to transparent, just an an interesting experiment you can try in M3. It should keep the scroll under tint change that is nice in M3, but potentially remove the shadow it casts form being elevated.

Although I am surprised you are seeing elevation shadow, since the shadow color should already be transparent in M3 to avoid the shadow. Maybe that is not the case in Flutter stable (3.3.x) if you are using that.

Master now has these values as default for AppBar theme in M3 mode:

class _AppBarDefaultsM3 extends AppBarTheme {
  _AppBarDefaultsM3(this.context)
    : super(
      elevation: 0.0,
      scrolledUnderElevation: 3.0,
      titleSpacing: NavigationToolbar.kMiddleSpacing,
      toolbarHeight: 64.0,
    );

  final BuildContext context;
  late final ThemeData _theme = Theme.of(context);
  late final ColorScheme _colors = _theme.colorScheme;
  late final TextTheme _textTheme = _theme.textTheme;

  @override
  Color? get backgroundColor => _colors.surface;

  @override
  Color? get foregroundColor => _colors.onSurface;

  @override
  Color? get shadowColor => Colors.transparent;

  @override
  Color? get surfaceTintColor => _colors.surfaceTint;

  @override
  IconThemeData? get iconTheme => IconThemeData(
    color: _colors.onSurface,
    size: 24.0,
  );

  @override
  IconThemeData? get actionsIconTheme => IconThemeData(
    color: _colors.onSurfaceVariant,
    size: 24.0,
  );

  @override
  TextStyle? get toolbarTextStyle => _textTheme.bodyMedium;

  @override
  TextStyle? get titleTextStyle => _textTheme.titleLarge;
}

So the shadowColor is already transparent there, but it might not be in stable.
Here we go, same theme in stable channel scrolledUnderElevation still 3, but no value set for shadowColor

class _AppBarDefaultsM3 extends AppBarTheme {
  _AppBarDefaultsM3(this.context)
    : super(
      elevation: 0.0,
      scrolledUnderElevation: 3.0,
      titleSpacing: NavigationToolbar.kMiddleSpacing,
      toolbarHeight: 64.0,
    );

  final BuildContext context;
  late final ThemeData _theme = Theme.of(context);
  late final ColorScheme _colors = _theme.colorScheme;
  late final TextTheme _textTheme = _theme.textTheme;

  @override
  Color? get backgroundColor => _colors.surface;

  @override
  Color? get foregroundColor => _colors.onSurface;

  @override
  Color? get surfaceTintColor => _colors.surfaceTint;

  @override
  IconThemeData? get iconTheme => IconThemeData(
    color: _colors.onSurface,
    size: 24.0,
  );

  @override
  IconThemeData? get actionsIconTheme => IconThemeData(
    color: _colors.onSurfaceVariant,
    size: 24.0,
  );

  @override
  TextStyle? get toolbarTextStyle => _textTheme.bodyText2;

  @override
  TextStyle? get titleTextStyle => _textTheme.titleLarge;
}

However, in version 3.3.x stable Material (used in the AppBar) does not get any elevation shadow, if the shadow color is not specified, which it is not with that theme, so it should not be there, despite not being set to transparent. This behavior was actually a small breaking change in how Material behaves when Material 3 is used, compared to how it works in Material 2.

It was then changed (based on some feedback and rationale on topic that I wrote), so that to get no shadow, Material now instead requires setting the shadow color to transparent, which is none breaking with M2 style, but required more work to get many widgets to not use shadows in M3 mode. Which is why the theme for AppBar in M3 now includes defining it as transparent, so it still does not cast any shadow when elevated, as specified in M3 spec.

This is a bit confusing to me, in both cases you should no see any shadow on the AppBar as you scroll under the AppBar when its Material elevates to 3. I have never seen that on FCS themes.

You should only see the change in AppBar color, where it gets a slight tint of the primary color, when you scroll under it. This is called elevation tint in Material 3 design. It is intended if you want to follow M3 design.

Setting scrolledUnderElevation to 0 will indeed remove it, as would modifying the surfaceTintColor to Colors.transparent, although I would also recommend just not elevating it, it requires the least amount of computation for the framework.

Hope this helps with you immediate quick fix needs, and provides some additional background info on it 😄

[Willian199]

Thanks. Worked as well with the example.

In my tests it doesn't seem to be related to shadowColor. Even if set to transparent, this behavior happens.

Flutter on stable channel, version 3.3.10.

With shadowColor: Colors.red;

With shadowColor: Colors.transparent; Still having shadow, on the device it is more visible to see.

With scrolledUnderElevation: 0

My theme definition:

FlexThemeData.light(
      scheme: FlexScheme.blumineBlue,
      surfaceMode: FlexSurfaceMode.highBackgroundLowScaffold,
      blendLevel: 9,
      usedColors: 6,
      appBarElevation: 0,
      transparentStatusBar: true,
      applyElevationOverlayColor: false,
      appBarOpacity: 1,
      bottomAppBarElevation: 0,
      subThemesData: FlexSubThemesData(
        outlinedButtonOutlineSchemeColor: SchemeColor.onPrimaryContainer,
        appBarBackgroundSchemeColor: SchemeColor.tertiaryContainer,
        appBarCenterTitle: !Platform.isIOS,
        interactionEffects: true,
        inputDecoratorBorderType: FlexInputBorderType.outline,
        inputDecoratorRadius: 20,
        inputDecoratorSchemeColor: SchemeColor.primary,
        inputDecoratorBorderWidth: 1,
        inputDecoratorFillColor: Colors.white70,
        inputDecoratorIsFilled: true,
        useTextTheme: true,
        thinBorderWidth: 2,
      ),
      keyColors: const FlexKeyColors(
        useSecondary: true,
        useTertiary: true,
        useKeyColors: true,
      ),
      tones: FlexTones.vividSurfaces(Brightness.light),
      visualDensity: FlexColorScheme.comfortablePlatformDensity,
      useMaterial3: true,
      swapLegacyOnMaterial3: true,
      // To use the playground font, add GoogleFonts package and uncomment
      fontFamily: GoogleFonts.montserrat().fontFamily,
    );

My class for example, just with Grid

  @override
  Widget build(BuildContext context) {
    ThemeData tema = Theme.of(context);
    darkMode = tema.brightness == Brightness.dark;
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'Perfumei',
          style: TextStyle(fontFamily: GoogleFonts.aladin().fontFamily),
        ),
      ),
      body: Container(
        decoration: Degrade.efeitoDegrade(cores: [
          tema.colorScheme.tertiaryContainer,
          tema.colorScheme.secondaryContainer,
        ]),
        child: Column(
          children: [
            Expanded(
              child: Observer(builder: (_) {
                return GridView.builder(
                    shrinkWrap: true,
                    scrollDirection: Axis.vertical,
                    keyboardDismissBehavior:
                        ScrollViewKeyboardDismissBehavior.onDrag,
                    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: crossAxisCount,
                      mainAxisSpacing: 0,
                      crossAxisSpacing: 1.0,
                      childAspectRatio: childAspectRatio + 0.2,
                    ),
                    itemCount: widget.dados.length,
                    itemBuilder: (context, index) {
                      return GridRow(
                        GridModel.fromJson(widget.dados[index]),
                        icon: widget.icon,
                      );
                    });
              }),
            )
          ],
        ),
      ),
    );
  }

[rydmike]

Yes, what you are seeing is the Material 3 elevation tint, not a shadow. When Material elevates in M3, it changes color, you called it a shadow, but a shadow would be a drop shadow under the AppBar, like the red example.

The slightly different color on the AppBar, you get when you scroll under it, comes from AppBar being elevated and tint color being applied. This is a default Material3 design and intended in it. It is perhaps not such a good look for your particular use case and design.

The correct way to get rid of it, is to set the scroll under elevation to 0. Another way is to set the tint color to transparent, but elevation should be computationally more efficient for the framework.

The shadow color only affects the red glow part in your example, and that is already invisible by default in Material 3. I got a bit confused when you called it a shadow, but where actually referring to the elevation tint. Sure one could say it looks a bit like there is shadow on the AppBar, since it gets darker, someone might also say it looks like the transparency scrim on the status bar of the AppBar, but it comes from the elevation of the AppBar and Material getting elevation tint when elevated.

Semantics and terminology, yes I agree 😀
Just, glad you got is working they way you need for your app 👍💙

Kind regards, Mike

[rydmike]

This feature will be included in the next FlexColorScheme feature release, currently the WIP release version number is 6.2.0 since it contains no breaking changes so far, even if the release will be quite major feature wise.

Target is to release it shortly (few days) after the Flutter Forward event on Jan 25th, 2023.

[rydmike]

Still same milestone target, but the release will be called 7.0.0, since I am introducing a few minor default style breaking changes. There are no breaking API changes though. There is a beta of it available on pub if you are feeling experimental, it includes this new property.
https://pub.dev/packages/flex_color_scheme/versions/7.0.0-dev.2

[Willian199]

Worked perfectly.
Thanks man.

[rydmike]

Final beta of version 7 is out. There will be no additional features or API changes in the stable release. More info in this tweet thread:

https://twitter.com/RydMike/status/1637228788139302914?s=20

Closing this feature request as delivered in version7 final beta 😄