m3 material not being elevated

[cedvdb]

repro: https://github.com/cedvdb/flutter_repros/tree/m3_material_elevation

The repro has to be run on a big screen because it has the same app running 12 times side by side with different Theme constructors. In the repro the elevated material at the bottom should be elevated but it is not in m3.

[maheshmnj]

Hi @cedvdb, Thanks for filing the issue. I am not sure I understood the issue, Can you please clarify what exactly the issue is?

[cedvdb]

In the repro the elevated material at the bottom should be elevated but it is not on the apps running on the right which are running with the useMaterial3 flag. The shadows are not seen. You cannot clearly see the elevation if you compare it to those on the left.

[maheshmnj]

I am sorry, I am still little confused, By elevated material are you referring to the OverlayButton?

Overlay Button without shadow Circled with red

[cedvdb]

Yes what is in the red circle is not elevated on the right. Is it clearer now ? In your red circles there is no shadow behind the elevated material. Behind the blue circle there is a shadow as you said.

In other words the overlay button is a Material widget with an elevation and the elevation is not respected.

[TahaTesser]

Hi @cedvdb

This is intended behavior when enabling useMaterial3

flutter/packages/flutter/lib/src/material/material.dart

Lines 255 to 269 in 0cbd623

	/// The color to paint the shadow below the material.
	///
	/// When [ThemeData.useMaterial3] is true, and this is null, then no drop
	/// shadow will be rendered for this material. If it is non-null, then this
	/// color will be used to render a drop shadow below the material.
	///
	/// When [ThemeData.useMaterial3] is false, and this is null, then
	/// [ThemeData.shadowColor] is used, which defaults to fully opaque black.
	///
	/// See also:
	/// * [ThemeData.useMaterial3], which determines the default value for this
	/// property if it is null.
	/// * [ThemeData.applyElevationOverlayColor], which turns elevation overlay
	/// on or off for dark themes.
	final Color? shadowColor;

Here shadow color is transparent when shadowColor property is null using Material 3.

flutter/packages/flutter/lib/src/material/material.dart

Line 454 in 0cbd623

shadowColor: widget.shadowColor ?? (theme.useMaterial3 ? const Color(0x00000000) : theme.shadowColor),

You can provide shadow color from the theme, Card widget now does the same thing

flutter/packages/flutter/lib/src/material/card.dart

Line 230 in 0cbd623

Color? get shadowColor => Theme.of(context).colorScheme.shadow;

and it draws shadow when enabling useMaterial3

minimal code sample

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key, this.dark = false});

  final bool dark;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Row(
        children: [
          Expanded(
            child: MaterialApp(
              debugShowCheckedModeBanner: false,
              themeMode: dark ? ThemeMode.dark : ThemeMode.light,
              theme: ThemeData(
                useMaterial3: false,
                brightness: Brightness.light,
                colorSchemeSeed: const Color(0xff6750a4),
              ),
              darkTheme: ThemeData(
                useMaterial3: false,
                brightness: Brightness.dark,
                colorSchemeSeed: const Color(0xff6750a4),
              ),
              home: Example(title: 'Material 2'),
            ),
          ),
          Expanded(
            child: MaterialApp(
              debugShowCheckedModeBanner: false,
              themeMode: dark ? ThemeMode.dark : ThemeMode.light,
              theme: ThemeData(
                useMaterial3: true,
                brightness: Brightness.light,
                colorSchemeSeed: const Color(0xff6750a4),
              ),
              darkTheme: ThemeData(
                useMaterial3: true,
                brightness: Brightness.dark,
                colorSchemeSeed: const Color(0xff6750a4),
              ),
              home: Example(title: 'Material 3'),
            ),
          ),
        ],
      ),
    );
  }
}

class Example extends StatelessWidget {
  Example({super.key, required this.title});

  String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            const Card(
              child: Padding(
                padding: EdgeInsets.all(8.0),
                child: Text('Card'),
              ),
            ),
            OverlayButton(
              onTap: () {},
              child: const Text('Material'),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: const Icon(Icons.add),
      ),
    );
  }
}

class OverlayButton extends StatelessWidget {
  final Function() onTap;
  final Widget child;

  const OverlayButton({
    Key? key,
    required this.onTap,
    required this.child,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Material(
      type: MaterialType.card,
      color: Theme.of(context).colorScheme.surface,
      elevation: 3,
      borderRadius: BorderRadius.circular(20),
      shadowColor: Theme.of(context).colorScheme.shadow,
      surfaceTintColor: Theme.of(context).colorScheme.surfaceTint,
      child: InkWell(
        onTap: onTap,
        borderRadius: BorderRadius.circular(20),
        child: Padding(
          padding: const EdgeInsets.symmetric(
            horizontal: 12,
            vertical: 8,
          ),
          child: DefaultTextStyle(
            style: TextStyle(color: Theme.of(context).colorScheme.onSurface),
            child: child,
          ),
        ),
      ),
    );
  }
}

Closing as this is working as intended.

[cedvdb]

Hey @TahaTesser Thanks for the detailed answer. As I understand it has to be done on a case by case basis now, instead of being done for you automatically and you cannot add that to the AppTheme. I was under the wrong impression that when turning useM3 flag to true I'd have the same app with all the bells and whistles from m3. I was a bit taken aback by how our app looked like when I turned on this flag as I had high hopes. Now I understand that it needs some migration.

[TahaTesser]

@cedvdb
Actually, M3 migration is also making minor tweaks and some clean-up, it is not just changing theme and colors.

• Here shadow color is transparent by default after migrating to M3.
• ListTile won't use hard-coded color in the light mode for disabled icons after migrating to M3.
  See Migrate ListTile unselected icon color to Material 3 #102078

The transition to M3 will introduce many small color changes; seems OK to include this one too.
#99400 (comment)

cc: @HansMuller
Perhaps there should be a migration guide for Material 3?

[cedvdb]

@TahaTesser FYI the context menu do not have shadows, in the Figma file furnished by material there are shadows for the menu. Maybe that's a mistake.

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.