🧩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. Вы можете управлять его состоянием, настраивать цвета, иконки и обработчики событий, чтобы создать интерфейс, который будет соответствовать вашим потребностям.