Flutter Drawer Menu Example

Navigation Drawer in Flutter is the best approach if you’re having more options that can’t be handled through Tabs that time you need Drawer. Flutter makes it so easy as compared to native apps.

There are some important requirements which are needed for creating a Drawer in Flutter

Requirements

1. Create a Scaffold
2. Add a Drawer in Scaffold
3. Add Items in Drawer
4. Complete Example

• Scaffold: Scaffold class implements basic material layout structure, it provides APIs for Drawer, bottom sheets, Snackbar. Scaffolds occupy all the available space, it means it will appear on the entire window. For creating the drawer we need to wrap it with  Scaffold. Please check the syntax below.

Scaffold(
 drawer:
);

• Drawer : as we have created Scaffold with drawer tag so now we need to add Drawer, check below syntax.

Scaffold(
 drawer: Drawer(
 child: 
)
);

• Add Children in Drawer : Now in child we will simply add a List , for learning ListView  visit our List in Flutter article. Check below code for adding items in Drawer. In the Code I’ve added Image also, which is explained in Basic Views in Flutter article.

drawer: Drawer(
 child: ListView(
   padding: EdgeInsets.zero,
   children: <Widget>[
     DrawerHeader(
       child: Container(
         width: double.infinity,
         height: 200.0,
         child: Center(
           child: Column(
             children: <Widget>[
               CircleAvatar(
                 backgroundImage: NetworkImage(
                   'https://www.rd.com/wp-content/uploads/2017/09/01-shutterstock_476340928-Irina-Bg.jpg',
                 ),
                 radius: 40.0,
               ),
             ],
           ),
         ),
       ),
       decoration: BoxDecoration(
           gradient: LinearGradient(
               begin: Alignment.topLeft,
               end: Alignment.topRight,
               colors: <Color>[Colors.red, Colors.blue])),
     ),
     ListTile(
       title: Text('Home'),
       onTap: () {},
     ),
     ListTile(
       title: Text('Profile'),
       onTap: () {},
     ),
     ListTile(
       title: Text('Setting'),
       onTap: () {},
     ),
     ListTile(
       title: Text('Logout'),
       onTap: () {},
     ),
   ],
 ),
)

Example

After completing all steps now it’s time to add all these things in a single code and run the code on the device. Below is the complete code for the drawer.
For AppBar visit our article.

import 'package:ebook_flutter/Pages/LoginPage.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
 final appTitle = 'Drawer Demo';

 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     title: appTitle,
     home: MyHomePage(title: appTitle),
   );
 }
}

class MyHomePage extends StatelessWidget {
 final String title;

 MyHomePage({Key key, this.title}) : super(key: key);

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       flexibleSpace: Container(
           decoration: BoxDecoration(
               gradient: LinearGradient(
                   begin: Alignment.topLeft,
                   end: Alignment.bottomRight,
                   colors: <Color>[Colors.red, Colors.blue]))),
       title: Text('Home'),
     ),
     drawer: Drawer(
       child: ListView(
         padding: EdgeInsets.zero,
         children: <Widget>[
           DrawerHeader(
             child: Container(
               width: double.infinity,
               height: 200.0,
               child: Center(
                 child: Column(
                   children: <Widget>[
                     CircleAvatar(
                       backgroundImage: NetworkImage(
                         'https://www.rd.com/wp-content/uploads/2017/09/01-shutterstock_476340928-Irina-Bg.jpg',
                       ),
                       radius: 40.0,
                     ),
                   ],
                 ),
               ),
             ),
             decoration: BoxDecoration(
                 gradient: LinearGradient(
                     begin: Alignment.topLeft,
                     end: Alignment.topRight,
                     colors: <Color>[Colors.red, Colors.blue])),
           ),
           ListTile(
             title: Text('Home'),
             onTap: () {},
           ),
           ListTile(
             title: Text('Profile'),
             onTap: () {},
           ),
           ListTile(
             title: Text('Setting'),
             onTap: () {},
           ),
           ListTile(
             title: Text('Logout'),
             onTap: () {},
           ),
         ],
       ),
     ),
     body: Center(child: Text('Drawer Example'),
     ),
   );
 }
}

Output

Below is the output of our work