やりたいこと

今回はドロップダウンリストを実装していきます。
このような見た目になるのが理想です。

開発環境

MacOS Monterey 12.4
Android Studio
Flutter 3.0.3
Dart 2.17.6

実装方法

今回はパッケージのインポートは特に必要なく、widgetのみで作ることが可能です。
ドロップダウンリストの実装には、DropdownButtonウィジェットを使用します。

選択した値を変数に保存して表示する必要があるため、まず変数を定義します。

main.dart

    String? isSelectedItem;

その上で見た目の記述に移ります。
DropdownButtunの中にDropdownMenuItemで選択肢を指定します。
このとき、childとvalue両方記述する必要があります。

main.dart

    child: DropdownButton(
                items: const [
                  DropdownMenuItem(
                    child: Text('島根県'),
                    value: '島根県',
                  ),
                  DropdownMenuItem(
                    child: Text('鳥取県'),
                    value: '鳥取県',
                  ),
                  DropdownMenuItem(
                    child: Text('山口県'),
                    value: '山口県',
                  ),
                ],
             )

そして、onChangedしたときに値をsetStateすることで、選択した値を表示してあげることができます。

main.dart

    onChanged: (String? value) {
                  setState(() {
                    isSelectedItem = value;
                  });
                  debugPrint(isSelectedItem);
                },
                value: isSelectedItem,

まとめると、こんな感じ。
ヒントテキストも指定できます。

main.dart

    Container(
              margin: const EdgeInsets.only(top: 40),
              padding: const EdgeInsets.only(left: 80),
              width: 300,
              color: Colors.white,
              child: DropdownButton(
                hint: Text('選択してください'),
                items: const [
                  DropdownMenuItem(
                    child: Text('島根県'),
                    value: '島根県',
                  ),
                  DropdownMenuItem(
                    child: Text('鳥取県'),
                    value: '鳥取県',
                  ),
                  DropdownMenuItem(
                    child: Text('山口県'),
                    value: '山口県',
                  ),
                ],
                onChanged: (String? value) {
                  setState(() {
                    isSelectedItem = value;
                  });
                  debugPrint(isSelectedItem);
                },
                value: isSelectedItem,
              ),
            ),

そうすると、画面はこのような見た目になるはずです。
見づらいためbackgroundColorにgreenを指定しています。

実際の画面

値が選択できて、表示もできることがわかります。

別記事で紹介したshared_preferencesを使えば、選択した値の保存も可能です。

https://qiita.com/yooooda/items/ebc4e8f6e42d900f3b5e

おわりに

ドロップダウンリストは、入力フォームなどで使う機会があるかと思います。他のWidgetと組み合わせるとかなり幅が広がるのではないでしょうか。
この記事が参考になれば嬉しいです(￣▽￣)

コード全文

main.dart

import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String? isSelectedItem2;
  static const keyTeam2 = 'team2';

  @override
  void initState() {
    super.initState();
    Future(() async {
      await _getData();
    });
  }

  //保存
  Future<void> _setData() async {
    final prefs = await SharedPreferences.getInstance();
    await prefs.setString(keyTeam2, isSelectedItem2!);
  }

  //読み込み
  Future<void> _getData() async {
    final prefs = await SharedPreferences.getInstance();
    setState(() {
      isSelectedItem2 = prefs.getString(keyTeam2); //キーに紐付けた値を変数に代入
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.green,
      appBar: AppBar(
        title: Text("ドロップダウンリスト"),
        centerTitle: true,
      ),
      body: Center(
        child: Column(
          children: [
            Container(
              margin: const EdgeInsets.only(top: 40),
              padding: const EdgeInsets.only(left: 80),
              width: 300,
              color: Colors.white,
              child: DropdownButton(
                hint: Text('選択してください'),
                items: const [
                  DropdownMenuItem(
                    child: Text('島根県'),
                    value: '島根県',
                  ),
                  DropdownMenuItem(
                    child: Text('鳥取県'),
                    value: '鳥取県',
                  ),
                  DropdownMenuItem(
                    child: Text('山口県'),
                    value: '山口県',
                  ),
                ],
                onChanged: (String? value) {
                  setState(() {
                    isSelectedItem2 = value;
                  });
                  debugPrint(isSelectedItem2);
                },
                value: isSelectedItem2,
              ),
            ),
            Container(
                margin: const EdgeInsets.only(top: 40),
                child: SizedBox(
                  width: 150,
                  height: 50,
                  child: ElevatedButton(
                    child: const Text('保存'),
                    style: ElevatedButton.styleFrom(
                      primary: Colors.orange,
                      onPrimary: Colors.white,
                    ),
                    onPressed: () {
                      _setData();
                      ScaffoldMessenger.of(context).showSnackBar(
                        SnackBar(
                          duration: const Duration(seconds: 5),
                          content: Text('保存しました'),
                          action: SnackBarAction(
                            label: '閉じる',
                            onPressed: () {},
                          ),
                        ),
                      );
                    },
                  ),
                )),
          ],
        ),
      ),
    );
  }
}