備忘録09 Flutter 詰まったところ プルダウン編

概要

プルダウン機能を実装しようとしたときにやり方とデザインに困ったので、残す。

項目

1. ハードコーディング
2. リストから参照
3. マップから参照
4. 少しカスタム

ハードコーディング

選択できる項目を直書きして、ドロップダウンボタンから選択する方法

String isSelectedValue = 'あ';

DropdownButton(
  items: const [
    DropdownMenuItem(
      value: 'あ',
      child: Text('あ'),
    ),
    DropdownMenuItem(
      value: 'い',
      child: Text('い'),
    ),
    DropdownMenuItem(
      value: 'う',
      child: Text('う'),
    ),
    DropdownMenuItem(
      value: 'え',
      child: Text('え'),
    ),
    DropdownMenuItem(
      value: 'お',
      child: Text('お'),
    ),
  ],
  value: isSelectedValue,
  onChanged: (String? value) {
    setState(() {
      isSelectedValue = value!;
    });
  },
),

リストから参照

リストを作成して、その中からドロップダウンボタンで選択する方法

String isSelectedValueByList = 'あ';
List<String> dorpoDownList = ['あ', 'い', 'う', 'え', 'お'];

DropdownButton<String>(
  value: isSelectedValueByList,
  items: dorpoDownList.map((String value) {
    return DropdownMenuItem<String>(
      value: value,
      child: Text(value),
    );
  }).toList(),
  onChanged: (String? newValue) {
    setState(() {
      print(newValue);
      isSelectedValueByList = newValue!;
    });
  },
),

マップから参照

mapを作成し、その中からドロップダウンボタンで選択する方法
keyとvalueを持つため、バック側とフロント側で持ちやすい印象

Map<String, String> dorpoDownMap = {
  '1': 'あ',
  '2': 'い',
  '3': 'う',
  '4': 'え',
  '5': 'お'
};

DropdownButton<String>(
  value: isSelectedValueByMap,
  items: dorpoDownMap.keys.map((String key) {
    return DropdownMenuItem<String>(
      value: key,
      child: Text(dorpoDownMap[key]!),
    );
  }).toList(),
  onChanged: (String? newKey) {
    setState(() {
      isSelectedValueByMap = newKey!;
    });
  },
),

少しカスタム

見た目が気に食わなかったため、少しカスタムした。
mapは上記で作成したものを使用

Container(
  margin: const EdgeInsets.all(10),
  child: DropdownButtonFormField(
    hint: const Text("選択してください"),
    decoration: const InputDecoration(
      contentPadding: EdgeInsets.symmetric(horizontal: 10),
      border: OutlineInputBorder(),
    ),
    items: dorpoDownMap.keys.map((String key) {
      return DropdownMenuItem<String>(
        value: key,
        child: Text(dorpoDownMap[key]!),
      );
    }).toList(),
    onChanged: (value) {
      isSelectedValueByMap = value!;
    },
  ),
),

これから

これにカスタム(そんなに変わってないかも)