How to add multilevel expandable menu in drawer

user_18222193 0
Viewed 535

I was trying to find a way to add sub-menus to this drawer and to collapse them on tap. Ie: I want to call this widget with a title and 3 subtitles like :

  • Flutter
    • List item
    • List item
    • List item

Any help would be appreciated. Thank you.

    class DrawerListTile extends StatelessWidget {
  const DrawerListTile({
    Key key, @required this.title,@required this.svgSrc,@required this.press,
  }) : super(key: key);

  final String title,svgSrc;
  final VoidCallback press;
  @override
  Widget build(BuildContext context) {
    return ListTile(
      onTap:press,
      horizontalTitleGap: 0.0,
      leading: SvgPicture.asset(
        svgSrc,
        color: Colors.black,
        height:16,
      ),
      title:Text(
        title,
        style: TextStyle(color: Colors.black),
      ),
      trailing: Icon(Icons.arrow_drop_down,size:15),
    );
  }
}
flutter
1 Answers

I think the ExpansionTile widget is what you're looking for. This would provide a tile that hides/shows the child tiles when it's tapped. You can also specify a custom trailing icon with the trailing parameter. Below is a quick example pulled from the docs.

Widget build(BuildContext context) {
    return ExpansionTile(
        title: Text('ExpansionTile'),
        subtitle: Text('Expanding tile subtitle'),
        children: <Widget>[
          ListTile(title: Text('This is tile number 1')),
          ListTile(title: Text('This is tile number 2')),
          ListTile(title: Text('This is tile number 3')),
          ListTile(title: Text('This is tile number 4')),
        ],
    );
}
user_183826930
Related