In this post, I'm going to show you how to make a cool Glass morphism effect and apply it to your drawer using Flutter, of course, you can apply what you will learn here in any other type of widget and you can style your app using this new design Trend, so without further ado let's get started.
1- Create a new Flutter project
using your favorite IDE Create a new Flutter PRoject, and remove the default code created by Flutter and replace it with this code 👇
import 'package:flutter/material.dart';
class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
child: MaterialApp(
home: HomeApp(),
),
);
}
}
class HomeApp extends StatefulWidget {
HomeApp({Key key}) : super(key: key);
@override
_HomeAppState createState() => _HomeAppState();
}
class _HomeAppState extends State<HomeApp> {
@override
Widget build(BuildContext context) {
return Container(
child: Scaffold(
appBar: AppBar(),
drawer: , //all the code is going to be here,
body: Container(),
),
);
}
}
2- Make the Drawer
Okey from Now on we will just work on the drawer property of the Scaffold. inside the drawer property, we will make a Container widget like this
drawer: Container(
width: 300,
height: double.infinity,
decoration: BoxDecoration(
color: Color.fromARGB(180, 250, 250, 250),
boxShadow: [
BoxShadow(
color: Color.fromRGBO(31, 38, 135, 0.4),
blurRadius: 8.0,
)
],
border: Border(
right: BorderSide(
color: Colors.white70,
),
),
),
child: Stack(),
), //all the code is going to be here,
Now inside the Stack Widget add these components.
child: Stack(
children: [
SizedBox(
child: ClipRRect(
child: BackdropFilter(
filter: ImageFilter.blur(
sigmaX: 4.0,
sigmaY: 4.0,
),
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(colors: [
Colors.grey.withOpacity(0.0),
Colors.white.withOpacity(0.2),
]),
),
),
),
),
),
Column(
children: [
DrawerHeader(
child: Row(
children: [
CircleAvatar(
backgroundImage: NetworkImage(
"https://randomuser.me/api/portraits/men/46.jpg"),
radius: 30.0,
),
SizedBox(
width: 20.0,
),
Text("User Name")
],
),
),
Expanded(
child: ListView(
children: [
ListTile(
onTap: () {},
leading: Icon(
Icons.home,
color: Colors.black,
),
title: Text("Home Page"),
),
ListTile(
onTap: () {},
leading: Icon(
Icons.person,
color: Colors.black,
),
title: Text("Profile Page"),
),
ListTile(
onTap: () {},
leading: Icon(
Icons.settings,
color: Colors.black,
),
title: Text("Settings"),
),
ListTile(
onTap: () {},
leading: Icon(
Icons.logout,
color: Colors.black,
),
title: Text("Log Out"),
)
],
),
)
],
),
],
),
okay we just finished our drawer menu and it's ready to be used and the result is also amazing, so you can try it by yourself and you can also try to customize it.
3- Full Code
import 'dart:ui';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
String _imageBg =
"https://images.unsplash.com/photo-1561708232-fc2ac7e36676?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80";
String _userAvatar = "https://randomuser.me/api/portraits/men/46.jpg";
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
elevation: 0.0,
title: Text(widget.title),
),
drawerScrimColor: Colors.transparent,
drawer: Container(
width: 300,
height: double.infinity,
decoration: BoxDecoration(
color: Color.fromARGB(180, 250, 250, 250),
boxShadow: [
BoxShadow(
color: Color.fromRGBO(31, 38, 135, 0.4),
blurRadius: 8.0,
)
],
border: Border(
right: BorderSide(
color: Colors.white70,
))),
child: Stack(
children: [
SizedBox(
child: ClipRRect(
child: BackdropFilter(
filter: ImageFilter.blur(
sigmaX: 4.0,
sigmaY: 4.0,
),
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(colors: [
Colors.grey.withOpacity(0.0),
Colors.white.withOpacity(0.2),
])),
),
),
),
),
Column(
children: [
DrawerHeader(
child: Row(
children: [
CircleAvatar(
backgroundImage: NetworkImage(_userAvatar),
radius: 30.0,
),
SizedBox(
width: 20.0,
),
Text("User Name")
],
),
),
Expanded(
child: ListView(
children: [
ListTile(
onTap: () {},
leading: Icon(
Icons.home,
color: Colors.black,
),
title: Text("Home Page"),
),
ListTile(
onTap: () {},
leading: Icon(
Icons.person,
color: Colors.black,
),
title: Text("Profile Page"),
),
ListTile(
onTap: () {},
leading: Icon(
Icons.settings,
color: Colors.black,
),
title: Text("Settings"),
),
ListTile(
onTap: () {},
leading: Icon(
Icons.logout,
color: Colors.black,
),
title: Text("Log Out"),
)
],
),
)
],
),
],
),
),
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(_imageBg),
fit: BoxFit.cover,
)),
),
floatingActionButton: FloatingActionButton(
onPressed: () {},
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
Make a Glass Morphism Navigation Drawer using Flutter
Reviewed by Medics
on
February 16, 2021
Rating:
Reviewed by Medics
on
February 16, 2021
Rating:
Get Postal Code
ReplyDeleteGreat post
ReplyDeleteThanks for
ReplyDeletemedical Science Books
nibba nibbi meaning in Hindi
ReplyDelete