Flutter Android iOS Tutorial on Navigation drawer || Flutter || Navigation

[et_pb_section admin_label=”section”][et_pb_row admin_label=”row”][et_pb_column type=”4_4″][et_pb_text admin_label=”Text” background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

Flutter navigation drawer:

Navigation Drawer is a kind of menu which is quite common in apps, which makes the user understand the key features of the app much easier.

We also find a user profile in this menu which makes the user know his details with a profile pic in some cases.

So, today we deal with flutter navigation drawer in both Android as well as iOS using the flutter.

Please visit my previous tutorials on flutter for more info on this topic because you will understand this concept much better if you go through the previous blogs which deal with flutter basics.

Let’s start coding, the flutter navigation drawer with the basic components

Flutter Navigation Drawer

Main.dart

Import flutter package

'package:flutter/material.dart';

 

Declare a void main

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

 

Now create a class MyApp which extends StatelessWidget

 

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: "MyApp",
      home: Scaffold(
          appBar: AppBar(
            title: Text("MyApp"),
            backgroundColor: Colors.lightGreen,
          ),
         
          backgroundColor: Colors.white,

      ));
  }

 

Now add in body add  text view just to display a sample text

 

body: Center(
  child: Text("Navigation Drawer",
      style: TextStyle(
          color: Colors.deepOrange,
          fontSize: 25,
          fontStyle: FontStyle.italic)),
),

 

then add a navigation drawer

 

drawer: Drawer(
   )),

 

add a list view inside drawer

 

child: ListView(
)

 

padding for list

padding: EdgeInsets.only(),

 

add a drawer header

children: <Widget>[
  DrawerHeader(
   
  ),

 

a sample text where we display user information in further stages, which include background color for header, and text color, font size declaration.

 

DrawerHeader(
  child: Text(
    'Welcome Abhi',
    style: TextStyle(
      color: Colors.white,
      fontSize: 20,
    ),
    textAlign: TextAlign.right
  ),
  decoration: BoxDecoration(
    color: Colors.lightGreen,
  ),
  padding: EdgeInsets.all(20),
),

 

now here come’s the key module that is adding a row to list view

we declare name of the tile with the properties like font size, color etc.,

 

ListTile(
  title: Text('Home',
      style: TextStyle(
        color: Colors.black,
        fontSize: 18,
      )),
  contentPadding: EdgeInsets.fromLTRB(20, 5, 0, 5),
),

 

and we need a click functionality for which we  have a method called   —  tap()

onTap: () {
},

 

 

like wise add few more fields depending on your requirement you can also specify the sections in the list view to further categorize.

 

Full code:

Providing the full source code for flutter navigation drawer implementation.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: "MyApp",
      home: Scaffold(
          appBar: AppBar(
            title: Text("MyApp"),
            backgroundColor: Colors.lightGreen,
          ),
          body: Center(
            child: Text("Navigation Drawer",
                style: TextStyle(
                  color: Colors.deepOrange,
                  fontSize: 25,
                  fontStyle: FontStyle.italic
                )),
          ),
          backgroundColor: Colors.white,
          drawer: Drawer(

            child: ListView(
              padding: EdgeInsets.only(),

              children: <Widget>[
                DrawerHeader(
                  child: Text(
                    'Welcome Abhi',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 20,
                    ),
                    textAlign: TextAlign.right
                  ),
                  decoration: BoxDecoration(
                    color: Colors.lightGreen,
                  ),
                  padding: EdgeInsets.all(20),
                ),
                ListTile(
                  title: Text('Home',
                      style: TextStyle(
                        color: Colors.black,
                        fontSize: 18,
                      )),
                  contentPadding: EdgeInsets.fromLTRB(20, 5, 0, 5),
                  onTap: () {
                  
                  },
                ),
                ListTile(
                  title: Text('Profile',
                      style: TextStyle(
                        color: Colors.black,
                        fontSize: 18,
                      )),
                  contentPadding: EdgeInsets.fromLTRB(20, 5, 0, 5),
                  onTap: () {
                    
                  },
                ),
                ListTile(
                  title: Text('Settings',
                      style: TextStyle(
                        color: Colors.black,
                        fontSize: 18,
                      )),
                  contentPadding: EdgeInsets.fromLTRB(20, 5, 0, 5),
                  onTap: () {
                    
                  },
                ),
                ListTile(
                  title: Text('Logout',
                  style: TextStyle(
                    color: Colors.black,
                        fontSize: 18
                  ),),
                  contentPadding: EdgeInsets.fromLTRB(20, 5, 0, 5),
                  onTap: () {
                   
                  },
                )
              ],
            ),
          )),
    );
  }
  
}

 

 

 

[/et_pb_text][et_pb_text admin_label=”Text” background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

Output:

This screen depicts flutter navigation drawer implementation in flutter app.

If you have any queries in this tutorial on flutter navigation drawer do let us know in comment section below also do like share this tutorial for more interesting updates.

[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]