Flutter Expandable Drawer Menu Using ExpansionTile

In this tutorial, we will learn how to expand drawer menu using ExpansionTile in flutter. in the earlier tutorial we used ExpansionTile to show content in the body.

Now we we will use ExpansionTile in the drawer menu. ExpansionTile children property can take as many children as possible.

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
                    ],
                  ),

In the children list we have used two ListTile() to put as children. So there would be two navigation item for the parent category.

You may put as many ExpansionTile in a Column() widget and those ExpansionTiles would be shown in the drawer menu as parents

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()
    );
  }
}

We also used a global key inside Scaffold, otherwise you will get error. If you see the video, you will see how ExpansionTile() works as parents and ListTile() works as children inside ExpansionTile. You may not have to use ExpansionTile() and ListTile() to make this drawer expandable.

You may use any other suitable widgets.

In the body section, we just put an empty Container() widget.