Flutterでjsonから得て作ったmap配列をドロップダウンボタンにしたい

Question

作った配列でドロップダウンボタンを作りたいですが、エラーが出ます。
以下コードです。

jsonから年収リストを取ります。

"income": 10,

というようなパラメーターで整数だけが返ってきて、

10(200万未満),20(200万～400万),30(400万～600万),40(600万～800万),50(800万～1,000万),60(1,000万～1,500万),70(1,500万～2,000万),80(2,000万～3,000万),90(3,000万～4,000万),100(4,000万～5,000万),110(5,000万以上)

↑のように整数に文字列を紐づけないといけず、フロント側でmapに変換しなければなりません。
Futureでjsonから得た整数を使って、文字列を取り出して、ドロップダウンに使うイメージです。

///フロント側でmapに変換
_incomeList = {
      0: '未選択',
      10: '(200万未満)',
      20: '(200万～400万)',
      30: '(400万～600万)',
      40: '(600万～800万)',
      50: '(800万～1,000万)',
      60: '(1,000万～1,500万)',
      70: '(1,500万～2,000万)',
      80: '(2,000万～3,000万)',
      90: '(3,000万～4,000万)',
      100: '(4,000万～5,000万)',
      110: '(5,000万以上)',
    };

///jsonの整数レスポンスが入る。これをキーとして使う。
int _income;

Future _loadYourIncome() async {
    final completer = Completer<void>();
    await ApiUser.get().then((response) {
      final jsonData = json.decode(utf8.decode(response.bodyBytes));

      setState(() {
        ///incomeに代入
        ///nullで返ってくる場合もあり、その時は0を代入、「未選択」にする
        if (jsonData["income"] == null) {
          print('nullなので0代入');
          _income = 0;
        } else {
          print('nullじゃないのでそのまま代入');
          _income = jsonData["income"];
        }
      });
      completer.complete();
    }).catchError((e) {
      debugPrint('Error' + e.toString());
      completer.complete();
    });
  }

  @override
  void initState() {
    super.initState();
    _loadYourIncome().then((value) => setState(() {}));
  }

  @override
  void setState(Function fn) {
    if (_alreadyDisposed) return;
    super.setState(fn);
  }

  @override
  void dispose() {
    _alreadyDisposed = true;
    super.dispose();
  }

以上を踏まえて、ドロップダウンは以下のように作りました。

DropdownButton<String> _button = DropdownButton<String>(
      value: _incomeList[_income],
      items: _incomeList.entries
          .map<DropdownMenuItem<String>>((MapEntry<int, String> e) {
        return DropdownMenuItem<String>(
          value: "${e.key}",
          child: Text(e.value),
        );
      }).toList(),
      onChanged: (String newValue) {
        setState(() {
          _income = int.parse(newValue);
          print(_incomeChecked);
          // print(newValue);
        });
      },
    );

しかし現状今のままビルドすると、

のエラーが出ます。

以上になります。
このエラーの原因はなんでしょうか？解決策があれば、教えていただければ幸いです。
よろしくお願いします。

Answer 1

エラーの意味は「DropdownButtonのitem.valueとして選択された"未選択"が、存在しないor2つ以上あります」ということです。

以下の部分で、DropdownButtonのitem.valueを、"${e.key}"というようにmapのkey部分で定義しているにも関わらず、選択をvalue: _incomeList[_income],と、mapのvalue部分（"未選択"）としているため、エラーが発生しました。この場合、mapのkey部分の文字列"0"を選択する必要があります。

よって、value: _incomeList[_income],をvalue: "$_income",にすると、正常に動きます。

DropdownButton<String> _button = DropdownButton<String>(
      value: _incomeList[_income],
      items: _incomeList.entries
          .map<DropdownMenuItem<String>>((MapEntry<int, String> e) {
        return DropdownMenuItem<String>(
          value: "${e.key}",
          child: Text(e.value),
        );
      }).toList(),

Comments

[Yariii]

ありがとうございます。動きました！