🧩Radio

Что такое Radio

Radio (радиокнопка) в Flutter — это элемент интерфейса, который позволяет пользователю выбирать один из нескольких вариантов. Это как выбор одного варианта ответа на тесте: вы можете выбрать только один ответ из предложенных, и при выборе нового варианта предыдущий автоматически снимается.

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

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

import 'package:flutter/material.dart';

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

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

class _RadioExampleState extends State<RadioExample> {
  String? selectedOption; // Текущий выбранный вариант

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Radio Example')),
      body: Column(
        children: [
          ListTile(
            title: const Text('Option 1'),
            leading: Radio<String>(
              value: 'option1',
              groupValue: selectedOption,
              onChanged: (String? value) {
                setState(() {
                  selectedOption = value; // Обновление выбранного варианта
                });
              },
            ),
          ),
          ListTile(
            title: const Text('Option 2'),
            leading: Radio<String>(
              value: 'option2',
              groupValue: selectedOption,
              onChanged: (String? value) {
                setState(() {
                  selectedOption = value; // Обновление выбранного варианта
                });
              },
            ),
          ),
        ],
      ),
    );
  }
}

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

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

  2. value: Значение радиокнопки, которое будет установлено, если она выбрана.

  3. groupValue: Значение текущего выбранного варианта в группе радиокнопок. Он сравнивается с value каждой радиокнопки.

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

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

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

Radio помогает пользователям делать выбор среди нескольких вариантов. Например:

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

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

  • В тестах и викторинах для выбора единственного ответа на вопрос.

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

  1. required InvalidType value

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

    • Пример:

      value: 'option1' // Значение радиокнопки

  2. required InvalidType groupValue

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

    • Пример:

      groupValue: selectedOption // Текущее выбранное значение

  3. required void Function(InvalidType)? onChanged

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

    • Пример:

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

  4. MouseCursor? mouseCursor

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

    • Пример:

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

  5. bool toggleable = false

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

    • Пример:

      toggleable: true // Позволяет переключение радиокнопки

  6. Color? activeColor

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

    • Пример:

      activeColor: Colors.blue // Цвет при выборе

  7. WidgetStateProperty<Color?>? fillColor

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

    • Пример:

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

  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 // Автофокус

Заключение

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

PreviousCheckboxNextSwitch

Last updated