CODEWITHSUNDEEP
flutterflutter-layoutdropdownbutton
M A F
M A F

Reputation: 301

Overflowed By with DropdownButton in Flutter

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

enter image description here

Upvotes: 0

Views: 499

Answers (2)

Bach
Bach

Reputation: 3326

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

Upvotes: 0

Alfredo Gonz&#225;lez
Alfredo Gonz&#225;lez

Reputation: 64

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!

Upvotes: 1

Related Questions