Flutter - Open Drawer Programmatically

In this article, we will see how to open the drawer Programmatically using the Scaffold.of(context).openDrawer(). A sample video is given below to get an idea about what we will do in this article.

How to Use?

 Builder(
          builder: (context) => // Ensure Scaffold is in context
                MaterialButton(
                    child: Text('Open Drawer '),
                    onPressed: () => Scaffold.of(context).openDrawer()),
          ),
        ),

Step By Step Implementation

Step 1: Create a New Project in Android Studio

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.

Step 2: Add the Material package that gives us the important method to use and call the runApp method in the main function that will call our application.

import 'package:flutter/material.dart';

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

Step 3: Now we have to make a Stateful widget RunMyApp Because our application does change its state and then return the MaterialApp widget which allows us the set the title and theme and has many more properties. Also, create the TextEditingController.

class RunMyApp extends StatefulWidget {
const RunMyApp({super.key});
@override
State<RunMyApp> createState() => _RunMyAppState();
}
class _RunMyAppState extends State<RunMyApp> {
final TextEditingController _controller = new TextEditingController();
@override
Widget build(BuildContext context) {
 return MaterialApp(
   debugShowCheckedModeBanner: false,
   theme: ThemeData(primarySwatch: Colors.green),
   home: Scaffold(),
 );
}
}

Step 4: Now in the Scaffold use the drawer Property to include the drawer in the app. And then create a Button in the center of the app. In onpressed property call the openDrawer() method with the help of the Scaffold.of().

 drawer: Drawer(),
        appBar: AppBar(
          title: Text("Open Drawer Programmatically"),
        ),
        body: Center(
          child: Builder(
            builder: (context) => // Ensure Scaffold is in context
                MaterialButton(
                    child: Text('Open Drawer '),
                    onPressed: () => Scaffold.of(context).openDrawer()),
          ),
        ),
      ),

Complete Code

import 'package:flutter/material.dart';

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

class RunMyApp extends StatelessWidget {
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(primarySwatch: Colors.green),
      home: Scaffold(
        // this to prevent the default sliding behaviour
        drawerEnableOpenDragGesture: false,
        drawer: Drawer(),
        appBar: AppBar(
          title: Text("Open Drawer Programmatically"),
        ),
        body: Center(
          child: Builder(
            builder: (context) => // Ensure Scaffold is in context
                MaterialButton(
                    child: Text('Open Drawer '),
                    onPressed: () => Scaffold.of(context).openDrawer()),
          ),
        ),
      ),
    );
  }
}

Output:

Code Explanation:

• The main() method is the entry point or principle method of the application, which runs the RunMyApp widget.
• The RunMyApp widget is a stateless widget that returns a MaterialApp widget.
• The debugShowCheckedModeBanner property of the MaterialApp widget is set to false, which hides the debug banner in the top right corner of the screen.
• The theme property of the MaterialApp widget is set to a ThemeData object with a primarySwatch of green, which sets the default color scheme of the application to green.
• The home property of the MaterialApp widget is set to a Scaffold widget.
• The drawerEnableOpenDragGesture property of the Scaffold widget is set to false, which prevents the default sliding behavior of the drawer when the user swipes from the left edge of the screen.
• The drawer property of the Scaffold widget is set to a Drawer widget, which is the widget that slides in from the left when the user taps the hamburger icon in the AppBar or swipes from the left edge of the screen.
• The appBar property of the Scaffold widget is set to an AppBar widget with the title of "Open Drawer Programmatically".
• The body property of the Scaffold widget is set to a Center widget with a child MaterialButton widget.
• The MaterialButton widget has a child Text widget with the label "Open Drawer", and an onPressed callback that opens the drawer programmatically using the openDrawer() method of the Scaffold widget.