いわゆるラジオボタンは Radio Wdget となります
複数の選択肢のなかから１つだけ選択する場合に使われるため、Checkbox や Switch Widget とは異なる構成になっています
![1x1.trans - [Flutter] Radio グループから１つ選択するWidget](https://akira-watson.com/wp-content/themes/simplicity2/images/1x1.trans.gif "[Flutter] Radio グループから１つ選択するWidget")
![flutter radio 03b - [Flutter] Radio グループから１つ選択するWidget](https://akira-watson.com/wp-content/uploads/2024/09/flutter_radio_03b.jpg "[Flutter] Radio グループから１つ選択するWidget")
Radio Widget
例えば、Radio Widgetを2つ用意して選択します
![flutter radio 01 - [Flutter] Radio グループから１つ選択するWidget](https://akira-watson.com/wp-content/uploads/2024/09/flutter_radio_01.jpg "[Flutter] Radio グループから１つ選択するWidget")
Radio Widget を選択すると、
|
1 2 |
I/flutter ( 9354): radio 2 I/flutter ( 9354): radio 1 |
のようにDebug Console にプリントします
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
var selectedRadio = "radio 1"; @override Widget build(BuildContext context) { return Column( children: <Widget>[ Radio<String>( value: "radio 1", groupValue: selectedRadio, onChanged: (value) { setState(() { selectedRadio = value!; debugPrint(selectedRadio); }); }, ), Radio<String>( value: "radio 2", groupValue: selectedRadio, onChanged: (value) { setState(() { selectedRadio = value!; debugPrint(selectedRadio); }); }, ), ], ); } |
Radio として<T>のジェネリクスを使い、データ型が抽象化されています
この例ではString型としています
Radio<String>
|
1 2 3 4 5 6 7 8 9 10 |
Radio<String>( value: "radio 1", groupValue: selectedRadio, onChanged: (value) { setState(() { selectedRadio = value!; debugPrint(selectedRadio); }); }, ), |
Radio Widget では以下のプロパティの設定が必要です
- value: このRadio Widet の値
- groupValue: グループ内の Radio Widget で現行選択されている値
- onChanged: 新しく選択、setState()でgroupValueの値が更新される
初期値で、radio 1 を選択していたところから
radio 2 をクリックすると groupValue が “radio 2” となり
raido 1 をクリックすると groupValue が “radio 1” になります
サンプルコード
Radio Widget を３つ用意して
ListTileを使ってRadioのテキストを表示して
Option A, B, C をそれぞれ1,2,3として下段に選択したRadioを表示してみます
main.dart
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
import 'package:flutter/material.dart'; void main() { runApp(const MainApp()); } class MainApp extends StatelessWidget { const MainApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: const Text('Radio button'), ), body: const Center( child: RadioButton(), ), ), ); } } class RadioButton extends StatefulWidget { const RadioButton({super.key}); @override State<RadioButton> createState() => _RadioButtonState(); } class _RadioButtonState extends State<RadioButton> { int _selectedValue = 1; @override Widget build(BuildContext context) { return Column( children: <Widget>[ ListTile( title: const Text('Option A'), leading: Radio<int>( value: 1, groupValue: _selectedValue, onChanged: (int? value) { setState(() { _selectedValue = value!; }); }, ), ), ListTile( title: const Text('Option B'), leading: Radio<int>( value: 2, groupValue: _selectedValue, onChanged: (int? value) { setState(() { _selectedValue = value!; }); }, ), ), ListTile( title: const Text('Option C'), leading: Radio<int>( value: 3, groupValue: _selectedValue, onChanged: (int? value) { setState(() { _selectedValue = value!; }); }, ), ), Padding( padding: const EdgeInsets.all(16.0), child: Text('Selected: $_selectedValue'), ), ], ); } } |
実行結果
RadioListTile
Radioはラジオボタンだけですが
RadioにTitleをつけたものがRadioListTileです
ListTileを使った場合と同じようになりますが
多少コードが少なくはなります
main.dart
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
import 'package:flutter/material.dart'; void main() { runApp(const MainApp()); } class MainApp extends StatelessWidget { const MainApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: const Text('RadioListTile'), ), body: const Center( child: RadioButton(), ), ), ); } } class RadioButton extends StatefulWidget { const RadioButton({super.key}); @override State<RadioButton> createState() => _RadioButtonState(); } class _RadioButtonState extends State<RadioButton> { int _selectedValue = 1; @override Widget build(BuildContext context) { return Column( children: <Widget>[ RadioListTile( title: const Text('Option A'), value: 1, groupValue: _selectedValue, onChanged: (int? value) { setState(() { _selectedValue = value!; }); }, ), RadioListTile( title: const Text('Option B'), value: 2, groupValue: _selectedValue, onChanged: (int? value) { setState(() { _selectedValue = value!; }); }, ), RadioListTile( title: const Text('Option C'), value: 3, groupValue: _selectedValue, onChanged: (int? value) { setState(() { _selectedValue = value!; }); }, ), Padding( padding: const EdgeInsets.all(16.0), child: Text('Selected: $_selectedValue'), ), ], ); } } |
![flutter radio 02 - [Flutter] Radio グループから１つ選択するWidget](https://akira-watson.com/wp-content/uploads/2024/09/flutter_radio_02.jpg "[Flutter] Radio グループから１つ選択するWidget")
References:
Radio class
RadioListTile class
