RadioButton

RadioButton даёт выбрать ровно один вариант из нескольких — пол, способ уведомлений, тариф.

совет
Состояние виджета

Прежде чем браться за виджеты форм, посмотрите руководство по состоянию виджетов.

Добавление виджета

  1. Перетащите виджет Column из вкладки Layout Elements и задайте ему Cross Axis Alignment = Stretch.
  2. Добавьте виджет RadioButton из вкладки Form Elements.
инфо

По умолчанию у виджета один вариант — Option 1.

Действие при смене выбора

Как выполнить действие при смене выбора.

Переименование варианта

  1. Выделите RadioButton в дереве виджетов или на холсте.
  2. Откройте раздел Define Options в панели свойств.
  3. Найдите свойство Option 1 и измените name.

Добавление и удаление вариантов

  1. Выделите RadioButton.
  2. Откройте раздел Define Options.
  3. Нажмите Add Option.
  4. Введите название в Option 2 Text.
  5. Чтобы убрать вариант, нажмите крестик в свойстве с его именем.

Начальный вариант

При запуске приложения ни один вариант не выбран.

  1. Выделите RadioButton.
  2. Найдите свойство Initial Option.
  3. Введите имя варианта. Например, значение Jupiter выделит второй вариант при запуске.

Оформление выбранного варианта

  1. Выделите RadioButton.
  2. Откройте раздел Radio Button Text Style.
  3. Отметьте Change Selected Text Style.
  4. Задайте оформление в разделе Radio Button Selected Text Style.

Чтение выбранного значения

Соберём пример, где выбранный вариант выводится в виджете Text.

инфо

Здесь значение показано в тексте для наглядности. В реальном приложении выбор чаще уходит на бэкенд — в базу или в запрос к API.

Порядок действий:

  1. Добавьте на страницу виджет Text.
  2. В панели свойств нажмите Set from Variable.
  3. В Source выберите Widget State.
  4. В Available Options укажите RadioButton.
  5. При необходимости задайте значение по умолчанию.
  6. Нажмите Save.

Настройка

Высота вариантов

  1. Выделите RadioButton.
  2. Откройте раздел Radio Button Properties.
  3. Задайте значение в поле Option Height.

Отступы вокруг подписи

  1. Выделите RadioButton.
  2. Откройте раздел Radio Button Properties.
  3. Задайте значения в свойстве Margin.
  4. Значок обновления сбрасывает их к исходным.
инфо

Кнопка с замком меняет отступы слева, сверху, справа и снизу разом; разомкнув её, значения задают по отдельности.

Варианты в строку

По умолчанию варианты выстраиваются столбцом, как внутри Column. Свойство Axis переключает их в строку, как в Row.

  1. Выделите RadioButton.
  2. Откройте раздел Radio Button Properties.
  3. Смените Axis на Horizontal.

Выравнивание

Выравнивание определяет, как варианты распределяются по ширине.

  1. Выделите RadioButton.
  2. Откройте раздел Radio Button Properties.
  3. Выберите значение в списке Alignment: Start, Center, End.
  4. Если Axis = Horizontal, добавляются варианты Space evenly, Space between и Space around.

Положение кнопки

Кружок можно поставить справа от подписи — за это отвечает свойство Button Position.

  1. Выделите RadioButton.
  2. Откройте раздел Radio Button Properties.
  3. Смените Button Position на Right.

Цвета

  1. Выделите RadioButton.
  2. Откройте раздел Radio Button Properties.
  3. Selected Color — цвет выбранного варианта: нажмите на квадрат рядом с Unset и выберите цвет либо введите HEX-код.
  4. Unselected Color — цвет остальных вариантов; задаётся так же.

перевод официальной документации FlutterFlow

обновлено

⌕ ESC