Flutter Material 3 Changed colors, and fonts

Question

So I just decided to give Material 3 a shot in Flutter and it changed a whole lot of colors, and fonts etc.

I knew certain things would look different like more rounded corners on my cards but I wasn't expecting all the fonts and card colors to change. I literally just added the useMaterial3: true, to the code below:

child: MaterialApp(
          debugShowCheckedModeBanner: false,
          routes: appRoutes,
          theme: ThemeData(
            useMaterial3: true,
            scaffoldBackgroundColor: const Color(0xFF2b8293),
          ),
          home: const CheckLogin(),
        ),

Here is an example of what has changed with before and after pictures:

Anyway to change the default card color, and title fonts so I do not have to change them in every view in the app one by one?

Also odd to see the vertical 3 dot icon changed to dark while the search Icon did not. Thanks!

you can try to override the themeData on MaterialApp – Md. Yeasin Sheikh Jan 28 '23 at 20:45 — Md. Yeasin Sheikh, Jan 28 '23 at 20:45

score 3 · Accepted Answer · answered Mar 03 '23 at 18:36

Material 3 uses dynamic colors, you can override the theme using the colorScheme inside the ThemeData and tweak the colors there. Then, you can go to the widgets in you app and use Theme.of(context).colorScheme and then .primary or whatever you wish.

To know more about the Material 3 in Flutter you can check https://m3.material.io/develop/flutter

score 2 · Answer 2 · answered Jan 28 '23 at 20:49

2

You can override the default theme on materialApp.

theme: ThemeData(
  useMaterial3: true,
  scaffoldBackgroundColor: const Color(0xFF2b8293),
  appBarTheme: AppBarTheme(
    titleTextStyle: TextStyle(...),
    iconTheme: IconThemeData(
      ...
    )
  )
),

answered Jan 28 '23 at 20:49

Md. Yeasin Sheikh

54,221
7
29
56

Is there documentation some place that shows what each thing I would need to override is? For example what would the Card background color be? – Ten Digit Grid Jan 29 '23 at 01:23
1

You can read the [ThemeData](https://docs.flutter.dev/cookbook/design/themes) to explore about it – Md. Yeasin Sheikh Jan 29 '23 at 06:23
No it does not. It just sets background color for scaffold. – n.podbielski Jun 16 '23 at 09:11
@n.podbielski it would be easier for me if you ask a new question with [minimal-reproducible-example](https://stackoverflow.com/help/minimal-reproducible-example) what exactly went wrong for your case – Md. Yeasin Sheikh Jun 16 '23 at 10:45
WDYM: it is in the name of the property 'scaffoldBGcolor'. Op asked about color for whole theme. – n.podbielski Jun 19 '23 at 07:44
It is possible I did not get very well, but as for the image mark& last text *Anyway to change the default card color, and title fonts so I do not have to change them in every view in the app one by one?Also odd to see the vertical 3 dot icon changed...* I've guess to guess which can be wrong now that I was focused on theses. – Md. Yeasin Sheikh Jun 19 '23 at 14:07

score 0 · Answer 3 · answered Jul 24 '23 at 11:36

0

Whenever you face color issue in material3 just use surfaceTintColor propert inside the widget.

surfaceTintColor: Colors.customColor

answered Jul 24 '23 at 11:36

maskey

1
1

Flutter Material 3 Changed colors, and fonts

3 Answers3