Material YOU and Material 3 Widgets in Flutter | Desi Programmer
We will talk about using Material YOU and material 3 widgets in flutter.
Here is the youtube video for better understanding.
Here is the Source code from the video
// ignore_for_file: prefer_const_literals_to_create_immutables, prefer_const_constructors
import 'package:flutter/material.dart';
import 'package:dynamic_color/dynamic_color.dart';
void main() {
runApp(const MyApp());
}
Color brandColor = Color(0XFF171A9E);
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 DynamicColorBuilder(
builder: (ColorScheme? lightDynamic, ColorScheme? dark) {
ColorScheme lightColorScheme;
ColorScheme darkColorScheme;
if (lightDynamic != null && dark != null) {
lightColorScheme = lightDynamic.harmonized()..copyWith();
lightColorScheme = lightColorScheme.copyWith(secondary: brandColor);
darkColorScheme = dark.harmonized();
} else {
lightColorScheme = ColorScheme.fromSeed(seedColor: brandColor);
darkColorScheme = ColorScheme.fromSeed(
seedColor: brandColor,
brightness: Brightness.dark,
);
}
return MaterialApp(
title: 'M3 Demo',
theme: ThemeData(
fontFamily: "font",
useMaterial3: true,
colorScheme: lightColorScheme,
),
darkTheme: ThemeData(
colorScheme: darkColorScheme,
),
home: const MyHomePage(
title: 'Material Components',
),
);
});
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int selected = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: Icon(
Icons.add_a_photo,
),
),
bottomNavigationBar: NavigationBar(
onDestinationSelected: (v) {
setState(() {
selected = v;
});
},
selectedIndex: selected,
destinations: [
NavigationDestination(
icon: Icon(
Icons.home,
),
label: "Home",
),
NavigationDestination(
icon: Icon(
Icons.shopping_cart_checkout,
),
label: "Cart",
),
NavigationDestination(
icon: Icon(
Icons.tablet_sharp,
),
label: "Medicines",
),
NavigationDestination(
icon: Icon(
Icons.supervised_user_circle_outlined,
),
label: "Profile",
),
],
),
body: Center(
child: Column(
children: [
ElevatedButton(
onPressed: () {},
child: Text(
"Login",
),
),
SizedBox(
width: 100.0,
height: 60.0,
child: ElevatedButton(
onPressed: () {},
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(
Colors.indigo,
),
),
child: Text(
"Login",
style: TextStyle(
color: Colors.white,
),
),
),
),
OutlinedButton(
onPressed: () {},
child: Text(
"Login",
),
),
TextButton(
onPressed: () {
showDialog(
context: context,
builder: (context) => AlertDialog(
title: Text(
"Warning !",
),
content: Text(
"Are You sure You want to delete",
),
actions: [
ElevatedButton(
onPressed: () {},
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(
Colors.indigo,
),
),
child: Text(
"Yes",
style: TextStyle(
color: Colors.white,
),
),
),
],
),
);
},
child: Text(
"Login",
),
),
],
),
),
);
}
}