In this article I will teach you how to build navigation drawer / sidebar menu in flutter. Drawer is a Material Design panel that slides horizontally from the left edge of the Scaffold, the device screen. Drawer is used with the Scaffold drawer (left-side) property. Drawer can be customized for each individual need but usually has a header to show an image or fixed information and a ListView to show a list of navigable pages. Usually, a Drawer is used when the navigation list has many items. I have posted other article about Flutter Sidebar with iconic display and responsive ui
→ Step-1: Create a flutter project
→ Step-2 : Create a flutter stateless widget and name it Birthdays. Also add that widget in home property.
 |
→ Step-3 : Add Scaffold, Appbar, body & drawer properties.
Now the app will look like this.
 |
→ Step-4: Add drawer header, currentAccountPicture, accountName, accountEmail and otherAccountsPictures.
To set the Drawer header, you have built-in options, the UserAccountsDrawerHeader. The UserAccountsDrawerHeader is intended to display the app’s user details by setting the currentAccountPicture, accountName, accountEmail, otherAccountsPictures, and decoration properties. Add ListView to show a list of navigable pages.
 |
Now the app will look like this.
 |
→ Step-5: Add few listTile & navigation in the drawer.
 |
Now the app will look like this.
 |
This drawer app suitable for both portrait or landscape mode.
 |
Full Code :
|
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( debugShowCheckedModeBanner: false, title: ‘Flutter Demo’, theme: ThemeData( primarySwatch: Colors.blue, ), home: const Birthdays(), ); } } class Birthdays extends StatelessWidget { const Birthdays({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( centerTitle: true, title: Text(‘Drawer’), ), body: const Center( child: Icon( Icons.cake, size: 120.0, color: Colors.orange, ), ), drawer: Drawer( child: ListView( padding: EdgeInsets.zero, children: [ UserAccountsDrawerHeader( currentAccountPicture: Icon( Icons.face, size: 48.0, color: Colors.white, ), otherAccountsPictures: [ Icon( Icons.bookmark_border, color: Colors.white, ), ], accountName: Text(‘H. A. Smrity’), accountEmail: Text(‘test@gmail.com’), ), ListTile( leading: Icon(Icons.date_range), title: Text(‘Birth date’), onTap: () => Navigator.push( context, MaterialPageRoute( builder: (_) => BirthDate(), ), ), ), ListTile( leading: Icon(Icons.mood), title: Text(‘Mood’), onTap: () => Navigator.push( context, MaterialPageRoute( builder: (_) => Mood(), ), ), ), ListTile( leading: Icon(Icons.note_add), title: Text(‘Note’), onTap: () => Navigator.push( context, MaterialPageRoute( builder: (_) => Note(), ), ), ), Divider(), ListTile( leading: Icon(Icons.settings), title: Text(‘Settings’), onTap: () => Navigator.pop(context), ), ], ), ), ); } } class Note extends StatelessWidget { const Note({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(‘Note’), ), body: Center( child: Icon( Icons.note_add, size: 120.0, color: Colors.orange, ), ), ); } } class Mood extends StatelessWidget { const Mood({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(‘Mood’), ), body: Center( child: Icon( Icons.mood, size: 120.0, color: Colors.orange, ), ), ); } } class BirthDate extends StatelessWidget { const BirthDate({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(‘Birth Date’), ), body: Center( child: Icon( Icons.date_range, size: 120.0, color: Colors.orange, ), ), ); } } |
|
Article Contributed By :
|
|
|
|
|
525 Views |
|