CODEWITHSUNDEEP
flutterflutter-themeflutter-upgradeflutter-material
Dhafin Rayhan
Dhafin Rayhan

Reputation: 8549

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?

Upvotes: 51

Views: 25928

Answers (6)

Sahil Choudhary
Sahil Choudhary

Reputation: 211

After upgrading to Flutter 3.16 Not applying Apply useMaterial3: false it will look like this enter image description here

But Now You Have to add

MaterialApp(

  theme: ThemeData(
    useMaterial3: false,
   
  ),
)

It will Look Like This Below in main.dart file enter image description here

Upvotes: 0

Dhafin Rayhan
Dhafin Rayhan

Reputation: 8549

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

Upvotes: 109

bqubique
bqubique

Reputation: 1405

Another easy fix to this would be to forceMaterialTransparency: true inside AppBar class.

Upvotes: 9

Hemant_Negi
Hemant_Negi

Reputation: 2078

That green tint on the appbar can be controlled as

ThemeData customTheme = ThemeData(
     appBarTheme: AppBarTheme(
      surfaceTintColor: Colors.white
    ),
);

Directly in appbar as

 AppBar(
        .....
        surfaceTintColor: Colors.white,
    .....
    );
    ```

Upvotes: 7

Zia
Zia

Reputation: 683

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)),
  ),
);

Upvotes: 1

Jeshanth
Jeshanth

Reputation: 41

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.

Upvotes: 2

Related Questions