🧩Switch

Что такое Switch

Switch в Flutter — это элемент интерфейса, который позволяет пользователю переключать между двумя состояниями, например, «включено» и «выключено». Это как переключатель света: когда вы его включаете, свет загорается, а когда выключаете — гаснет.

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

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

import 'package:flutter/material.dart';

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

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

class _SwitchExampleState extends State<SwitchExample> {
  bool isSwitched = false; // Текущее состояние переключателя

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Switch Example')),
      body: Center(
        child: Switch(
          value: isSwitched, // Текущее состояние
          onChanged: (bool value) {
            setState(() {
              isSwitched = value; // Обновление состояния при изменении
            });
          },
          activeColor: Colors.green, // Цвет, когда переключатель включен
          inactiveTrackColor: Colors.grey, // Цвет трека, когда выключен
        ),
      ),
    );
  }
}

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

  1. Switch: Основной виджет, представляющий переключатель.

  2. value: Логическое значение, определяющее текущее состояние переключателя (включен или выключен).

  3. onChanged: Функция, вызываемая при изменении состояния переключателя. Здесь мы обновляем состояние, чтобы отобразить изменения.

  4. setState: Метод, который обновляет интерфейс, когда состояние изменяется.

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

Switch позволяет пользователям быстро переключаться между состояниями. Например:

  • В настройках приложения, чтобы включить или выключить уведомления.

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

  • В формах, где требуется подтвердить или отклонить определенные опции.

Все настройки Switch

  1. required bool value

    • Описание: Логическое значение, определяющее текущее состояние переключателя. Это обязательный параметр.

    • Пример:

      value: isSwitched // Текущее состояние

  2. required void Function(bool)? onChanged

    • Описание: Функция, вызываемая при изменении состояния переключателя. Это обязательный параметр.

    • Пример:

      onChanged: (bool value) {
  setState(() {
    isSwitched = value; // Обновление состояния
  });
}

  3. Color? activeColor

    • Описание: Цвет переключателя, когда он включен.

    • Пример:

      activeColor: Colors.green // Цвет при включении

  4. Color? activeTrackColor

    • Описание: Цвет трека переключателя, когда он включен.

    • Пример:

      activeTrackColor: Colors.lightGreen // Цвет трека при включении

  5. Color? inactiveThumbColor

    • Описание: Цвет переключателя, когда он выключен.

    • Пример:

      inactiveThumbColor: Colors.red // Цвет при выключении

  6. Color? inactiveTrackColor

    • Описание: Цвет трека переключателя, когда он выключен.

    • Пример:

      inactiveTrackColor: Colors.grey // Цвет трека при выключении

  7. ImageProvider<Object>? activeThumbImage

    • Описание: Изображение, которое будет использоваться для переключателя, когда он включен.

    • Пример:

      activeThumbImage: AssetImage('assets/thumb_active.png') // Изображение при включении

  8. void Function(Object, StackTrace?)? onActiveThumbImageError

    • Описание: Функция, вызываемая при ошибке загрузки изображения переключателя в активном состоянии.

    • Пример:

      onActiveThumbImageError: (error, stackTrace) {
  print('Ошибка загрузки изображения: $error'); // Обработка ошибки
}

  9. ImageProvider<Object>? inactiveThumbImage

    • Описание: Изображение, которое будет использоваться для переключателя, когда он выключен.

    • Пример:

      inactiveThumbImage: AssetImage('assets/thumb_inactive.png') // Изображение при выключении

  10. void Function(Object, StackTrace?)? onInactiveThumbImageError

    • Описание: Функция, вызываемая при ошибке загрузки изображения переключателя в неактивном состоянии.

    • Пример:

      onInactiveThumbImageError: (error, stackTrace) {
  print('Ошибка загрузки изображения: $error'); // Обработка ошибки
}

  11. WidgetStateProperty<Color?>? thumbColor

    • Описание: Цвет переключателя в зависимости от состояния (может изменяться).

    • Пример:

      thumbColor: MaterialStateProperty.resolveWith<Color?>((Set<MaterialState> states) {
  if (states.contains(MaterialState.selected)) {
    return Colors.blue; // Цвет при выборе
  }
  return Colors.grey; // По умолчанию
}),

  12. WidgetStateProperty<Color?>? trackColor

    • Описание: Цвет трека в зависимости от состояния (может изменяться).

    • Пример:

      trackColor: MaterialStateProperty.resolveWith<Color?>((Set<MaterialState> states) {
  if (states.contains(MaterialState.selected)) {
    return Colors.lightBlue; // Цвет трека при выборе
  }
  return Colors.grey; // По умолчанию
}),

  13. WidgetStateProperty<Color?>? trackOutlineColor

    • Описание: Цвет контура трека.

    • Пример:

      trackOutlineColor: MaterialStateProperty.all<Color?>(Colors.black) // Цвет контура

  14. WidgetStateProperty<double?>? trackOutlineWidth

    • Описание: Ширина контура трека.

    • Пример:

      trackOutlineWidth: MaterialStateProperty.all<double?>(2.0) // Ширина контура

  15. WidgetStateProperty<Icon?>? thumbIcon

    • Описание: Иконка, которая будет отображаться на переключателе.

    • Пример:

      thumbIcon: MaterialStateProperty.all<Icon?>(Icon(Icons.check)) // Иконка

  16. MaterialTapTargetSize? materialTapTargetSize

    • Описание: Размер области нажатия переключателя.

    • Пример:

      materialTapTargetSize: MaterialTapTargetSize.padded // Увеличенная область нажатия

  17. DragStartBehavior dragStartBehavior = DragStartBehavior.start

    • Описание: Определяет, как должно обрабатываться начало перетаскивания.

    • Пример:

      dragStartBehavior: DragStartBehavior.start // Обработка начала перетаскивания

  18. MouseCursor? mouseCursor

    • Описание: Курсор мыши при наведении на переключатель.

    • Пример:

      mouseCursor: SystemMouseCursors.click // Курсор при наведении

  19. Color? focusColor

    • Описание: Цвет переключателя при фокусе.

    • Пример:

      focusColor: Colors.blue // Цвет при фокусе

  20. Color? hoverColor

    • Описание: Цвет переключателя при наведении курсора.

    • Пример:

      hoverColor: Colors.yellow // Цвет при наведении

  21. WidgetStateProperty<Color?>? overlayColor

    • Описание: Цвет наложения при взаимодействии с переключателем.

    • Пример:

      overlayColor: MaterialStateProperty.resolveWith<Color?>((Set<MaterialState> states) {
  if (states.contains(MaterialState.hovered)) {
    return Colors.grey.withOpacity(0.5); // Цвет наложения при наведении
  }
  return null; // По умолчанию
}),

  22. double? splashRadius

    • Описание: Радиус эффекта всплеска при нажатии на переключатель.

    • Пример:

      splashRadius: 20.0 // Установка радиуса

  23. FocusNode? focusNode

    • Описание: Узел фокуса для управления фокусом этого переключателя.

    • Пример:

      focusNode: FocusNode() // Указатель на узел фокуса

  24. void Function(bool)? onFocusChange

    • Описание: Функция, вызываемая при изменении фокуса.

    • Пример:

      onFocusChange: (bool focused) {
  print(focused ? 'Получил фокус' : 'Потерял фокус'); // Обработка фокуса
},

  25. bool autofocus = false

    • Описание: Указывает, должен ли переключатель получать фокус автоматически при создании.

    • Пример:

      autofocus: true // Включить автофокус

Заключение

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

PreviousRadioNextSlider

Last updated