Flutter – Grouping Navigation Drawer Menu Items

Grouping navigation drawer menu items involves organizing the items into sections or categories. This makes it easier for users to navigate through the app and find the options that the user wants. Grouping Drawer Menu Items, In Flutter, we can group navigation drawer menu items using the ExpansionTile widget and ListTile Widget. In this article, we are going to Group Navigation Drawer Menu Items Using ExpansionTile and List Tile Widgets in Flutter. A sample video is given below to get an idea about what we are going to do in this article.

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: Import the Package

First of all import material.dart file.

import 'package:flutter/material.dart';

Step 3: Execute the main Method

Here the execution of our app starts.

Dart

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

Step 4: Create MyApp Class

In this class we are going to implement the MaterialApp and the Scaffold , here we are also set the Theme of our App.

Dart

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.green, // Set the app's primary theme color
      ),
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

Step 5: Create HomePage Class

In this class we are going to create a Navigration Drawer and it contains a method named as buildGroupedDrawer which is responsible for build the grouped Navigation drawer, Comments are added for better Understanding.

// Function to build the grouped drawer
Widget buildGroupedDrawer(BuildContext context) {
    return Drawer(
      child: ListView(
        padding: EdgeInsets.zero,
        children: <Widget>[
          // Drawer header
          DrawerHeader(
            decoration: BoxDecoration(
              color: Colors.green,
            ),
            child: Text(
              'Grouped Items Nabigation Drawer',
              style: TextStyle(
                color: Colors.white,
                fontSize: 24,
              ),
            ),
          ),
          // First group with ExpansionTile
          ExpansionTile(
            title: Text('Group 1'),
            children: <Widget>[
              ListTile(
                title: Text('Element 1.1'),
                onTap: () {
                  Navigator.pop(context);
                },
              ),
              ListTile(
                title: Text('Element 1.2'),
                onTap: () {
                  Navigator.pop(context);
                },
              ),
              ListTile(
                title: Text('Element 1.3'),
                onTap: () {
                  Navigator.pop(context);
                },
              ),
              ListTile(
                title: Text('Element 1.4'),
                onTap: () {
                  Navigator.pop(context);
                },
              ),
            ],
          ),
          // Second group with ExpansionTile
          ExpansionTile(
            title: Text('Group 2'),
            children: <Widget>[
              ListTile(
                title: Text('Element 2.1'),
                onTap: () {
                  Navigator.pop(context);
                },
              ),
              ListTile(
                title: Text('Element 2.2'),
                onTap: () {
                  Navigator.pop(context);
                },
              ),
              ListTile(
                title: Text('Element 2.3'),
                onTap: () {
                  Navigator.pop(context);
                },
              ),
              ListTile(
                title: Text('Element 2.4'),
                onTap: () {
                  Navigator.pop(context);
                },
              ),
            ],
          ),
        ],
      ),
    );
  }

Dart

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Grouped Drawer Example'),
      ),
      drawer: buildGroupedDrawer(context),
      body: Center(
        child: Text('Grouped Items Nabigation Drawer'),
      ),
    );
  }

  // Function to build the grouped drawer
  Widget buildGroupedDrawer(BuildContext context) {
    return Drawer(
      child: ListView(
        padding: EdgeInsets.zero,
        children: <Widget>[
          // Drawer header
          DrawerHeader(
            decoration: BoxDecoration(
              color: Colors.green,
            ),
            child: Text(
              'Grouped Items Nabigation Drawer',
              style: TextStyle(
                color: Colors.white,
                fontSize: 24,
              ),
            ),
          ),
          // First group with ExpansionTile
          ExpansionTile(
            title: Text('Group 1'),
            children: <Widget>[
              ListTile(
                title: Text('Element 1.1'),
                onTap: () {
                  Navigator.pop(context);
                },
              ),
              ListTile(
                title: Text('Element 1.2'),
                onTap: () {
                  Navigator.pop(context);
                },
              ),
              ListTile(
                title: Text('Element 1.3'),
                onTap: () {
                  Navigator.pop(context);
                },
              ),
              ListTile(
                title: Text('Element 1.4'),
                onTap: () {
                  Navigator.pop(context);
                },
              ),
            ],
          ),
          // Second group with ExpansionTile
          ExpansionTile(
            title: Text('Group 2'),
            children: <Widget>[
              ListTile(
                title: Text('Element 2.1'),
                onTap: () {
                  Navigator.pop(context);
                },
              ),
              ListTile(
                title: Text('Element 2.2'),
                onTap: () {
                  Navigator.pop(context);
                },
              ),
              ListTile(
                title: Text('Element 2.3'),
                onTap: () {
                  Navigator.pop(context);
                },
              ),
              ListTile(
                title: Text('Element 2.4'),
                onTap: () {
                  Navigator.pop(context);
                },
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Here is the full Code of main.dart file

Dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.green, // Set the app's primary theme color
      ),
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Grouped Drawer Example'),
      ),
      drawer: buildGroupedDrawer(context),
      body: Center(
        child: Text('Grouped Items Nabigation Drawer'),
      ),
    );
  }

  // Function to build the grouped drawer
  Widget buildGroupedDrawer(BuildContext context) {
    return Drawer(
      child: ListView(
        padding: EdgeInsets.zero,
        children: <Widget>[
          // Drawer header
          DrawerHeader(
            decoration: BoxDecoration(
              color: Colors.green,
            ),
            child: Text(
              'Grouped Items Nabigation Drawer',
              style: TextStyle(
                color: Colors.white,
                fontSize: 24,
              ),
            ),
          ),
          // First group with ExpansionTile
          ExpansionTile(
            title: Text('Group 1'),
            children: <Widget>[
              ListTile(
                title: Text('Element 1.1'),
                onTap: () {
                  Navigator.pop(context);
                },
              ),
              ListTile(
                title: Text('Element 1.2'),
                onTap: () {
                  Navigator.pop(context);
                },
              ),
              ListTile(
                title: Text('Element 1.3'),
                onTap: () {
                  Navigator.pop(context);
                },
              ),
              ListTile(
                title: Text('Element 1.4'),
                onTap: () {
                  Navigator.pop(context);
                },
              ),
            ],
          ),
          // Second group with ExpansionTile
          ExpansionTile(
            title: Text('Group 2'),
            children: <Widget>[
              ListTile(
                title: Text('Element 2.1'),
                onTap: () {
                  Navigator.pop(context);
                },
              ),
              ListTile(
                title: Text('Element 2.2'),
                onTap: () {
                  Navigator.pop(context);
                },
              ),
              ListTile(
                title: Text('Element 2.3'),
                onTap: () {
                  Navigator.pop(context);
                },
              ),
              ListTile(
                title: Text('Element 2.4'),
                onTap: () {
                  Navigator.pop(context);
                },
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Output: