How to Add Expandable Navigation Menu on Drawer in Flutter

In this example, we are going to show you how to add expandable navigation menu items inside the drawer using ExpansionTile in Flutter. Expandable menus are best to categorize the sub-menus inside the parent menu so that users will feel easy to find what they are searching for. 

How to Add Expandable Navigation Menu Items inside Drawer:

Drawer(
  child: SafeArea( 
    child:Column(
        children: [
            ExpansionTile(
            title: Text("Parent Category 1"),
            leading: Icon(Icons.person), //add icon
            childrenPadding: EdgeInsets.only(left:60), //children padding
            children: [
                  ListTile( 
                      title: Text("Child Category 1"),
                      onTap: (){ 
                        //action on press
                      },
                  ),

                  ListTile( 
                      title: Text("Child Category 2"),
                      onTap: (){ 
                        //action on press
                      },
                  ),

                  //more child menu
            ],
            ),


            ExpansionTile(
            title: Text("Parent Category 2"),
            leading: Icon(Icons.person), //add icon
            childrenPadding: EdgeInsets.only(left:60), //children padding
            children: [
                  ListTile( 
                      title: Text("Child Category 1"),
                      onTap: (){ 
                        //action on press
                      },
                  ),

                  ListTile( 
                      title: Text("Child Category 2"),
                      onTap: (){ 
                        //action on press
                      },
                  ),

                  //more child menu
            ],
            )
      ],
    )
  ),
)

You can use ExpansionTile to add expandable menu items like the above code:

Full App Example:

import 'package:flutter/material.dart';

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

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

class Home extends StatefulWidget{
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {  

  final scaffoldKey = GlobalKey<ScaffoldState>();
  //key for scaffold, required to manually open/close drawer

  @override
  Widget build(BuildContext context) { 
    return  Scaffold(
          key: scaffoldKey,
          appBar: AppBar(
            title: Text("Expansion Menu in Flutter"),
          ),
          drawer: Drawer(
              child: SafeArea( 
                child:Column(
                    children: [
                       ExpansionTile(
                        title: Text("Parent Category 1"),
                        leading: Icon(Icons.person), //add icon
                        childrenPadding: EdgeInsets.only(left:60), //children padding
                        children: [
                             ListTile( 
                                 title: Text("Child Category 1"),
                                 onTap: (){ 
                                    //action on press
                                 },
                             ),

                             ListTile( 
                                 title: Text("Child Category 2"),
                                 onTap: (){ 
                                    //action on press
                                 },
                             ),

                             //more child menu
                        ],
                       ),


                       ExpansionTile(
                        title: Text("Parent Category 2"),
                        leading: Icon(Icons.person), //add icon
                        childrenPadding: EdgeInsets.only(left:60), //children padding
                        children: [
                             ListTile( 
                                 title: Text("Child Category 1"),
                                 onTap: (){ 
                                    //action on press
                                 },
                             ),

                             ListTile( 
                                 title: Text("Child Category 2"),
                                 onTap: (){ 
                                    //action on press
                                 },
                             ),

                             //more child menu
                        ],
                       )
                  ],
                )
              ),
          ),
          
          body: Container()
       );
  }
}

Output Screenshot:

In this way, you can add expandable navigation menu items inside a drawer in the Flutter app.