Последнее обновление:

Как сделать панель переключателей с помощью виджета ToggleButtons

Flutter

Не знаю, как вам, но мне нравятся ярлыки на моем телефоне, которые дают мне быстрый доступ к некоторым действиям.

Я подумал, можно ли в моем приложении создать что-то подобное, и обнаружил виджет ToggleButtons.

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

Шаг  1. Создаем переключатели

Чтобы создать кнопку-переключатель, необходимо вызвать конструктор ToggleButtons. У этого виджета есть два обязательных аргумента:

  • children (List <Widget>) - Каждый виджет в дочерних элементах представляет кнопку, и в нашем случае это будет значок.
  • isSelected (List <bool>) - список bool, содержащий состояние каждой кнопки, независимо от того, выбрана она (true) или нет (false)

Количество дочерних элементов и isSelected должно быть одинаково.

Наша цель - получить четыре переключаемые кнопки. Для этого создадим переменную состояния, которая будет хранить состояние этих четырех кнопок, включены они или нет. Мы устанавливаем исходное состояние всех кнопок на false.

Инициализируйте эту переменную состояния внутри Stateful виджета.

List<bool> _buttonsState = List.generate(4, (index) => false);

Следующим шагом вызовем конструктор и передадим необходимые параметры.

child: ToggleButtons(
  children: [
    Icon(Icons.wifi),
    Icon(Icons.bluetooth),
    Icon(Icons.highlight),
    Icon(Icons.camera),
  ],
  isSelected: _buttonsState
)

Сейчас, если мы запустим наш проект, мы увидим четыре отключенные кнопки.

Блок кнопок
Блок кнопок

Шаг 2. Делаем кнопки доступными для нажатия

Если пользователь попытается нажать на кнопки, состояние этих кнопок не изменится. Чтобы обработать нажатие, нам нужна функция обратного вызова onPressed, которая возвращает void и принимает один параметр типа int, который является индексом нажатой кнопки.

child: ToggleButtons(
  children: [
    Icon(Icons.wifi),
    Icon(Icons.bluetooth),
    Icon(Icons.highlight),
    Icon(Icons.camera),
  ],
  isSelected: _buttonsState,
  onPressed: (int index) => {
    setState(() {
      _buttonsState[index] = !_buttonsState[index];
    })
  },
),

Теперь можно нажимать кнопки:

Обработка нажатий
Обработка нажатий

Шаг 3. Украшаем!

Виджет ToggleButtons имеет возможность настройки цвета и границ.

Настраиваем цвета:

Свойства, относящиеся к цветам, включают selectedColor, focusColor, highlightColor, hoverColor и splashColor. Вы можете прочитать описания каждого свойства в официальной документации Flutter.
Мы же установим только selectedColor и splashColor.

child: ToggleButtons(
  children: [
    Icon(Icons.wifi),
    Icon(Icons.bluetooth),
    Icon(Icons.highlight),
    Icon(Icons.camera),
  ],
  isSelected: _buttonsState,
  selectedColor: Colors.greenAccent,
  splashColor: Colors.teal,
  onPressed: (int index) => {
    setState(() {
      _buttonsState[index] = !_buttonsState[index];
    })
  },
),

Небольшие изменения в цветах сразу улучшают дизайн кнопок.

Настройка цвета
Настройка цвета

Настройка границ:

По умолчанию для renderBorder установлено значение true, это означает, что граница отображается на экране. В свойстве borderColor можно установить цвет границы, если кнопки не выбраны. Чтобы изменить цвет границы выбранных кнопок, используйте selectedBorderColor. Чтобы изменить ширину границы, установите свойство borderWidth.

child: ToggleButtons(
  children: [
    Icon(Icons.wifi),
    Icon(Icons.bluetooth),
    Icon(Icons.highlight),
    Icon(Icons.camera),
  ],
  isSelected: _buttonsState,
  selectedColor: Colors.greenAccent,
  splashColor: Colors.teal,
  selectedBorderColor: Colors.greenAccent,
  borderWidth: 5,
  onPressed: (int index) => {
    setState(() {
      _buttonsState[index] = !_buttonsState[index];
    })
  },
)
Настройка границ
Настройка границ

Если необходимы закругленные края, можно сделать границу закругленной с помощью BorderRadius.

child: ToggleButtons(
  children: [
    Icon(Icons.wifi),
    Icon(Icons.bluetooth),
    Icon(Icons.highlight),
    Icon(Icons.camera),
  ],
  isSelected: _buttonsState,
  selectedColor: Colors.greenAccent,
  splashColor: Colors.teal,
  selectedBorderColor: Colors.greenAccent,
  borderWidth: 5,
  borderRadius: BorderRadius.all(Radius.circular(10)),
  onPressed: (int index) => {
    setState(() {
      _buttonsState[index] = !_buttonsState[index];
    })
  },
),

Результат:

Закругленные углы
Закругленные углы

Комментарии