如何在 Flutter Web 的下拉菜单中添加标题？

Question

I'm currently working with Flutter web and I'm trying to achieve the following:

DropdownMenu

I can't set a title for the dropdown menu, only add the title as an item in the list.

I tried what Firas Krifa proposed and I got the following result:

Result in small web size

Result in 4K size

Normal web size(FULL HD)

I don't know why in the small size the dropdownmenu appears at the left of the dropdownbutton and the 4k size appears at the right. Also on the normal size it appears on the title, while what I want is that it drops right under the title.

Answer 1

The widgets DropdownButtonHideUnderline and Theme will help control how the dropdown looks in the title of the AppBar

https://material.io/guidelines/layout/structure.html#structure-app-bar

new AppBar(
  title: new Theme(
      child: new DropdownButtonHideUnderline(
      child: new DropdownButton<String>(
        value: _value,
        items: <DropdownMenuItem<String>>[
          new DropdownMenuItem(
            child: new Text('My Page'),
            value: 'one',
          ),
        ], 
        onChanged: (String value) {
          setState(() => _value = value);
        },
      ),
    ), 
    data: new ThemeData.dark(),
  ),
),


  

Answer 2

Try this

new DropdownButton<String>(
  items: <String>['A', 'B', 'C', 'D'].map((String value) {
    return new DropdownMenuItem<String>(
      value: value,
      child: new Text(value),
    );
  }).toList(),
  onChanged: (_) {},
)