In this article, we will learn what Flutter drawer widget is, its role and how is it created. So without wasting any more time, let’s just get right into implementing our beautiful Flutter drawer widget UI.
Outline
- Introduction: Flutter Drawer Widget
- Flutter Drawer Implementation
- Customizing Flutter Drawer Widget
- Background Color
- Elevation
- Shape
- Child
- Implementing The Drawer Design
- Flutter Drawer Widget Design Complete Source Code
- Conclusion
Introduction: Flutter Drawer Widget
Drawer widget is a very beautiful approach for navigation to different screens within the Flutter app. So, let’s get right into implementing it.
Flutter Drawer Implementation
drawer: Drawer( )
appBar: AppBar(backgroundColor: Colors.black54)


Customizing Flutter Drawer Widget
Let’s now understand how to properly customize our drawer widget.
Background Color
backgroundColor: Colors.grey

Elevation
elevation: 20
Shape
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(50))

Child
child: Container( height: double.infinity, width: double.infinity, color: Colors.grey, )
Implementing The Drawer Design
Let’s see how to implement it.
Top Block
We have used a container widget and customize it in our own way, we have given it a background image and by using the color filter constructor, we have given it a shade. We also have given our bottom right edge of container a circular shape, and we have given our container a shadow as well.
Text In Top Block
Stack In Top Block

Flutter Container Clickable Buttons

List<String> categories = [ 'Home', 'Featured Posts', 'Recent Posts', 'Saved Posts', 'Terms & Conditions', 'Logout' ];
All of the flutter widgets, like container widget, text widget, decorations, stack widget, column widget, row widget etc. are all discussed in detailed in our previous articles.
Feel free to ask if you still have any questions regarding Flutter drawer widget. We’ll be very glad to answer all.
Flutter Drawer Widget Design Complete Source Code
import 'package:flutter/material.dart'; import 'package:google_fonts/google_fonts.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, title: 'Flutter Beautiful Drawer Widget', home: homePage()); } } class homePage extends StatefulWidget { @override _homePageState createState() => _homePageState(); } class _homePageState extends State<homePage> { @override Widget build(BuildContext context) { return DrawerWidget(); } } class DrawerWidget extends StatelessWidget { List<String> categories = [ 'Home', 'Featured Posts', 'Recent Posts', 'Saved Posts', 'Terms & Conditions', 'Logout' ]; @override Widget build(BuildContext context) { return SafeArea( child: Scaffold( appBar: AppBar(backgroundColor: Colors.black54), drawer: Drawer( backgroundColor: Colors.grey, elevation: 20, shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(1)), child: Container( height: double.infinity, width: double.infinity, color: Colors.grey, child: Column( children: [ Container( height: 200, width: double.infinity, // color: Colors.black, child: Stack(children: [ Container( height: 150, decoration: BoxDecoration( image: DecorationImage( colorFilter: ColorFilter.mode( Colors.black.withOpacity(.8), BlendMode.darken), fit: BoxFit.cover, image: AssetImage('assets/pic1.jpg')), color: Colors.grey.shade900, boxShadow: [BoxShadow(blurRadius: 15)], borderRadius: BorderRadius.only( bottomRight: Radius.circular(150))), padding: EdgeInsets.all(10), width: double.infinity, child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Padding( padding: EdgeInsets.only(right: 50), child: Text( 'Zeeshi Wazir', style: GoogleFonts.montserrat( color: Colors.white, fontWeight: FontWeight.bold, fontSize: 15), ), ), Text( 'zeerockyf5@gmail.com', style: GoogleFonts.montserrat( color: Colors.white, fontSize: 9), ) ], )), Positioned( bottom: 0, left: 50, child: Align( alignment: Alignment.bottomCenter, child: Container( height: 100, width: 100, decoration: BoxDecoration( image: DecorationImage( fit: BoxFit.cover, image: AssetImage('assets/pic1.jpg')), color: Colors.grey, shape: BoxShape.circle, boxShadow: [ BoxShadow(blurRadius: 7, offset: Offset(0, 3)) ], )), ), ) ]), ), ListView.builder( physics: NeverScrollableScrollPhysics(), padding: EdgeInsets.only(top: 30), shrinkWrap: true, itemCount: categories.length, itemBuilder: (context, index) { return GestureDetector( onTap: () {}, child: Container( height: 40, decoration: BoxDecoration( borderRadius: BorderRadius.only( bottomRight: Radius.circular(30), bottomLeft: Radius.circular(30), topLeft: Radius.circular(30), topRight: Radius.circular(30)), color: Colors.grey.shade900, boxShadow: [BoxShadow(blurRadius: 4)]), // width: 150, margin: EdgeInsets.symmetric(horizontal: 20, vertical: 5), alignment: Alignment.center, child: Text( categories[index], style: TextStyle( fontSize: 12.5, color: Colors.white, fontWeight: FontWeight.w600), ), ), ); }) ], ), ), ), )); } }
Conclusion
That’s all for this article, hope you now have a detailed understanding of how to implement and customize Flutter drawer widget. We’ll be looking forward to receive your valuable feedback on this post. Hope to see you in our next articles in which we will dig deep into other amazing widgets. Thank you for reading it.