FlutterのRadioは、複数の選択肢から1つを選ぶためのウィジェットです。通常、ラジオボタンとして知られています。このウィジェットは、状態管理と連携して、選択された値を保存できます。以下は、FlutterのRadioを使用する方法のブログ形式のチュートリアルです。
FlutterのRadioの使用方法
基本的なラジオボタンの作成
FlutterのRadioを使用するには、まず、Radioウィジェットをインポートする必要があります。以下は、基本的なラジオボタンを作成する方法です。
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'My App',
home: Scaffold(
body: MyRadioWidget(),
),
);
}
}
class MyRadioWidget extends StatefulWidget {
@override
_MyRadioWidgetState createState() => _MyRadioWidgetState();
}
class _MyRadioWidgetState extends State<MyRadioWidget> {
int? _selectedValue = 1; // 初期値は1に設定
@override
Widget build(BuildContext context) {
return Center(
child: Column(
children: [
Radio(
value: 1,
groupValue: _selectedValue!,
onChanged: (value) {
setState(() {
_selectedValue = value;
});
},
),
Radio(
value: 2,
groupValue: _selectedValue!,
onChanged: (value) {
setState(() {
_selectedValue = value;
});
},
),
],
));
}
}
上記の例では、2つのラジオボタンを作成しています。valueは、選択された値を表します。groupValueは、ラジオボタンが属するグループを識別します。onChangedは、ラジオボタンが変更されたときに呼び出されるコールバック関数を指定します。この関数内で、setStateメソッドを呼び出して、選択された値を保存します。
ラジオボタンにテキストを追加する
ラジオボタンにテキストを追加するには、Textウィジェットを使用します。以下は、ラジオボタンにテキストを追加する方法です。(以降、上記サンプルコードのColumn(…)部分を抜粋して記載します)
Column(
children: [
ListTile(
leading: Radio(
value: 1,
groupValue: _selectedValue!,
onChanged: (value) {
setState(() {
_selectedValue = value;
});
},
),
title: Text("選択肢1"),
),
ListTile(
leading: Radio(
value: 2,
groupValue: _selectedValue!,
onChanged: (value) {
setState(() {
_selectedValue = value;
});
},
),
title: Text("選択肢2"),
),
],
)
上記の例では、`ListTile`ウィジェットを使用して、ラジオボタンとテキストを含むリストアイテムを作成しています。`leading`プロパティには、ラジオボタンを指定します。`title`プロパティには、リストアイテムのテキストを指定します。
ラジオボタンのスタイルを変更する
FlutterのRadioウィジェットには、スタイルを変更するためのいくつかのオプションがあります。以下は、ラジオボタンのスタイルを変更する方法の例です。
Column(
children: [
ListTile(
leading: Radio(
value: 1,
groupValue: _selectedValue,
onChanged: (value) {
setState(() {
_selectedValue = value;
});
},
activeColor: Colors.green,
// 選択されたラジオボタンの色
focusColor: Colors.blue,
// ラジオボタンがフォーカスされたときの色
hoverColor: Colors.yellow,
// ラジオボタンがホバーされたときの色
),
title: Text("選択肢1"),
),
ListTile(
leading: Radio(
value: 2,
groupValue: _selectedValue,
onChanged: (value) {
setState(() {
_selectedValue = value;
});
},
activeColor: Colors.green,
focusColor: Colors.blue,
hoverColor: Colors.yellow,
),
title: Text("選択肢2"),
),
],
)上記の例では、activeColor、focusColor、およびhoverColorプロパティを使用して、ラジオボタンの色を変更しています。
ラジオボタンのグループ化
ラジオボタンは、グループ内でのみ一意である必要があります。グループ内で同じgroupValueを持つラジオボタンが複数ある場合、これらのラジオボタンはすべて同じグループに属すると見なされます。
以下は、複数のグループを持つラジオボタンを作成する方法の例です。
class _MyRadioWidgetState extends State<MyRadioWidget> {
int? _selectedValue1 = 1;
int? _selectedValue2 = 3;
@override
Widget build(BuildContext context) {
return Column(
children: [
Text("グループ1"),
ListTile(
leading: Radio(
value: 1,
groupValue: _selectedValue1,
onChanged: (value) {
setState(() {
_selectedValue1 = value;
});
},
),
title: Text("選択肢1"),
),
ListTile(
leading: Radio(
value: 2,
groupValue: _selectedValue1,
onChanged: (value) {
setState(() {
_selectedValue1 = value;
});
},
),
title: Text("選択肢2"),
),
Text("グループ2"),
ListTile(
leading: Radio(
value: 3,
groupValue: _selectedValue2,
onChanged: (value) {
setState(() {
_selectedValue2 = value;
});
},
),
title: Text("選択肢1"),
),
ListTile(
leading: Radio(
value: 4,
groupValue: _selectedValue2,
onChanged: (value) {
setState(() {
_selectedValue2 = value;
});
},
),
title: Text("選択肢2"),
),
],
);
}
}
上記の例では、_selectedValue1と_selectedValue2の2つの異なる変数を使用して、2つの異なるグループのラジオボタンを作成しています。各ラジオボタンは、対応するグループの値を保持するために、それぞれのgroupValueプロパティに異なる変数を割り当てます。
まとめ
これで、FlutterのRadioウィジェットの基本的な使い方と、ラジオボタンをスタイル付けし、グループ化する方法について学びました。これらの例を参考にして、自分のFlutterアプリにラジオボタンを実装してみてください。