How to add Navigation Drawer in Flutter

The Scaffold Widget provides components to follow material design guidelines in flutter apps. This widget provides drawer attribute to use Navigation Drawer in flutter.

We need to pass Drawer widget in this attribute. You can also check out sample at HERE.

 
 

Create Widgets To Display Behind Navigation Drawer

First we need to create widgets which are displayed on the click of navigation drawer tab. There are four tabs in navigation drawer: News, Profile, Messages, More. So we create layout using widget for every tab. 

 
 

News Screen

import ‘package:flutter/material.dart’;

class News extends StatelessWidget{

      @override
       Widget build(BuildContext context) {
             // TODO: implement build
             return Center(
             child: Text(“News”,style: TextStyle(fontWeight: FontWeight.bold, fontSize: 22))
              );
        }

}

 
 

Profile Screen

import ‘package:flutter/material.dart’;

class Profile extends StatelessWidget{

    @override
     Widget build(BuildContext context) {
           // TODO: implement build
           return Center(
           child: Text(“Profile”,style: TextStyle(fontWeight: FontWeight.bold, fontSize: 22))
            );
      }

}

 
 

Messages Screen

import ‘package:flutter/cupertino.dart’;

class Messages extends StatelessWidget{

      @override
       Widget build(BuildContext context) {
             // TODO: implement build
             return Center(
             child: Text(“Messages”,style: TextStyle(fontWeight: FontWeight.bold, fontSize: 22),),
             );
         }

}

 
 

More Screen

import ‘package:flutter/material.dart’;

class More extends StatelessWidget{

     @override
     Widget build(BuildContext context) {
           // TODO: implement build
           return Center(
               child: Text(“More”,style: TextStyle(fontWeight: FontWeight.bold, fontSize: 22),),
           );
      }

}

 

Set Navigation Drawer

UserAccountsDrawerHeader widget provides different attributes to display user information. In currentAccountPicture attribute, We can add user profile picture. In attribute, We can display user account name and in accountEmail attribute, We can display user account email.

Now we can use ListView widget to display drawer tabs rows. Here we must pass already created widgets for News Screen, Profile Screen, Messages Screen, More Screen to the ListView Widget. ListTile widget provides leading attribute for icon and title attribute to display title.

It also provides onTap callback to detect click on that row. In the onTap method, we get selected tab position among all tabs. So we change position of display widget from ListView Widget.

 
import 'package:flutter/material.dart';
import 'messages.dart';
import 'more.dart';
import 'news.dart';
import 'profile.dart';

class Home extends StatefulWidget{

  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return HomeState();
  }

}

class HomeState extends State<Home>{

  int selectedIndex = 0;
  List<Widget> listWidgets = [News(),Profile(),Messages(),More()];
  List<IconData> listIcons = [Icons.rss_feed,Icons.supervised_user_circle,Icons.message,Icons.more];
  List<String> listTitles = ['News','Profile','Messages','More'];

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text(listTitles[selectedIndex],style: TextStyle()),
      ),
      body: listWidgets[selectedIndex],
      drawer: Drawer(
        child: Column(
          children: <Widget>[
            UserAccountsDrawerHeader(
              currentAccountPicture: CircleAvatar(backgroundColor: Colors.amber),
              accountName: Text('CodingWithDhrumil'),
              accountEmail: Text('abc@gmail.com'),
            ),
            ListView.builder(
              scrollDirection: Axis.vertical,
              shrinkWrap: true,
              padding: EdgeInsets.only(top:0),
              itemCount: listWidgets.length,
              itemBuilder: (context,position){
                return(
                 ListTile(leading: Icon(listIcons[position]), title: Text(listTitles[position]),onTap:(){
                   setState((){
                      selectedIndex = position;
                   });
                   Navigator.of(context).pop();
                 },)
                );
              },
            )
          ],
        ),
      ),
    );
  }

}
 
 

Integrate in main.dart file

 
import 'package:flutter/material.dart';

import 'home.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Home(),
    );
  }
}
 
 
 
 

navigation drawer



 

Leave a Reply