What's New In Material 3? | Sailesh Verma
Shared on Flutter Tour
What's New In Material 3?
In Flutter, the Material library provides developers with all the building blocks your UI needs. Since the launch of Material 3 at Google I/O 2021, the Flutter team has been updating Flutter’s Material library to support these new changes.
Getting started
To add Material 3 to your app, set the useMaterial3 flag to true in your theme’s constructor:
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( theme: ThemeData.light(useMaterial3: true), body: MyHomePage(), ); }}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 introduced in material3 designs:
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:
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(), ); }What is ASO? "App Store Optimization", ASO is the process of optimizing mobile apps to improve their visibility and rankings within app stores (such as the Apple App Store and Google Play Store). ASO aims to increase an app's discoverability and attract more organic (non-paid) downloads
Flutter Tour
FlutterGen Code Generator While working with flutter, to load assets in your Flutter app, you have to reference the asset using path strings, which is not safe. As a Flutter developer, you have no choice but to refer to them using strings directly in your code. Working with images, for instance, is not easy because you have to refer to them by their path string. FlutterGen, a Flutter code generator for your assets that help remove all string-based APIs in your app.