Material 3 in Flutter: Design Cross-Platform Applications Quickly
Explore the features added in the latest Material 3 and how they can make designing aesthetic Flutter apps easier.
Material Design is an open-source Google in-house design system that helps you to build high-quality, beautiful digital experiences for mobile, web, and desktop.
It is a comprehensive guide for visual, motion, and interaction design across platforms and devices. The latest update in Material Design (Material 3) enables developers to build flutter applications with a consistent design across all platforms. Material 3 is also sometimes referred to as Material You or M3 as an abbreviation.
In this article, we will discuss the new features brought by Material 3, the key differences between M2 and M3, and how to migrate your Flutter app to Material 3.
Material 3
The Flutter team has already created an awesome interactive sample app for us to get a hands-on experience with Material 3.
This app demonstrates the updated components, default color schema, typography, and elevation. It also lets you toggle between Material 2 and Material 3, light mode and dark mode, and try out different color schemes.
Let’s add Material 3 to your Flutter app
To use Material 3 in your app, you just have to set the useMaterial3 property to true in your theme constructor:
Not all widgets in Flutter are “Material 3-ready” yet, so we need to enable this explicitly. So far, the flutter team has migrated 27/30 components to Material 3. You can track the progress of the remaining widgets for the support of Material 3 here.
To understand how to migrate an existing flutter application to Material 3, you should check out Migrating a Flutter app to Material 3, an article by Flutter contributor Taha Tesser at CodeMagic.
What’s new in Material 3 design?
Material 3 has brought new features in Typography/Iconography, ColorScheme, update elevation, Android-12 features such as an over-scroll stretch effect, new ink ripple, new buttons and components, InkSparkle for splashFactory, etc.
Material widgets also received a bunch of new updates:
- AppBar
- FloatingActionButton(FAB)
- ElevatedButton
- OutlinedButton
- IconButton
- Card
- Sliders
- DropdownMenu
- Switches
- BottomSheet
- Chips
- Dialogs
- NavigationRail
- BottomAppBar
- popUp Menus
- Radio
- CheckBox
- Material Banner
- CircleAvatar
- DatePicker
- ListTile
- Drawer
- TimePicker
New widgets in Material 3
Here are some of the new widgets added to Material 3:
- NavigationBar & NavigationDrawer
- Segmented buttons
- Filled buttons
- Filled tonal button
- Badges
Let’s understand these new widgets and their features in detail.
- NavigationBar and NavigationDrawer
In Material 3, the NavigationBar widget has replaced the BottomNavigationBar widget. It is now a little taller and doesn’t have a drop shadow. Instead, it has a Surface Tint color.
Check this Dart-pad example NavigationBar to view SurfaceTintColor in action.
2. Segmented buttons
Segmented buttons are used for the select options, switch views, or sort elements. They are typically used in cases with only 2–5 options. By default, we can only select a single item unless you specify the multiSelectionEnabled parameter.
3. Filled buttons and Filled tonal button
A Filled button is a colored, non-elevated button. Consider using it as a primary button in any project, as it has the best visual impact after the FAB. Also, it should be used for important tasks representing the complete flow or success, like Confirm or Save.
A Filled tonal button has a secondary background color. It is a middle ground between FilledButton and OutlinedButton. I recommend using it for a lower-priority requirement but with slightly more emphasis than an outline, such as Next flow.
4. Badges
A badge is used to provide a piece of extra information about its child, generally indicating a count or status.
Key differences between Material 2 and Material 3
- Dynamic Colour
- Shapes
- Elevation
- Typography
Let's deep dive into each of them.
- Dynamic Color
Material 3 provides the option of Dynamic Color. It enables us to set a consistent color theme across the entire application easily. We just need to set a single seed color.
Let's add colorSchemeSeed : Colors.red to the starter app. As you can notice, the FAB is now using a light red color instead of the default light purple color from colorScheme and the appbar is flat with no elevation.
After adding colorSchemeSeed : Colors.red to the starter app
While adding a colorSchemeSeed you could face some assertion thrown by the flutter framework as you try to add colorSchemeSeed with colorScheme, primaryColor, or PrimarySwatch.
To fix the below three assertions, remove colorScheme, primaryColor or PrimarySwatch from the theme constructor first.
The new colorScheme will be generated for every widget by setting a single parameter. It has become possible with the use of a low-level material_color_utilities package with an algorithm to create a Material Design 3 color system.
For more information on how the algorithm works, refer to this article by GSYTech.
There is one more super useful feature of Dynamic color. It allows users to select their own color scheme for the whole OS derived from the wallpaper by just using a package.
For more information on how to implement it, refer to this article written by Christos at Dartling.
2. Shapes
Material 3 offers shapes like square, rounded/pill shape, and rounded rectangular shapes. You can observe the changes in the shape of FAB, which was previously a circle, and now has a rounded rectangular shape. All other button shapes also get changed from rounded rectangular to pill-shaped. More widgets like Card, Dialog, BottomSheets, Chips, Switch, etc., have been more rounded.
3. Elevation
Material 3 has introduced a new color property called surfaceTintColor. It is an overlay over any widget indicating its elevation. The overlay is painted with an opacity relative to its elevation value.
4. Typography
In Material 2, we had Headline, Subtitle, BodyText, Caption, Overline, and Button. However, Material 3 has Display, Headline, Title, Body, and Label, which are more descriptive for their usage.
In Material 2, Headline has the largest font size, and Overline has the smallest font size of 10, while in Material 3, Display has the largest font size, and Label has the smallest font size of 11.
For example,
M2 headline1 has a font size of 96, M3 displayLarge has a font size of 57.
M2 overline has a font size of 10, M3 labelSmall has a font size of 11.
Here is the comparison between M3 and M2 font sizes:
For more information on the typography of both versions, check M2 vs M3.
Conclusion
Material 3 adds a new flavor to Flutter. Now, we can say flutter is truly a single code base language as we have to design once and can have a consistent design across all platforms, mobile, web, and desktop.
The flutter team is still working hard to migrate all the widgets to Material 3. You can track their progress on Bring Material 3 to Flutter GitHub issue.
Follow Simform Engineering to keep up with all the latest trends in the development ecosystem.
