Discovering Material 3: A Sample Flutter App showcasing its Latest Features

Material 3 is a new design language by Google that has updated components, typography, color system, and elevation support for the Flutter Material library.

We have created a sample Flutter app to showcase these features. The app has options to switch between Material 2 and Material 3, light and dark themes, and different color palettes.

The app also has an Adaptive Layout that adjusts based on the screen size. For example, on mobile devices, a Navigation Bar appears at the bottom, while on desktop or web apps, a Navigation Rail appears on the left side.

The app displays all the updated components, such as the AppBar, buttons, FAB, Card, Dialog, NavigationBar, and NavigationRail, which you can explore.

The Color Screen generates a full color scheme from a single seed color and displays all the colors in light and dark palettes. 

The Typography Screen shows the text styles used in the default TextTheme, and the Elevation Screen demonstrates the new supported feature "surfaceTintColor" in the Material library.

In summary, the Flutter app we have created is an excellent way to discover the latest features in Material 3. You can download the demo and check out the guidance at https://m3.material.io/ to learn more about Material 3.

..

GET source code on Github: