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!

Answer 1

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

Answer 2

You can override the default theme on materialApp.

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

Answer 3

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

surfaceTintColor: Colors.customColor