Drawer in Flutter

Drawers are slide-in menus typically used in apps to provide navigation options and settings. Often used in conjunction with the Scaffold widget. This is a simple example of how to implement a drawer in Flutter.

There Are Some Common Attributes for Drawer

Here's a simple example of using a Drawer in Flutter:

File open lib->main.dart file −

import 'package:flutter/material.dart';

void main() {
  runApp(
    MyApp()
  );
}
class MyApp extends StatefulWidget{

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return   MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.blue,
          title: Text('Drawer Example',
              style:TextStyle(fontSize: 20,color: Colors.white)),

        ),
          drawer: MyDrawer(),
        body: Center(child: Text("Micro Tutorial Drawer"),)
          
    ));

  }


}
class MyDrawer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        padding: EdgeInsets.zero,
        children: [
          DrawerHeader(
            decoration: BoxDecoration(
              color: Colors.lightBlueAccent,
            ),
            child: Column(
              
              children: [
                Text(
                  'Drawer Header',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 24,
                  ),
                ),
              ],
            ),
          ),
          ListTile(
            leading: Icon(Icons.account_tree_rounded),
            title: Text('Flutter'),
            onTap: () {
              Navigator.pop(context); }
          ),
          ListTile(
            leading: Icon(Icons.account_tree_rounded),
            title: Text('Java'),
            onTap: () {
              Navigator.pop(context);
            },
          ),
          ListTile(
            leading: Icon(Icons.account_tree_rounded),
            title: Text('Kotlin'),
            onTap: () {
              Navigator.pop(context);
            },
          ),
        ],
      ),
    );
  }
}

Open Device Manager, run the emulator, and then run the application. Next, check the working output and check the output you declared in your code.

Output: