How to Create a Navigation Drawer in Flutter

Last updated Nov 02, 2021


What is Drawer in Flutter? It is a material design panel that slides horizontally from the edge of a Scaffold to show navigation links in an application. so, In this tutorial we will see how you can get simple drawer in your Flutter Application.

 

Let's Start

Step 1: Create a new Application.

Step 2: The Scaffold widget supports special Material Design components, such as Drawers, AppBars, and SnackBars. so you can add drawer in your scaffold, for example 

Scaffold(
  drawer: // Add a Drawer here in the next step.
);

 

Step 3: A Drawer can be any widget, but it’s often best to use the Drawer widget from the material library, for example 

Scaffold(
  drawer: Drawer(
    child: // Can be any Widget.
  ),
);

 

Step 4: Now you can use any widget as a child of drawer, but the most common widget that is used is a ListView in Flutter. Inside ListView you can use widgets as DrawerHeader and ListTile,  for example 

Drawer(
  child: ListView(
    padding: EdgeInsets.zero,
    children: [
      const DrawerHeader(
        decoration: BoxDecoration(
          color: Colors.blue,
        ),
        child: Text('Drawer Header'),
      ),
      ListTile(
        title: const Text('Item 1'),
        onTap: () {},
      ),
    ],
  ),
);

using these will complete our simple drawer in Flutter.

 

Complete example code to Create Navigation Drawer in Flutter

import 'package:flutter/material.dart';

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


class MyApp extends StatelessWidget {

  const MyApp({Key? key}) : super(key: key);

  static const appTitle = 'Drawer Demo';

  @override

  Widget build(BuildContext context) {

    return const MaterialApp(

      title: appTitle,

      home: MyHomePage(title: appTitle),

    );

  }

}


class MyHomePage extends StatelessWidget {

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


  final String title;


  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(title: Text(title)),

      body: const Center(

        child: Text('My Page!'),

      ),

      drawer: Drawer(

        child: ListView(

          padding: EdgeInsets.zero,

          children: [

            const DrawerHeader(

              decoration: BoxDecoration(

                color: Colors.deepOrange,

              ),

              child: Text(

                'Drawer Header',

                style: TextStyle(color: Colors.white, fontSize: 20),

              ),

            ),

            ListTile(

              title: const Text('Home'),

              onTap: () {

                Navigator.pop(context);

              },

            ),

            ListTile(

              title: const Text('Profile'),

              onTap: () {

                Navigator.pop(context);

              },),

            ListTile(

              title: const Text('Setting'),

              onTap: () {

                Navigator.pop(context);

              },

              leading: Icon(Icons.settings),

            ),

          ],

        ),

      ),

    );

  }

}

 

 

How do i create Navigation Drawer layout in flutter

 

Video Example

 

Conclusion: In this way, we have covered how you can create a simple navigation drawer in Flutter.

 

 


Article Contributed By :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

40 Views

Subscribe For Daily Updates

Flutter Questions
Android Questions