Flutter 中的 DropdownButton 溢出

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

Answer 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!

Answer 2

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