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

Question

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).

---

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

Answer 1

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 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

Answer 2

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.

Answer 3

Material3 has a very good slide behaveior for LisView I needed to have them. I did override all default material3 theme styles and colors as below.

import 'package:customer/screens/order/locations.dart';
import 'package:customer/screens/pages/home.dart';
import 'package:customer/screens/pages/loading.dart';
import 'package:customer/shared/services/colors.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class Routes extends StatelessWidget {
  const Routes({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark.copyWith(
      systemNavigationBarColor:
          Colors.white, // Background color of the bottom status bar
      systemNavigationBarIconBrightness:
          Brightness.dark, // Icon color of the bottom status bar
    ));
    return MaterialApp(
      builder: (context, child) => MediaQuery(
          data: MediaQuery.of(context).copyWith(alwaysUse24HourFormat: true),
          child: child!),
      debugShowCheckedModeBanner: false,
      theme: customTheme,
      initialRoute: '/',
      routes: {
        '/': (BuildContext context) => Loading(),
        '/home': (BuildContext context) => Home(),
        '/location': (BuildContext context) => Locations(),
      },
    );
  }
}

ThemeData customTheme = ThemeData(
  primarySwatch: swatchify(),
  appBarTheme: AppBarTheme(
    foregroundColor: Tingsapp.fontColor,
    backgroundColor: Tingsapp.white,
    surfaceTintColor: Tingsapp.white,
  ),
  fontFamily: 'Outfit',
  textSelectionTheme: TextSelectionThemeData(
    cursorColor: Tingsapp.primary,
    selectionColor: Tingsapp.primary,
  ),
  elevatedButtonTheme: ElevatedButtonThemeData(
      style: ButtonStyle(
    shape: MaterialStateProperty.all<RoundedRectangleBorder>(
        RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(50.0),
            side: BorderSide(color: Tingsapp.primary))),
    backgroundColor: MaterialStateProperty.resolveWith(
      (Set<MaterialState> states) {
        if (states.contains(MaterialState.pressed)) {
          return Tingsapp.inActive;
        } else if (states.contains(MaterialState.hovered)) {
          return Tingsapp.inActive;
        } else {
          return Tingsapp.primary; // Your primary color
        }
      },
    ),
    foregroundColor: MaterialStateProperty.all(Tingsapp.black),
  )),
  textButtonTheme: TextButtonThemeData(
    style: ButtonStyle(
      backgroundColor: MaterialStateProperty.resolveWith(
        (Set<MaterialState> states) {
          if (states.contains(MaterialState.pressed)) {
            return Tingsapp.inActive;
          } else if (states.contains(MaterialState.hovered)) {
            return Tingsapp.inActive;
          } else {
            return Tingsapp.white; // Your primary color
          }
        },
      ),
      foregroundColor: MaterialStateProperty.all(Tingsapp.primary),
    ),
  ),
  outlinedButtonTheme: OutlinedButtonThemeData(
      style: ButtonStyle(
          shape: MaterialStateProperty.all<RoundedRectangleBorder>(
              RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(50.0),
                  side: BorderSide(color: Tingsapp.primary))),
          side: MaterialStateProperty.resolveWith((Set<MaterialState> states) {
            if (states.contains(MaterialState.pressed)) {
              return BorderSide(color: Tingsapp.primary, width: 2);
            } else {
              return BorderSide(color: Tingsapp.primary, width: 2);
            }
          }),
          backgroundColor: MaterialStateProperty.resolveWith(
            (Set<MaterialState> states) {
              if (states.contains(MaterialState.pressed)) {
                return Tingsapp.primary;
              } else if (states.contains(MaterialState.hovered)) {
                return Tingsapp.primary;
              } else {
                return Tingsapp.white; // Your primary color
              }
            },
          ),
          foregroundColor:
              MaterialStateProperty.resolveWith((Set<MaterialState> states) {
            if (states.contains(MaterialState.pressed)) {
              return Tingsapp.black;
            } else {
              return Tingsapp.primary;
            }
          }))),
  floatingActionButtonTheme: FloatingActionButtonThemeData(
    foregroundColor: Tingsapp.black,
    backgroundColor: Tingsapp.primary,
  ),
  inputDecorationTheme: InputDecorationTheme(
    labelStyle: TextStyle(color: Tingsapp.fontColor),
    focusColor: Tingsapp.primary,
    hoverColor: Tingsapp.primary,
    border: OutlineInputBorder(
        borderSide: BorderSide(color: Tingsapp.fontColor, width: 1),
        borderRadius: BorderRadius.circular(10)),
    focusedBorder: OutlineInputBorder(
      borderRadius: BorderRadius.circular(10),
      borderSide: BorderSide(
        color: Tingsapp.fontColor,
      ),
    ),
    enabledBorder: OutlineInputBorder(
      borderRadius: BorderRadius.circular(10),
      borderSide: BorderSide(
        color: Tingsapp.fontColor,
      ),
    ),
  ),
  indicatorColor: Tingsapp.primary,
  focusColor: Tingsapp.primary,
  dialogBackgroundColor: Colors.white,
  scaffoldBackgroundColor: Colors.white,
  canvasColor: Colors.white,
  bottomSheetTheme: BottomSheetThemeData(backgroundColor: Tingsapp.white),
  dialogTheme: DialogTheme(backgroundColor: Tingsapp.white),
  dropdownMenuTheme: DropdownMenuThemeData(
    menuStyle:
        MenuStyle(backgroundColor: MaterialStateProperty.all(Tingsapp.bgColor)),
  ),
);