flutter でドロップダウンメニューを辞書から作成したい

前提・実現したいこと

flutter ドロップダウンメニューを作成したくて、現在はその部分をベタ書きでコーディングしていますが
辞書のkey とvalueから作成したい。

ここに質問の内容を詳しく書いてください。
①はじめに書いたベタ書きのコード(これはビルドできる）
→ この何度も書いている DropdownMenuItem の部分を直したい

new DropdownButton<String>(
                          onChanged: (String value)=>popupSelected(value),
                          value: _selected,
                          style: new TextStyle(fontSize:28.0,
                          color: Colors.black,
                          fontWeight: FontWeight.w400,
                          fontFamily: "Roboto"),
                          items: <DropdownMenuItem<String>>[
                            const DropdownMenuItem<String>(value: "0",
                              child: const Text("北海道")),
                            const DropdownMenuItem<String>(value: "1",
                              child: const Text("東京")),
                            const DropdownMenuItem<String>(value: "2",
                              child: const Text("名古屋")),
                          ],
                        ),

②これの value と Text の中身を変数に置き換えたらいいんじゃないかと思ってfor文を入れてみたコード
→ X そもそもこんな書き方出来ないっぽくてエラーが解消出来ませんでした。

new DropdownButton<String>(
                          onChanged: (String value)=>popupSelected(value),
                          value: _selected,
                          style: new TextStyle(fontSize:28.0,
                          color: Colors.black,
                          fontWeight: FontWeight.w400,
                          fontFamily: "Roboto"),
                          items: <DropdownMenuItem<String>>[

                            for(var i = 0 ; i < _locationMap.length ; i++){
                              const DropdownMenuItem<String>(value: '$i',
                               child: const Text(_locationMap['$i'])),
                            }

                          ],
                        ),

③書き方を変えてみました。ますlistを表示してみようと思った。
→ list で設定した文字列を DropdownMenuItem に表示は出来たけど、これだとvalueを設定出来ない。

List<String> _locations = ['北海道', '東京', '名古屋']; 
 .
 .
 .
DropdownButton(
                          value: _selectedLocation,
                          onChanged: (newValue) {
                            setState(() {
                              _selectedLocation = newValue;
                            });
                          },

                          items: _locations.map((location) {
                            return DropdownMenuItem(
                              child: new Text(location),
                            //  value: ???,
                            );
                          }).toList(),

                        ),

④さっきlistで設定した文字列を辞書にしてみた
→ items: _locationMap.map の行と、 }).toList() の行でエラーとなり、ビルド出来ない。

final _locationMap = const {
      '0' : '北海道',
      '1' : '東京',
      '2' : '名古屋',
    };
 .
 .
 .
DropdownButton(
                          value: _selectedLocation,
                          onChanged: (newValue) {
                            setState(() {
                              _selectedLocation = newValue;
                            });
                          },
                          items: _locationMap.map((key, location) { // ←ここ
                            return DropdownMenuItem(
                              child: new Text(location),
                              value: location,
                            );
                          }).toList(), // ←ここ
                        ),

発生している問題・エラーメッセージ

④の _locationMap.map の行
_locationMapの行の下に赤い波線が出ていて、そこにカーソルを合わせるとポップアップが出る。
ポップアップの内容

The return type 'DropdownMenuItem<string>' isn't a 'MapEntry', as defined by anonymous closure.

④の }).toList() の行
.toListの行の下に赤い波線が出ていて、そこにカーソルを合わせるとポップアップが出る。
ポップアップの内容

The method 'tolist' isn't defined for the class 'Map' .
Try correcting the name to the name of an exiting method, or defining a method named 'tolist'.

flutterとdartに慣れておらず、辞書のkeyとvalueを取り出して
順次処理したいだけの事がうまく出来ません。
ご教示お願いいたします。

補足情報（FW/ツールのバージョンなど）

macOS Mojave 10.14.6
Visual Studio Codeから実行
Flutter 1.12.13+hotfix.5
Tools • Dart 2.7.0

行動規範の内容に同意します

回答1件

ベストアンサー

Map.entries.map()を使えばできると思います。
MapからMapEntryのリストを取り出して、DropdownMenuItemに変換する感じでしょうか。

          items: _locationMap.entries.map((entry) {
            return DropdownMenuItem(
              child: Text(entry.value),
              value: entry.key,
            );
          }).toList(),

念のため、動作確認した完全なコードを貼っておきます

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _locationMap = {
    '0': '北海道',
    '1': '東京',
    '2': '名古屋',
  };
  var _selectedLocation = '1';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo'),
      ),
      body: Container(
        child: DropdownButton(
          value: _selectedLocation,
          onChanged: (newValue) {
            setState(() {
              _selectedLocation = newValue;
            });
          },
          items: _locationMap.entries.map((entry) {
            return DropdownMenuItem(
              child: Text(entry.value),
              value: entry.key,
            );
          }).toList(),
        ),
      ),
    );
  }
}

投稿2020/02/09 11:27