Блог

В настоящее время я работаю с Flutter web и пытаюсь добиться следующего:

Выпадающее меню

Я не могу задать заголовок для выпадающего меню, только добавить заголовок в качестве элемента в списке.

Я попробовал то, что предложил Firas Krifa, и получил следующий результат:

Результат в небольшом размере веб-страницы

Результат в размере 4K

Обычный размер веб-страницы (FULL HD)

Я не знаю, почему при небольшом размере выпадающее меню отображается слева от выпадающей кнопки, а размер 4k отображается справа. Также при обычном размере он отображается в заголовке, в то время как я хочу, чтобы он отображался прямо под заголовком.

Попробуйте это

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

Виджеты DropdownButtonHideUnderline и Theme помогут контролировать, как выглядит выпадающий список в заголовке 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(),
  ),
),