🧩Checkbox

Что такое CheckBox

CheckBox (флажок) в Flutter — это элемент интерфейса, который позволяет пользователям выбирать или отменять выбор, просто нажимая на него. Он может быть представлен в виде маленького квадрата, который заполняется галочкой, когда пользователь выбирает его. Можно представить его как галочку в списке дел: если вы завершили задачу, вы ставите галочку; если не завершили — оставляете пустым.

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

Вот пример использования CheckBox в приложении Flutter:

import 'package:flutter/material.dart';

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

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

class _CheckBoxExampleState extends State<CheckBoxExample> {
  bool isChecked = false; // Состояние флажка

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('CheckBox Example')),
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Checkbox(
              value: isChecked, // Текущее состояние
              onChanged: (bool? newValue) {
                setState(() {
                  isChecked = newValue!; // Обновление состояния
                });
              },
            ),
            const Text('Check me!'),
          ],
        ),
      ),
    );
  }
}

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

1. Checkbox: Основной виджет, представляющий сам флажок.

2. value: Это текущее состояние флажка. Если true, то он отмечен; если false, то не отмечен.

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

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

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

CheckBox помогает пользователям делать выбор. Например:

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

• В списках задач, чтобы отмечать выполненные задачи.

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

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

1. required bool? value

   • Описание: Текущее состояние флажка. Если true, флажок отмечен; если false, не отмечен.

   • Пример:

     value: isChecked // Использует переменную для состояния

2. bool tristate = false

   • Описание: Если true, флажок может принимать три состояния: отмечен, не отмечен и неопределён (например, когда он часть группы флажков).

   • Пример:

     tristate: true // Позволяет трёхсостояние

3. required void Function(bool?)? onChanged

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

   • Пример:

     onChanged: (bool? newValue) {
       // Действие при изменении состояния
     }

4. MouseCursor? mouseCursor

   • Описание: Курсор мыши при наведении на флажок.

   • Пример:

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

5. Color? activeColor

   • Описание: Цвет флажка, когда он отмечен.

   • Пример:

     activeColor: Colors.green // Цвет при отметке

6. WidgetStateProperty<Color?>? fillColor

   • Описание: Цвет фона флажка. Может изменяться в зависимости от состояния.

   • Пример:

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

7. Color? checkColor

   • Описание: Цвет галочки, когда флажок отмечен.

   • Пример:

     checkColor: Colors.white // Цвет галочки

8. Color? focusColor

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

   • Пример:

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

9. Color? hoverColor

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

   • Пример:

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

10. WidgetStateProperty<Color?>? overlayColor

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

    • Пример:

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

11. double? splashRadius

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

    • Пример:

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

12. MaterialTapTargetSize? materialTapTargetSize

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

    • Пример:

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

13. VisualDensity? visualDensity

    • Описание: Плотность визуальных элементов, чтобы управлять расстоянием между флажками и другими элементами.

    • Пример:

      visualDensity: VisualDensity.adaptivePlatformDensity // Адаптивная плотность

14. FocusNode? focusNode

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

    • Пример:

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

15. bool autofocus = false

    • Описание: Если true, флажок автоматически получит фокус при загрузке.

    • Пример:

      autofocus: true // Автофокус

16. OutlinedBorder? shape

    • Описание: Форма флажка. Позволяет настраивать углы и контуры.

    • Пример:

      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(4.0)) // Круглые углы

17. BorderSide? side

    • Описание: Сторона рамки для флажка. Позволяет добавлять рамки к флажку.

    • Пример:

      side: BorderSide(color: Colors.grey, width: 1.0) // Рамка вокруг флажка

18. bool isError = false

    • Описание: Если true, флажок будет помечен как ошибка.

    • Пример:

      isError: true // Пометка флажка как ошибочного

19. String? semanticLabel

    • Описание: Семантическая метка для флажка, полезная для экранных считывателей.

    • Пример:

      semanticLabel: 'Select this option' // Семантическая метка

Заключение

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