Question 77170 in Flutter Question posted in
The official Flutter documentation can be found here.

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!

Tags:

2

Answers


  1. 0

    You can override the default theme on materialApp.

    theme: ThemeData(
  useMaterial3: true,
  scaffoldBackgroundColor: const Color(0xFF2b8293),
  appBarTheme: AppBarTheme(
    titleTextStyle: TextStyle(...),
    iconTheme: IconThemeData(
      ...
    )
  )
),
    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search