Click through menu with sub-menu children

Question

So I'm not sure if this design has a proper name, so It's hard to know what to look for.

With touch screen interfaces sometimes you get a grid of tiles that are options and you can click one and it will show some new tile options like you're searching for a product and narrowing down the category.

You might start with a tile grid of countries, for the sack of my sanity ill just use letters.

| A | B | C | D |

| E | F | G | H |

| I | J | K | L |

..(Scroll for more )..

Then you click a tile and it will load that tiles children like in a map struct, so you could show a tile grid of cities within the chosen country. They choose a country and you show its children such as street names etc ...

Hopefully you get the picture, I'm trying to achieve this on an app I'm building in flutter, I'm not sure if a library or element out there already exists to do this alternatively if anyone has a suggestion on the most efficient way to build this id appreciate it.

My intent was to loop through a variable holding my map at the root and display tiles using Gridview, then when a tile is clicked set that as the variable root and re-render now showing its children. Continuing like this but I'm not sure its the most efficient.

Grid of tiles generated from a map, updating the map to its child when its clicked.

Answer 1

try out this package https://pub.dev/packages/multilevel_drawer

here is an example from it

 child: Scaffold(
        drawer: MultiLevelDrawer(
          backgroundColor: Colors.white,
          rippleColor: Colors.white,
          subMenuBackgroundColor: Colors.grey.shade100,
          header: Container(                  // Header for Drawer
            height: size.height * 0.25,
            child: Center(child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Image.asset("assets/dp_default.png",width: 100,height: 100,),
                SizedBox(height: 10,),
                Text("RetroPortal Studio")
              ],
            )),
          ),

          children: [           // Child Elements for Each Drawer Item
            MLMenuItem(
                leading: Icon(Icons.person),
                trailing: Icon(Icons.arrow_right),
                content: Text(
                  "My Profile",
                ),
                subMenuItems: [
                  MLSubmenu(onClick: () {}, submenuContent: Text("Option 1")),
                  MLSubmenu(onClick: () {}, submenuContent: Text("Option 2")),
                  MLSubmenu(onClick: () {}, submenuContent: Text("Option 3")),
                ],
                onClick: () {}),
            MLMenuItem(
                leading: Icon(Icons.settings),
                trailing: Icon(Icons.arrow_right),
                content: Text("Settings"),
                onClick: () {},
                subMenuItems: [
                  MLSubmenu(onClick: () {}, submenuContent: Text("Option 1")),
                  MLSubmenu(onClick: () {}, submenuContent: Text("Option 2"))
                ]),
            MLMenuItem(
              leading: Icon(Icons.notifications),
              content: Text("Notifications"),
              onClick: () {},
            ),
            MLMenuItem(
                leading: Icon(Icons.payment),
                trailing: Icon(Icons.arrow_right),
                content: Text(
                  "Payments",
                ),
                subMenuItems: [
                  MLSubmenu(onClick: () {}, submenuContent: Text("Option 1")),
                  MLSubmenu(onClick: () {}, submenuContent: Text("Option 2")),
                  MLSubmenu(onClick: () {}, submenuContent: Text("Option 3")),
                  MLSubmenu(onClick: () {}, submenuContent: Text("Option 4")),
                ],
                onClick: () {}),
          ],
        ),
        appBar: AppBar(
          backgroundColor: Colors.white,
          iconTheme: IconThemeData(color: Colors.black),
          title: Text(
            "Multi Level Menu",
            style: TextStyle(color: Colors.black),
          ),
        ),
        body: Container(
            decoration: BoxDecoration(
              gradient:
              LinearGradient(begin: Alignment.topCenter, end: Alignment.bottomCenter, colors: [
                Color.fromRGBO(255, 65, 108, 1.0),
                Color.fromRGBO(255, 75, 43, 1.0),
              ]),
            ),
            child: Center()),
      ),