Flutter図鑑

Radio

Radio Widgetはユーザーが複数の選択肢から複数または一つを選択する時に有効です。
ここではFlutterから提供されているRadio Widgetの使い方と応用例を解説します。

基本的な使用方法

  • Radio

FlutterでシンプルなRadioボタンを作成するためにはRadioが有効です。
onChangedでRadio Widgetに設定した値がユーザーが選択されたかどうかを取得することができます。

enum RadioValue { apple, grape, lemon }
RadioValue? selectedValue = RadioValue.apple;


return Radio(
  value: RadioValue.apple,
  groupValue: selectedValue,
  onChanged: (val) {
    setState(() {
      selectedValue = val;
    });
  }
),

ラベル付きのラジオボタン

  • RadioListTile

RadioListTileはラベル付きのラジオボタンを作成したい場合に有効です。
onChangedの値をNullにすることで、フィールドを disabled に変更することができます。

RadioListTile(
  title: const Text("Label"),
  value: RadioValue.apple,
  groupValue: selectedValue,
  onChanged: (val) {
    setState(() {
      selectedValue = val;
    });
  }
),

色の変更

activeColor, hoverColorなどの値を変更させることで、アクティブやホバー時の色を変更することができます。
より自在に色を変更したい場合はMaterialStatePropertyを使用して実現することができます。

Radio(
  activeColor: Colors.red,
  hoverColor: Colors.red[50],
  value: RadioValue.apple,
  groupValue: selectedValue,
  onChanged: (val) {
    setState(() {
      selectedValue = val;
    });
  }),

Validation

  • FormField

Radio Widgetで入力値の検証を行うためにはFormFieldを使用することで対応できます。
Form()で囲い、formKeyを設定しなければならないことに注意してください。

FormField(
  autovalidateMode: AutovalidateMode.always,
  initialValue: RadioValue.apple,
  validator: (value) {
    if (value == RadioValue.apple) {
      return "Apple is Error!";
    }
    return null;
  },
  builder: (FormFieldState<RadioValue> state) {
    return  RadioListTile(
      ...
    )
  }
)

API

さらに詳しく知りたい場合は、以下の公式ドキュメントから参照してください。

Previous
Next