Material 3 in Flutter

Material 3 in Flutter is the latest version. It is also known as ‘Material You’.

By default, every flutter app used Material 2 within it. Currently, Material 3 is not completely stable.

In order to use Material 3 within the app, we need to do add-on some code. So, let’s check it out.

With the help of the “useMaterial3″ property, we can use Material 3 in our Flutter Application.

So, here we can see the clear difference in the UI Design of the app before using Material 3 and after using Material 3.

List Of Widgets Modified in Material 3  

There are many widgets that have been modified in Material 3:-

• Chips
• Floating Action Button
• TabBar
• BottomNavigationBar
• Buttons

So, we will be covering some widgets in this blog

Starting with Chip Widget, in this widget, there is a modification in the shape and the dynamic color compatibility.

Material 2 provides a Rounded Shape Chip whereas Material 3 provides a Round Rectangular Shape chip. 

Material 3 provides us with the selected icon automatically on the selected chip. We can modify it as well.

Next, let’s check out Floating Action Button(FAB)

In Material 2, FAB is represented by default as a circular button whereas in Material 3 it is represented in a boxier style with small rounded corners.

Material 3, also provides an option to create a bigger size FAB.

Conclusion

In this blog, we have discussed how can we add-on Material 3 to Flutter Application.

I hope it will help you out in understanding.

Thanks for reading!!

References

https://docs.flutter.dev/development/ui/material3-updates