FlutterのDropdownButtonとDropdownMenuItemを最大限利用してみた件

DropdownButtonのベース実装

ベースとなる最もシンプルなドロップダウンを作成しました
昨日もデザインもシンプルです

dropdown_button_screen.dart

class DropdownButtonScreen extends StatefulWidget {
  const DropdownButtonScreen({super.key});

  @override
  State<StatefulWidget> createState() => _DropdownButtonScreen();
}

class _DropdownButtonScreen extends State<DropdownButtonScreen> {
  // selectedValueはlistsの中にある値じゃないとエラーになるよ
  // buildより上で変数を宣言しないとドロップダウンから選択するたびに上書きされるよ
  String selectedValue = '月曜日';
  final lists = ['月曜日', '火曜日', '水曜日', '木曜日', '金曜日', '土曜日', '日曜日'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: DropdownButton(
          value: selectedValue,
          items: lists.map((String list) {
            // =>はインデント崩れるからオススメしないよ
            // ,を入れた方が整形した時に見やすいよ
            return DropdownMenuItem(
              value: list,
              child: Text(list),
            );
          }).toList(),
          onChanged: (String? value) {
            setState(() {
              selectedValue = value!;
            });
          },
        ),
      ),
    );
  }
}

DropdownButtonの改修

DropdownButtonとDropdownMenuItemには色々と設定できるので全部実装してみました
それっぽいデザインや機能を実装できましたが、表現できるUIに限りがあるのでContainerなどでラップした方がいいかと思います
DropdownButtonで表示できる文言も制限があるのでかなりシンプルなものでしか向いてなさそうです
PopupMenuButtonで実装した方がいいかもです
詳しくは公式サイトをご覧ください
https://api.flutter.dev/flutter/material/DropdownButton-class.html

DropdownButton配下だけ記載しておきます

dropdown_button_screen.dart

        child: DropdownButton(
          value: selectedValue,
          items: lists.map((String list) {
            return DropdownMenuItem(
              value: list,
              // DropdownMenuItemがタップされた時の行う処理だよ
              onTap: () {
                debugPrint('ドロップダウンメニューアイテムがタップされたよ！');
              },
              // これをfalseにするとタップできなくなるよ
              enabled: true,
              // DropdownMenuItemの表示位置を指定できるよ
              alignment: AlignmentDirectional.bottomEnd,
              child: Text(list),
            );
          }).toList(),
          onChanged: (String? value) {
            setState(() {
              selectedValue = value;
            });
          },
          // ドロップダウンから選択した時のwidgetを指定できるよ
          selectedItemBuilder: (context) {
            return lists.map((String item) {
              return Text(
                item,
                style: const TextStyle(fontWeight: FontWeight.bold),
              );
            }).toList();
          },
          // ヒントを表示するにはselectedValueをString?にする必要があるよ
          hint: const Text('曜日を選んでね！'),
          // itemsかonChangedがnullだと表示されるよ
          disabledHint: const Text('nullになっているよ！'),
          // DropdownButtonがタップされた時の行う処理だよ
          onTap: () {
            debugPrint('ドロップダウンボタンがタップされたよ！');
          },
          // DropdownMenuItemの影を指定できるよ
          elevation: 0,
          // DropdownMenuItemのchildで指定したTextStyleの方が優先されるよ
          style: const TextStyle(
            color: Colors.red,
            fontSize: 25,
          ),
          // DropdownButtonHideUnderlineでも消せるよ
          // underline: const SizedBox(),
          // DropdownButtonをContainerでラップした方が制御しやすいよ
          underline: Container(
            height: 30,
            decoration: const ShapeDecoration(
              shape: RoundedRectangleBorder(
                side: BorderSide(color: Colors.blue),
                borderRadius: BorderRadius.all(Radius.circular(5)),
              ),
            ),
          ),
          // アイコンを表示しないようにもできるよ
          icon: const Icon(Icons.change_circle),
          // itemsかonChangedがnullの時のアイコンの色だよ
          iconDisabledColor: Colors.grey,
          // 通常時のアイコンの色を指定するよ
          iconEnabledColor: Colors.red,
          // アイコンのサイズを指定するよ
          iconSize: 30,
          // ボタンの高さをリストの高さの半分にできるよ
          isDense: true,
          // DropdownButtonを水平方向に広げるよ
          isExpanded: true,
          // 最小値はkMinInteractiveDimensionで指定されているよ（min 48）
          itemHeight: 70,
          // ドロップダウンの背景色を設定するよ
          dropdownColor: Colors.yellow,
          // ドロップダウンの高さウィ指定できるよ（スクロールもできるよ）
          menuMaxHeight: 300,
          // trueだとクリックサウンドを再生できたりするよ(Feedback class参照)
          enableFeedback: true,
          // isExpandedをtrueにしていると無効化されるよ
          // selectedItemBuilderを指定するよ有効化されるよ
          alignment: AlignmentDirectional.bottomEnd,
          // DropdownButtonとDropdownMenuItemを丸く指定できるよ
          borderRadius: const BorderRadius.all(Radius.circular(20)),
          // (下記はたぶんDropdownButtonFormField用)
          // 入力欄のフォーカスの設定するよ
          focusColor: Colors.red,
          // フォーカスの変化などを取得できるよ
          focusNode: FocusNode(),
          // trueだと画面開いた時にフォーカスが当たるよ
          autofocus: true,
        ),