Flutter Navigation Drawer

This is an example code for implementing a Navigation Drawer in a Flutter application. The Navigation Drawer is a panel that slides in from the left side of the screen and displays the app's main navigation options. 

It can be triggered by tapping on an icon in the AppBar or by swiping from the left edge of the screen.

A Material Design panel that slides in horizontally from the edge of the screen to show navigation links in an application.

Code:

import 'package:flutter/material.dart';

// Press the Navigation Drawer button to the left of AppBar to show
// a simple Drawer with two items.
class NavDrawerDemo extends StatelessWidget {
  const NavDrawerDemo({super.key});

  @override
  Widget build(BuildContext context) {
    // Define the header of the drawer, which contains the user's name, email, and profile picture.
    const drawerHeader = UserAccountsDrawerHeader(
      accountName: Text(
        'User Name',
      ),
      accountEmail: Text(
        'boltuix@gmail.com',
      ),
      currentAccountPicture: CircleAvatar(
        child: FlutterLogo(size: 42.0),
      ),
    );

    // Define the items that will be displayed in the drawer. In this case, we have two items.
    final drawerItems = ListView(
      children: [
        drawerHeader,
        ListTile(
          title: const Text(
            'Page 1',
          ),
          leading: const Icon(Icons.favorite),
          onTap: () {
            // When the user taps on this item, close the drawer.
            Navigator.pop(context);
          },
        ),
        ListTile(
          title: const Text(
            'Page 2',
          ),
          leading: const Icon(Icons.comment),
          onTap: () {
            // When the user taps on this item, close the drawer.
            Navigator.pop(context);
          },
        ),
      ],
    );

    // Build the scaffold that will display the app's UI.
    return Scaffold(
      appBar: AppBar(
        // Define the title of the app bar.
        title: const Text(
          'Navigation Drawer',
        ),
      ),
      body: Semantics(
        container: true,
        child: const Center(
          child: Padding(
            padding: EdgeInsets.all(50.0),
            child: Text(
              'Swipe from the edge or tap the upper-left icon to see the drawer',
            ),
          ),
        ),
      ),
      // Add the drawer to the scaffold.
      drawer: Drawer(
        child: drawerItems,
      ),
    );
  }
}

..

The import 'package:flutter/material.dart'; statement is used to import the Flutter material library, which contains pre-built widgets and styles for building Flutter apps.

The NavDrawerDemo class is a stateless widget that represents the entire page with a navigation drawer.

The build method of the NavDrawerDemo widget is where the UI for the page is defined.

The drawerHeader variable is a UserAccountsDrawerHeader widget that displays the user's account information such as name, email and profile picture.

The drawerItems variable is a ListView widget that contains a list of ListTile widgets.

Each ListTile widget represents a single item in the navigation drawer. The title parameter is used to set the title of the item, while the leading parameter is used to set the icon that appears before the title.

The onTap callback function is executed when the user taps on the item. In this case, the Navigator.pop(context) function is called to close the drawer and return to the previous screen.

The Scaffold widget is used to define the overall structure of the page, which includes the app bar, body, and drawer.

The AppBar widget defines the app bar with a title of 'Navigation Drawer'.

The body parameter is used to set the content of the page. In this case, a Center widget is used to center the text, and a Padding widget is used to add padding around the text.

The drawer parameter is used to set the content of the navigation drawer. In this case, the drawerItems ListView is used as the content of the drawer.

Finally, the Navigator.pop(context) function is called when the user taps on an item in the drawer to close the drawer and return to the previous screen.

..