Flutterでドロップダウンメニューを表示する
最終更新日:2023-07-02
Flutterでドロップダウンメニュー(Androidだと Spinner
Webだと select
) を表示するには DropdownButton
を使います。似たようなクラスに DropdownMenu
がありますが、こちらは TextField
の機能もセットになっています。
選択肢を作る
選択肢は DropdownMenuItem
で作ります。
const _items = [
DropdownMenuItem(
value: 'moke',
child: Text('もけ'),
),
DropdownMenuItem(
value: 'piyo',
child: Text('ぴよ'),
),
DropdownMenuItem(
value: 'mallo',
child: Text('まろ'),
),
];
表示する
表示には DropdownButton
を使います。今なにを選択しているかは状態としてもたせ、 onChanged()
で更新します。
class _MyHomePageState extends State<MyHomePage> {
String _value = _items[0].value!;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: DropdownButton(
value: _value,
items: _items,
onChanged: (value) {
setState(() {
_value = value!;
});
},
),
),
);
}
}
要素をタップすると選択肢が表示されます。