こんにちは!
今回はDropdownButtonFormFieldを使って、itemsの中から選択するコードを紹介したいと思います。
今回も最後まで読んでいただけたら嬉しいです!
1. DropdownButtonFormFieldを使った実装
・ コード
DropdownButtonFormField<String>(//<String>は、選択肢の型を指定します
style: const TextStyle(
fontSize: 14.0,
fontWeight: FontWeight.w400,
color: Color(0xff40536A),
),
//ドロップダウンボタンが選択されていない場合に表示されるテキストを指定しています。
hint: const Text(
"この中からお選びください",
style: TextStyle(
fontSize: 14.0,
fontWeight: FontWeight.w400,
color: Color(0xff40536A),
),
),
//ドロップダウンメニューの選択肢を定義しています。DropdownMenuItemのリストとして提供され、各アイテムは選択肢の値と表示するテキストを持ちます。
items: [
DropdownMenuItem(
value: 'りんご',
child: Text('りんご'),
),
DropdownMenuItem(
value: 'バナナ',
child: Text('バナナ'),
),
DropdownMenuItem(
value: 'オレンジ',
child: Text('オレンジ'),
),
DropdownMenuItem(
value: 'ぶどう',
child: Text('ぶどう'),
),
DropdownMenuItem(
value: 'いちご',
child: Text('いちご'),
),
DropdownMenuItem(
value: 'スイカ',
child: Text('スイカ'),
),
],
//ユーザーがドロップダウンメニューで選択を変更したときに実行されるコールバック関数を指定しています。
onChanged: (String? value) {
setState(() {
selectedValue = value;
});
}),
・ 実装結果
終わりに
今回は実際にDropdownButtonFormFieldを使ってitemsを選択して表示するコードをと実装結果を紹介しました!
今回も記事を見ていただきありがとうございました!