How do you add Flutter Drawer

In this flutter article, we are going to learn how to integrate flutter drawer in apps. This widget provides drawer attribute to use navigation Drawer in flutter. You can also check out flutter navigation related articles.

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

Create Widgets To Display Behind Flutter 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 Flutter 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 Flutter Drawer Screen 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(),
    );
  }
}