Material 3 in Flutter

Updated 27 April 2023

Save

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.

You may also check our interactive app designs by our Flutter app development company

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.

Before Using Material 3
After Using Material 3

List Of Widgets Modified in Material 3  

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

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.

Material 2 Chip Widget
Material 3 Chip Widget

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.

Material 2 FAB
Material 3 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.

You may also visit our blog on Material Design Theme Style in Android – https://mobikul.com/material-design-theme-style/

Thanks for reading!!

References

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

author
. . .

Leave a Comment

Your email address will not be published. Required fields are marked*


Be the first to comment.

Start a Project


    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home