How to create drawer in flutter with example ?

Flutter itself provides various widgets to create the industry level standard layout. One of the feature of flutter is creating default drawer in flutter with Scaffold. Using the drawer we can show our application menus list and hide show in sidebar.

In this s tutorial i will create a simple Drawer widget using Scaffold and will add some menus to it.

Let’s start the tutorial of drawer in flutter

Step 1 : Create flutter project

Very first step is to create the fluter application using command line tool or in Android studio.

flutter create example_app

This will create a new project with name my_app then go in to the folder .

Step 2 : Create a widget for drawer

Although we can create drawer in the same widget without creating a separate widget for it but i recommend to create a separate widget since its going to use in every other page of our application so let’s create a widget.

File : lib/drawer.dart

import 'package:flutter/material.dart';

class DrawerWidget extends StatelessWidget {
  final BuildContext context;

  const DrawerWidget({Key? key, required this.context}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Drawer(
      // Add a ListView to the drawer. This ensures the user can scroll
      // through the options in the drawer if there isn't enough vertical
      // space to fit everything.
      child: ListView(
        // Important: Remove any padding from the ListView.
        padding: EdgeInsets.zero,
        children: [
          const DrawerHeader(
            decoration: BoxDecoration(
              color: Colors.blue,
            ),
            child: Text('Drawer Header'),
          ),
          ListTile(
            title: const Text('Home'),
            onTap: () {
              // Update the state of the app
              // ...
              // Then close the drawer
              Navigator.pop(context);
            },
          ),
          ListTile(
            title: const Text('Page 2'),
            onTap: () {
              // Update the state of the app
              // ...
              // Then close the drawer
              Navigator.pop(context);
            },
          ),
        ],
      ),
    );
  }
}

Here we added Drawer, DrawerHeader and ListTile widget to design the layout.

Step 3 : Add Drawer to main scaffold

Now add our new widget to scaffold thus in our main.dart file change as below

File : lib/main.dart

import 'package:example_app/drawer.dart';
import 'package:flutter/material.dart';

void main() {
  runApp( MyApp());
}

class MyApp extends StatelessWidget {

  final GlobalKey<ScaffoldState> _scaffoldKey =  GlobalKey<ScaffoldState>();

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(

      title: 'Flutter Demo',
      theme: ThemeData(

        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        key: _scaffoldKey,

        drawer: DrawerWidget(context:context),
          appBar: AppBar(title: const Text("Readerstack")),
          body:  Center(
            child: Row(
              children: [
                Text('This is drawer example'),
                TextButton(onPressed: (){
                  _scaffoldKey.currentState!.openDrawer();
                }, child: Text("Open Drawer"))
              ],
            ),
          ),

        )

    );
  }
}

Here we used Scaffold drawer

Scaffold(
  drawer: // Add a Drawer layout here.
);

and Drawer Material widget

Scaffold(
  drawer: Drawer(
    child: // add the layout for sidebar
  ),
);

How to open close drawer from button?

To open the drawer from any button as you can see we have used scaffold GlobalKey and then we used it in TextButton in home page to open the drawer programmatically.

 TextButton(onPressed: (){
                  _scaffoldKey.currentState!.openDrawer();
                }, child: Text("Open Drawer"))

Step 4: Run the project

Simply run the project using command line or in android studio to check the implementation.

flutter run lib/main.dart

Screenshot :

How to open close drawer from button?

Related

Related Posts