Search code examples
fluttermaterial3flutter-material

Flutter Material 3 Changed colors, and fonts

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:

enter image description here

enter image description here

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!

Solution

  • 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