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

PreviousFloatingActionButtonNextRadio

Last updated