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