単一選択時の基本的な UI、ラジオボタン
ラジオボタンはその名の通り Radio ウィジェットです。 ラベル付きのラジオボタンは RadioListTile です。
「チェックボックスとスイッチ」の時にもいいましたが、「ナントカ・リストタイル」は「ラベル付きナントカ」です。 ここではラベル付きのラジオ (ウィジェット) なので、ラジオリストタイル です。
ラジオボタンは、選択肢が複数あって、そのうちに1つだけ選ぶような場合に使います。
このように3つの選択肢がある場合は、次のようにします。
import 'package:flutter/material.dart';
void main() => runApp(
MaterialApp(
home: MyApp(),
),
);
enum Fruits { Apple, Orange, Grape }
class MyApp extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _State();
}
}
class _State extends State<MyApp> {
var _radVal = Fruits.Apple;
void _onChanged(Fruits value) {
setState(() {
_radVal = value;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Radio Test'),
),
body: Container(
padding: EdgeInsets.all(16.0),
child: Column(
children: <Widget>[
RadioListTile(
title: Text('Orange'),
value: Fruits.Orange,
groupValue: _radVal,
onChanged: _onChanged),
RadioListTile(
title: Text('Apple'),
value: Fruits.Apple,
groupValue: _radVal,
onChanged: _onChanged),
RadioListTile(
title: Text('Grape'),
value: Fruits.Grape,
groupValue: _radVal,
onChanged: _onChanged),
],
),
),
);
}
}
ラジオボタンの選択が変わった時に onChanged ハンドラがコールバックされ、 そのときに value プロパティにセットした値がハンドラに渡されます。