Overflowed By with DropdownButton in Flutter

Question

Background: Hello. I have just started learning Flutter and I have run into an Overflowed By error when trying to create a dropdown menu in the top left corner of the app I'm building.

Question: How can I accurately format a dropdown menu in the top left corner of my app. I want the menu to be flush with the side of the left screen and the icon in the symmetrical opposite position relative to the rightmost icon as pictured in the attached image. Before, I had an IconButton instead of a DropdownButton, and the IconButton was itself, automatically positioned correctly. I would also like to correctly center the menu icon because, as you can see, it is slightly off center-vertical.

Code:

appBar: AppBar(
      leading: DropdownButton(icon: Icon(Icons.menu, color: colorPalette.chooseColor('black')), items: [DropdownMenuItem(child: Text('Events'),],),
      centerTitle: true,
      title: Text('Some Title', style: TextStyle(color: colorPalette.chooseColor('black'), fontSize: 23),),
      actions: <Widget>[
        IconButton(
          icon: Icon(Icons.map_outlined,  
          ),
          onPressed: () {
            // do something
          },
        )
      ],
    ),

score 1 · Answer 1 · edited Jan 19 '21 at 03:02

1

You just need add drawer property, inside the Scaffold. And delete leading from your Appbar.

Scaffold(
  appBar: AppBar(title: Text(title)),
  body: Center(child: Text('My Page!')),
  drawer: Drawer(
  child: ListView(
  children: <Widget>[
  //here you can customize the menu with the widgets you want. Example:
    ListTile(
    title: Text("Item 1"),
    trailing: Icon(Icons.arrow_forward),
       ),
     ],
    ),
  ),

Nice code!

edited Jan 19 '21 at 03:02

Bach

2,928
1
6
16

answered Jan 19 '21 at 02:40

Alfredo González

64
3

Doesn't exactly answer the question but great alternative! Thank you :) Not even sure if using a DropdownButton is possible? – M A F Jan 19 '21 at 03:07
Also, this doesn't seem to wrap the contents of the drawer. I only want to have 4 clickable words in there but the drawer is relatively huge. – M A F Jan 19 '21 at 03:12
@MAF please check my answer below – Bach Jan 19 '21 at 03:37
I think, the answer of @Bach, resolve your question. Try with his code. – Alfredo González Jan 19 '21 at 03:53

score 0 · Answer 2 · answered Jan 19 '21 at 03:37

There's no need to use the leading attribute of the AppBar all the time. We can place the Dropdown in the same position without it overflowing by using title only. This way it gives you lots of flexibility in customizing your AppBar widget:

AppBar(
      leadingWidth: 0,
      automaticallyImplyLeading: false,
      title: Stack(
        alignment: AlignmentDirectional.center,
        children: [
          Positioned(
            left: 0,
            child: DropdownButton(
                // ... other lines
                ),
          ),
          Container(
            width: MediaQuery.of(context).size.width,
            alignment: Alignment.center,
            child: Text(
              'Some Title',
              // ... other lines
            ),
          ),
          Positioned(
            right: 0,
            child: IconButton(icon: Icon(Icons.map_outlined)),
          ),
        ],
      ),
    );

Overflowed By with DropdownButton in Flutter

2 Answers2