🧩DropDownButton()

Что такое `DropdownButton`

DropdownButton в Flutter — это виджет, который предоставляет пользователю возможность выбрать один элемент из списка, который появляется при нажатии на кнопку. Это отличный способ предоставить выбор из предопределённых значений, сохраняя при этом компактный интерфейс. DropdownButton идеально подходит для выбора опций, таких как категории, цвета или другие параметры.

Пример использования

Вот пример того, как можно использовать DropdownButton в приложении Flutter:

import 'package:flutter/material.dart';

class DropdownButtonExample extends StatefulWidget {
  const DropdownButtonExample({super.key});

  @override
  _DropdownButtonExampleState createState() => _DropdownButtonExampleState();
}

class _DropdownButtonExampleState extends State<DropdownButtonExample> {
  String? selectedValue;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('DropdownButton Example')),
      body: Center(
        child: DropdownButton<String>(
          hint: const Text('Select an option'), // Подсказка
          value: selectedValue, // Выбранное значение
          items: <String>['Option 1', 'Option 2', 'Option 3']
              .map<DropdownMenuItem<String>>((String value) {
            return DropdownMenuItem<String>(
              value: value,
              child: Text(value),
            );
          }).toList(),
          onChanged: (String? newValue) {
            setState(() {
              selectedValue = newValue; // Обновление состояния при выборе
            });
          },
        ),
      ),
    );
  }
}

Как работает код

DropdownButton: Основной виджет для выпадающего списка.
hint: Текст, который отображается, если выбранное значение отсутствует.
value: Текущее выбранное значение. Если оно не установлено, будет отображен текст подсказки.
items: Список элементов выпадающего меню. Каждый элемент создаётся с помощью DropdownMenuItem.
onChanged: Функция, которая вызывается, когда пользователь выбирает новый элемент из списка. Здесь мы обновляем состояние с помощью setState.

Зачем это нужно

DropdownButton полезен, когда у вас есть несколько опций, из которых пользователь должен выбрать одну, и вы хотите сохранить интерфейс чистым и простым. Это помогает избежать загромождения интерфейса, предоставляя пользователю возможность выбирать из списка. Применяется в случаях, таких как:

Формы с выбором значений.
Настройки, где пользователь может выбирать опции.
Фильтрация контента.

1. items

Список значений для выбора в выпадающем меню. Используется список виджетов DropdownMenuItem.

// Some code
DropdownButton<String>(
  items: [
    DropdownMenuItem(value: 'one', child: Text('Один')),
    DropdownMenuItem(value: 'two', child: Text('Два')),
  ],
  onChanged: (String? newValue) {},
)

2. value

Текущее выбранное значение. Оно должно совпадать с одним из значений в items.

// Some code
String dropdownValue = 'one';

DropdownButton<String>(
  value: dropdownValue,
  items: [
    DropdownMenuItem(value: 'one', child: Text('Один')),
    DropdownMenuItem(value: 'two', child: Text('Два')),
  ],
  onChanged: (String? newValue) {
    setState(() {
      dropdownValue = newValue!;
    });
  },
)

3. onChanged

Функция, которая вызывается при выборе нового значения. Здесь вы можете обновить состояние или выполнить другие действия.

// Some code
DropdownButton<String>(
  value: dropdownValue,
  items: [
    DropdownMenuItem(value: 'one', child: Text('Один')),
    DropdownMenuItem(value: 'two', child: Text('Два')),
  ],
  onChanged: (String? newValue) {
    setState(() {
      dropdownValue = newValue!;
    });
  },
)

4. hint

Подсказка, которая отображается, если нет выбранного значения (если value равно null).

// Some code
DropdownButton<String>(
  hint: Text('Выберите число'),
  items: [
    DropdownMenuItem(value: 'one', child: Text('Один')),
    DropdownMenuItem(value: 'two', child: Text('Два')),
  ],
  onChanged: (String? newValue) {},
)

5. disabledHint

Подсказка, которая отображается, если выпадающий список отключен (если onChanged равно null).

// Some code
DropdownButton<String>(
  value: dropdownValue,
  disabledHint: Text('Недоступно'),
  items: [
    DropdownMenuItem(value: 'one', child: Text('Один')),
    DropdownMenuItem(value: 'two', child: Text('Два')),
  ],
  onChanged: null, // Отключено
)

6. icon

Иконка, которая отображается рядом с выбранным значением. По умолчанию это стрелка вниз.

// Some code
DropdownButton<String>(
  value: dropdownValue,
  items: [
    DropdownMenuItem(value: 'one', child: Text('Один')),
    DropdownMenuItem(value: 'two', child: Text('Два')),
  ],
  onChanged: (String? newValue) {},
  icon: Icon(Icons.arrow_drop_down_circle),
)

7. iconSize

Размер иконки (по умолчанию 24.0).

// Some code
DropdownButton<String>(
  value: dropdownValue,
  items: [
    DropdownMenuItem(value: 'one', child: Text('Один')),
    DropdownMenuItem(value: 'two', child: Text('Два')),
  ],
  onChanged: (String? newValue) {},
  iconSize: 30.0,
)

8. isDense

Определяет, будет ли элемент списка более компактным.

// Some code
DropdownButton<String>(
  value: dropdownValue,
  items: [
    DropdownMenuItem(value: 'one', child: Text('Один')),
    DropdownMenuItem(value: 'two', child: Text('Два')),
  ],
  onChanged: (String? newValue) {},
  isDense: true,
)

9. isExpanded

Определяет, будет ли кнопка занимать всю доступную ширину.

// Some code
DropdownButton<String>(
  value: dropdownValue,
  items: [
    DropdownMenuItem(value: 'one', child: Text('Один')),
    DropdownMenuItem(value: 'two', child: Text('Два')),
  ],
  onChanged: (String? newValue) {},
  isExpanded: true,
)

10. underline

Виджет, который отображается под кнопкой (по умолчанию это линия).

// Some code
DropdownButton<String>(
  value: dropdownValue,
  items: [
    DropdownMenuItem(value: 'one', child: Text('Один')),
    DropdownMenuItem(value: 'two', child: Text('Два')),
  ],
  onChanged: (String? newValue) {},
  underline: Container(
    height: 2,
    color: Colors.deepPurpleAccent,
  ),
)

11. style

Стиль текста для выбранного значения.

// Some code
DropdownButton<String>(
  value: dropdownValue,
  items: [
    DropdownMenuItem(value: 'one', child: Text('Один')),
    DropdownMenuItem(value: 'two', child: Text('Два')),
  ],
  onChanged: (String? newValue) {},
  style: TextStyle(color: Colors.blue, fontSize: 18),
)

12. dropdownColor

Цвет фона выпадающего списка.

// Some code
DropdownButton<String>(
  value: dropdownValue,
  items: [
    DropdownMenuItem(value: 'one', child: Text('Один')),
    DropdownMenuItem(value: 'two', child: Text('Два')),
  ],
  onChanged: (String? newValue) {},
  dropdownColor: Colors.red,
)

13. focusColor

Цвет фокуса для кнопки.

// Some code
DropdownButton<String>(
  value: dropdownValue,
  items: [
    DropdownMenuItem(value: 'one', child: Text('Один')),
    DropdownMenuItem(value: 'two', child: Text('Два')),
  ],
  onChanged: (String? newValue) {},
  focusColor: Colors.greenAccent,
)

14. autofocus

Автоматически устанавливает фокус на элементе при загрузке экрана.

// Some code
DropdownButton<String>(
  value: dropdownValue,
  items: [
    DropdownMenuItem(value: 'one', child: Text('Один')),
    DropdownMenuItem(value: 'two', child: Text('Два')),
  ],
  onChanged: (String? newValue) {},
  autofocus: true,
)

15. selectedItemBuilder

Позволяет кастомизировать вид элементов, отображаемых в основном виджете, когда они выбраны.

// Some code
DropdownButton<String>(
  value: dropdownValue,
  items: [
    DropdownMenuItem(value: 'one', child: Text('Один')),
    DropdownMenuItem(value: 'two', child: Text('Два')),
  ],
  onChanged: (String? newValue) {},
  selectedItemBuilder: (BuildContext context) {
    return ['Один', 'Два'].map((String value) {
      return Text(
        value,
        style: TextStyle(color: Colors.red),
      );
    }).toList();
  },
)

PreviousIconButton()NextFloatingActionButton

Last updated 8 months ago

Что такое DropdownButton