LoginSignup
2
0

【flutter】DropdownButtonFormFieldを使って選択したい

Last updated at Posted at 2024-03-14

こんにちは!
今回は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;
            });
          }),

・ 実装結果

タイトルなし.gif

終わりに

今回は実際にDropdownButtonFormFieldを使ってitemsを選択して表示するコードをと実装結果を紹介しました!
今回も記事を見ていただきありがとうございました!

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0