Drawer Menu - Submenu on Side

Question

i try to find a solution for the flutter drawer menu. i implement the normal drawer and the menu looks find. now i want to draw a submenu for many items.

i found this Flutter how to add a Expandable menu item inside navigation drawer? but this is not what i want. this show the subitems under the header item. i want a solution to click on the headitem and a new page slide in the drawer with a new list of subitems and the headelement is in top to go back to the mainmenu. here is a example what i mean.

i hope anyone can help.

Answer 1

You can use a nested Navigator inside the Drawer widget and control the menu navigation with a Key.

See the example on DartPad: https://dartpad.dev/?id=250b450f0c59b1cda6add362e7d6f7c4

import 'dart:math';

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Drawer with Navigator',
      debugShowCheckedModeBanner: false,
      home: MainScreen(),
    );
  }
}

final _navigatorKey = GlobalKey();

class MainScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('My page'),
      ),
      drawer: Drawer(
        child: Navigator(
          key: _navigatorKey, // Sets the navigator key
          initialRoute: '/',
          onGenerateRoute: (routeSettings) {
            if (routeSettings.name == '/') {
              // Render initial drawer content
              return MaterialPageRoute(
                builder: (context) => ListView(
                  children: [
                    const UserAccountsDrawerHeader(
                      accountEmail: Text("[email protected]"),
                      accountName: Text("John Doe"),
                      currentAccountPicture: CircleAvatar(
                        child: Text("JD"),
                      ),
                    ),
                    for (var i = 0; i < 3; i++)
                      SubMenuItem(path: '${i + 1}'),
                  ],
                ),
              );
            }
            return null;
          },
        ),
      ),
      body: const Center(child: Text('Main page content')),
    );
  }
}

class SubMenu extends StatelessWidget {
  final String path;

  const SubMenu({super.key, required this.path});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Menu $path')),
      body: ListView(
        children: [
          for (var i = 0; i <= Random().nextInt(5); i++)
            SubMenuItem(path: '$path.${i + 1}'),
        ],
      ),
    );
  }
}

class SubMenuItem extends StatelessWidget {
  final String path;

  const SubMenuItem({super.key, required this.path});

  @override
  Widget build(BuildContext context) {
    return ListTile(
      title: Text('Go to menu $path'),
      trailing: const Icon(Icons.keyboard_arrow_right),
      onTap: () {
        // Pushing a page in the nested navigation
        Navigator.of(_navigatorKey.currentContext!).push(
          MaterialPageRoute(
            builder: (context) => SubMenu(path: path),
          ),
        );
      },
    );
  }
}