Migration from Flutter Material-2 to Material-3
Recently we have the latest stable SDK release of flutter on 01-26-2024, Where we have some issues (With respect to design) to be taken care as there is change in Material design. In the latest stable SDK Material-3 has been used.
Flutter version | Architecture | Ref | Release Date | Dart version |
x64 | 4145645 | 1/26/2024 | 3.2.6 |
We need to migrate from Material-2 to Material-3 in order to fix the design issues that we might get in future with most of the widgets like Cards, Themes, Colors and others.
Currently, Material 3 changes are only available when opting in, so you’ll need to use the
useMaterial3
flag onThemeData
to enable Material 3 support. (This might change in the future, so be sure to check out the Flutter website for updated documentation. We’ll also update this article soon after the change takes place.)To use Material 3 in Flutter instead of Material 2, specify the following:
theme: ThemeData( useMaterial3: true, ),
New widgets
To get most of the widget changes, set the useMaterial3
flag. However, some widgets have changed so much in Material 3 that they’ve been replaced with new widgets. Here are some of the new widgets:
NavigationBar & NavigationDrawer
The BottomNavigationBar
widget has been replaced with the NavigationBar
. It’s a little taller and doesn’t have a drop-shadow (that indicates elevation).
Segmented buttons
Segmented buttons give your user a toggleable choice from several options in a single widget. By default, you can only select one item, unless you specify the multiSelectionEnabled
parameter.
Filled buttons
We’ve increased our selection of Button
s to include the new FilledButton.
This button creates a colored, non-elevated button. The FilledButton.tonal
method sets current background as a secondary color.
Badges
The new Badge
widget can be used to give extra information, generally indicating a count or change of status, to a parent widget. They’re available in large and small sizes:
Badge widgets attached to parent Icons
Generating a color scheme
A brand new feature of Material 3 allows you to set the color theme of your entire app from a single seed color. Set the color scheme seed parameter in your theme constructor and, from that one entry, Flutter generates a harmonious color scheme for every widget in your app. This scheme works in both light and dark modes!
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.light(
useMaterial3: true,
colorSchemeSeed: Color.fromRGBO(188, 0, 74, 1.0);
),
body: MyHomePage(),
);
}