Search code examples
flutterflutter-themeflutter-upgradeflutter-material

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?

Solution

  • 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,
    // ...
  ),
)

    Do take note that this useMaterial3 flag is a temporary solution to give you time to migrate to Material 3. Eventually, only Material 3 will be supported.

    To fully migrate to Material 3, follow this guide: https://docs.flutter.dev/release/breaking-changes/material-3-migration

    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