Material3 widgets are newly designed UI elements that are used in Android 12 and above. They provide really good look and feel. Accessing them is very easy. Let's dive into it.

How to access Material3 widgets in flutter
How to access Material3 widgets in flutter

How to access Material3 widgets in flutter
How to access Material3 widgets in flutter

Start with creating a flutter application and place some elements I'm using same code from my previous project of Page Transitions demo.

Step 1:

Open a flutter project or create a new one as you like

Step 2:

Go to main.dart and find MaterialApp widget.

Step 3:

Inside theme data set property useMaterial3 to true.

Step 4:

Now set up appBarTheme property with text and background colors now MaterialApp widget will look like this

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
useMaterial3: true,
primarySwatch: Colors.blue,
appBarTheme: const AppBarTheme(
titleTextStyle: TextStyle(color: Colors.white),
backgroundColor: Colors.blue)),
home: const MyHomePage(title: 'Flutter Demo Page transition'),
);
}

Step 5:

Add some widgets to your page I've only used Elevated Buttons for this tutorial.

Here is full code.

Here you can watch video tutorial in detail:

Follow for more such content on socials and Youtube.