Flutter dropdown menu with ListTiles and row of Buttons

Question

I'm trying to build out a custom dropdown menu that looks like this:

I've managed to implement the ListTiles and Row of Buttons without the dropdown, but I'm not sure how to nest all of that within a dropdown menu class. This is what I've got so far:

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: Drawer(),
      body: SizedBox.expand(
        child: SingleChildScrollView(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              ListTile(
                onTap: () {},
                leading: CircleAvatar(backgroundColor: Colors.primaries[0]),
                title: Text('All Circles'),
              ),
              Divider(color: Colors.grey.shade400, indent: 72.0, height: 1.0),
              ListTile(
                onTap: () {},
                leading: CircleAvatar(backgroundColor: Colors.primaries[1]),
                title: Text('Pickup'),
              ),
              Divider(color: Colors.grey.shade400, indent: 72.0, height: 1.0),
              ListTile(
                onTap: () {},
                leading: CircleAvatar(backgroundColor: Colors.primaries[2]),
                title: Text('Kappa Delta'),
              ),
              Divider(color: Colors.grey.shade400, indent: 72.0, height: 1.0),
              ListTile(
                onTap: () {},
                leading: CircleAvatar(backgroundColor: Colors.primaries[3]),
                title: Text('Ok Boomer'),
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  RaisedButton(
                    child: Text("Join a Circle"),
                    color: Color(0xffb74093),
                    shape: RoundedRectangleBorder(
                      borderRadius: new BorderRadius.circular(18.0),
                      side: BorderSide(color: Colors.red),
                    ),
                  ),
                  RaisedButton(
                    child: Text("Create a Circle"),
                    color: Colors.red,
                    textColor: Colors.white,
                    shape: RoundedRectangleBorder(
                      borderRadius: new BorderRadius.circular(18.0),
                      side: BorderSide(color: Colors.red),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Solution

I'm not sure you can use ListTile after the items: directly. If you did run the code above, you're getting errors. it needs to return DropdownMenuItem instead of ListTile directly

return DropdownMenuItem<String>(
    value: value,
    child: Row(
    children: <Widget>[
        CircleAvatar(backgroundColor: Colors.primaries[3]),
        Text(value)
    ],
));

I think the above code would be relatively correct.

Comments

[Gonçalo]

How can a Map<DropDownMenuItem> have Elements of ListTile ?! Do you run your code?

[Abdul Qadir]

Row is repeating with value