Fix UI Changes After Upgrading to Flutter 3.16

Introduction

After upgrading to Flutter 3.16, many developers have noticed significant UI changes in their apps. These include:

• App bar losing shadows and getting a tinted background.
• Background colors appearing slightly tinted instead of pure white.
• Buttons and spaces becoming larger.
• Dialogs, date pickers, and time pickers looking different, often with a light purple tint.

These changes occur because Material 3 (M3) is enabled by default in Flutter 3.16. This post will guide you on how to restore your previous UI or adjust to Material 3 properly.

Solution: Reverting to Material 2

If you want to disable Material 3 and restore the previous UI, update your ThemeData in MaterialApp like this:

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

Note: This is a temporary fix, as future Flutter versions will only support Material 3.

If disabling Material 3 doesn’t work immediately, try performing a hot restart (Shift + R in the terminal) or fully restart the app.

Solution: Customizing Material 3 UI

If you prefer to adapt to Material 3 but want to modify certain aspects of the UI, use these fixes:

1. Fix AppBar Shadow and Tint

Material 3 removes shadows from the AppBar and applies a surface tint by default. You can restore the old appearance by setting:

ThemeData(
  appBarTheme: AppBarTheme(
    elevation: 4, // Restores shadow
    surfaceTintColor: Colors.white, // Removes unwanted tint
  ),
)

Or apply it directly to an individual AppBar:

AppBar(
  elevation: 4,
  surfaceTintColor: Colors.white,
)

2. Fix Background Tinting Issue

To remove the slight tinting effect on the scaffold background, set:

ThemeData(
  scaffoldBackgroundColor: Colors.white,
  canvasColor: Colors.white,
)

3. Adjust Button Size and Appearance

Material 3 makes buttons slightly larger. If you want to keep the old sizing, explicitly define button styles:

ThemeData(
  elevatedButtonTheme: ElevatedButtonThemeData(
    style: ButtonStyle(
      padding: MaterialStateProperty.all(EdgeInsets.symmetric(horizontal: 16, vertical: 12)),
      shape: MaterialStateProperty.all(RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(8),
      )),
    ),
  ),
)

4. Fix Dialog and Picker Colors

Dialogs, time pickers, and date pickers now follow Material 3’s color scheme. You can override their appearance like this:

ThemeData(
  dialogBackgroundColor: Colors.white,
  timePickerTheme: TimePickerThemeData(
    backgroundColor: Colors.white,
  ),
  datePickerTheme: DatePickerThemeData(
    backgroundColor: Colors.white,
  ),
)

Should You Stick with Material 3?

While you can disable Material 3 temporarily, it’s best to migrate eventually since Flutter will deprecate Material 2 in future releases. To migrate smoothly:

• Refer to Flutter’s official Material 3 migration guide.
• Explore the Material 3 demo to understand the new design changes: Material 3 Demo.

FAQs

1. Why did my UI change after upgrading to Flutter 3.16?

Flutter 3.16 enables Material 3 by default, which introduces new design changes affecting app bars, buttons, and background colors.

2. How do I restore my old UI?

Set useMaterial3: false in your ThemeData.

3. My useMaterial3: false setting isn’t working. What should I do?

Try performing a hot restart (Shift + R in the terminal) or a full app restart.

4. Should I migrate to Material 3?

Yes, as Material 2 will eventually be deprecated. It’s best to adjust your UI gradually to follow the new Material 3 design guidelines.