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

After upgrading to Flutter 3.16, the app bar, background color, button size, and spaces change

I upgraded my Flutter version to 3.16. When I run my app, I notice a lot of changes in the UI.

  1. The app bar doesn’t have shadows anymore. When I scroll, the app bar is now tinted with a color and shown without shadows.
  2. The background of the body was previously white, but now it’s a bit tinted with a color.
  3. Buttons and spaces appear to be larger now.
  4. Alert dialogs, time pickers, date pickers, and other material components look different now. They appear with a tinted light purple color (or the color from theme I’m using).

Before and after upgrading to Flutter 3.16

How do I get the same UI appearance as I had before the upgrade to Flutter 3.16?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    This is the result of using Material 3, which is enabled by default since Flutter 3.16. It's one of the breaking changes from the Flutter 3.16 update.

    You can opt out of Material 3 by specifying useMaterial3: false in your ThemeData:

    MaterialApp(
  // ...
  theme: ThemeData(
    useMaterial3: false,
    // ...
  ),
)

    To see the differences between Material 2 and Material 3, go to this interactive demo: https://flutter.github.io/samples/web/material_3_demo/#/

    To see all the breaking changes in the Flutter 3.16 update, go to this link: https://docs.flutter.dev/release/breaking-changes#released-in-flutter-316


  2. 0

    Yes, Material 3 is enabled by default since Flutter 3.16. So, to fix it, you can disable Material 3 as shown below or you can change the default value in your AppTheme like this:

    ThemeData.light().copyWith(
      bottomSheetTheme: defaultTheme.bottomSheetTheme.copyWith(backgroundColor: Colors.white),

    This example is for the BottomSheet, but you can do it for all your widgets.

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

Back To Top
Search