what is drawer in flutter

In Flutter, a Drawer is a sliding panel that typically contains a list of items. It is used for navigation within an app. The Drawer slides in from the side of the screen and can be opened by swiping from the left edge of the screen or by tapping the menu icon in the AppBar.

Example of Using a Drawer :-

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: <Widget>[
            DrawerHeader(
              child: Text(
                'Drawer Header',
                style: TextStyle(color: Colors.white, fontSize: 24),
              ),
              decoration: BoxDecoration(
                color: Colors.blue,
              ),
            ),
            ListTile(
              leading: Icon(Icons.home),
              title: Text('Home'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
            ListTile(
              leading: Icon(Icons.person),
              title: Text('Profile'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
            ListTile(
              leading: Icon(Icons.settings),
              title: Text('Settings'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ),
      body: Center(
        child: Text('Hello, world!'),
      ),
    );
  }
}

Key Components of a Drawer

Key Components of a Drawer

• Drawer: The main widget that represents the drawer.

• DrawerHeader: A header widget that can be placed at the top of the drawer.
• ListView: A scrollable list of items inside the drawer.
• ListTile: A widget that represents a single item in the list. It can have an icon, title, and an onTap callback.

Example Explained

• AppBar: Contains a title and optionally a menu icon to open the drawer.
• Drawer: Contains a ListView that holds a DrawerHeader and several ListTile widgets.
• DrawerHeader: Displays a header at the top of the drawer.
• ListTile: Represents individual items in the drawer. Each ListTile can have an icon, title, and an onTap event that can be used to handle navigation or other actions.