/
Migration from Flutter Material-2 to Material-3

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 on ThemeData 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 Buttons to include the new FilledButton. This button creates a colored, non-elevated button. The FilledButton.tonalmethod 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(), ); }
Add label

Related content