In this post, I will show you how to use Material 3 or Material You in your flutter project, by default flutter is using a material design that is the previous version but now we have Material 3 latest material design from Google.
As we all know flutter 3.0 is out now and it supports the latest Material 3 design by Google.
Steps to use material 3 in the flutter project:
You can also watch a video
First of all, we need to upgrade the flutter from 2.10 to 3.0, then we can use material 3
in the flutter project.
To upgrade flutter simply run the below command in your cmd or terminal and it will upgrade your flutter version.
Once the upgrade process is done create a new flutter project or open an existing flutter project.
Now in your main.dart file set useMaterial3: true inside ThemeData
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( useMaterial3: true, primarySwatch: Colors.blue, ), home: const MyHomePage(title: 'Flutter Demo Home Page'), ); } } |
This will change the regular Material Design of your app to the latest Material 3 design, to see the changes hot restart your app.
