Drawer widget in the flutter

The drawer widget in flutter is used to make your application more simplified.

It provides you with an additional feature to directly navigate to the page in the application.

Usually, all children of the drawer are in ListView and perform an action after tapping on the child.

The drawer menu button is present in app bar on the application. You can directly navigate to your destination page directly from the drawer of the application.

It’s an invisible screen that opens from the side when tapping on the drawer button.

It’s a material library widget. That we used to create drawer in the application

Read more about Flutter app development services from mobikul.

Now let me show you some code snippets that can make it easier to implement the drawer widget.

main.dart for Drawer widget in flutter

Below code, the snippet is of main file its the starting of the app and just call the main drawer page.

import 'package:flutter/material.dart';
import 'drawerPage.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: DrawerPage(),
    );
  }
}

import 'package:flutter/material.dart';

import 'drawerPage.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: DrawerPage(),

);

}

drawerPage.dart

In this code snippet, we implement the code for the Drawer and check comments that explain what’s going in the code.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class DrawerPage extends StatefulWidget {
  @override
  _DrawerPageState createState() => _DrawerPageState();
}

class _DrawerPageState extends State<DrawerPage> {
  final divider = Divider(
    color: Colors.black,
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //App bar title
      appBar: AppBar(
        title: Text("Drawer Widget"),
      ),
      //Empty body with a empty container
      body: Container(),
      // Take Drawer widget
      drawer: Drawer(
        //ListView to listdown children of drawer
        child: ListView(
          padding: EdgeInsets.zero,
          children: [
            //Drawer header for Heading part of drawer
            const DrawerHeader(
              decoration: BoxDecoration(
                color: Colors.blue,
              ),
              //Title of header
       child: Text(
       'Welcome to Drawer !!',
        style: TextStyle(fontSize: 26, color: Colors.white),
            ),
            ),
            //Child tile of drawer with specified title
            ListTile(
              title: const Text('Home'),
              //To perform action on tapping at tile
              onTap: () {
                Navigator.pop(context);
              },
            ),
            divider,
            ListTile(
              title: const Text('Categories'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
            divider,
            ListTile(
              title: const Text('Review'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
            divider,
            ListTile(
              title: const Text('Products'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
            divider,
            ListTile(
              title: const Text('Feedback'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
            divider,
            ListTile(
              title: const Text('Add Product'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
            divider,
            ListTile(
              title: const Text('Kids'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
            divider,
            ListTile(
              title: const Text('Men'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
            divider,
            ListTile(
              title: const Text('Furniture'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
            divider,
            ListTile(
              title: const Text('Women'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
            divider,
            ListTile(
              title: const Text('Animals'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
            divider,
            ListTile(
              title: const Text('Toys'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
            divider,
            ListTile(
              title: const Text('Exit'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ),
    );
  }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

import 'package:flutter/cupertino.dart';

import 'package:flutter/material.dart';

class DrawerPage extends StatefulWidget {

@override

_DrawerPageState createState() => _DrawerPageState();

}

class _DrawerPageState extends State<DrawerPage> {

final divider = Divider(

color: Colors.black,

);

@override

Widget build(BuildContext context) {

return Scaffold(

//App bar title

appBar: AppBar(

title: Text("Drawer Widget"),

//Empty body with a empty container

body: Container(),

// Take Drawer widget

drawer: Drawer(

//ListView to listdown children of drawer

child: ListView(

padding: EdgeInsets.zero,

children: [

//Drawer header for Heading part of drawer

const DrawerHeader(

decoration: BoxDecoration(

color: Colors.blue,

//Title of header

child: Text(

'Welcome to Drawer !!',

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

//Child tile of drawer with specified title

ListTile(

title: const Text('Home'),

//To perform action on tapping at tile

onTap: () {

Navigator.pop(context);

divider,

ListTile(

title: const Text('Categories'),

onTap: () {

Navigator.pop(context);

divider,

ListTile(

title: const Text('Review'),

onTap: () {

Navigator.pop(context);

divider,

ListTile(

title: const Text('Products'),

onTap: () {

Navigator.pop(context);

divider,

ListTile(

title: const Text('Feedback'),

onTap: () {

Navigator.pop(context);

divider,

ListTile(

title: const Text('Add Product'),

onTap: () {

Navigator.pop(context);

divider,

ListTile(

title: const Text('Kids'),

onTap: () {

Navigator.pop(context);

divider,

ListTile(

title: const Text('Men'),

onTap: () {

Navigator.pop(context);

divider,

ListTile(

title: const Text('Furniture'),

onTap: () {

Navigator.pop(context);

divider,

ListTile(

title: const Text('Women'),

onTap: () {

Navigator.pop(context);

divider,

ListTile(

title: const Text('Animals'),

onTap: () {

Navigator.pop(context);

divider,

ListTile(

title: const Text('Toys'),

onTap: () {

Navigator.pop(context);

divider,

ListTile(

title: const Text('Exit'),

onTap: () {

Navigator.pop(context);

);

}

Images of Drawer widget in the flutter

I hope this blog will help you to learn about the Drawer widget and you will be able to implement it.

Happy Learning ✍️

For more blogs click here

Reference link

https://docs.flutter.dev/cookbook/design/drawer

drawer Navigation drawer

Deepak Kumar 27 April 2023

. . .

2 comments

Pooja Nov 1, 2022 at 5:04 pm

Thank you Deepak! for this beautiful and simple explaination.

Deepak Kumar (Moderator) Mar 20, 2023 at 10:41 am
Thanks for reading our blog. You can check out other flutter blogs here: https://mobikul.com/blog/

Reply

Drawer widget in the flutter

main.dart for Drawer widget in flutter

drawerPage.dart

Images of Drawer widget in the flutter

Reference link

Leave a Comment Cancel Reply

2 comments

Message Sent!