MapをColumnやListViewに表示させるときはMap<key, value>よりもList<MapEntry>の方が便利

経緯

  final Map<String, Color> colors = {
    "yellow": Colors.yellow,
    "blue": Colors.blue,
    "red": Colors.red,
    "green": Colors.green,
    "purple": Colors.purple,
  };

上記のようなkey/value形式のデータがあって、これを.map()をつかってColumnに表示させようとしたら

The argument type 'Map' can't be assigned to the parameter List

とエラーになってしまった。

MapはListではないのでダメなんですね

MapEntry

ちょっと調べてみたらいい方法があった
MapEntryというkey/value形式でデータを格納できるものがあるらしい

MapEntryを使うと今回の例だとこうなります

  final List<MapEntry<String, Color>> colors = [
    MapEntry("yellow", Colors.yellow),
    MapEntry("blue", Colors.blue),
    MapEntry("red", Colors.red),
    MapEntry("green", Colors.green),
    MapEntry("purple", Colors.purple),
  ];

MapEntryを使うとcolorsをListとして扱うことができるのでColumnやListViewと相性がよくなりました
.map()の中でも.keyと.valueでkey/valueに触れるのでとても安全ですね

            Column(
              children: colors.map((color) {
                return Container(
                  color: color.value,
                  child: ListTile(
                    contentPadding: EdgeInsets.all(20),
                    title: Text(color.key),
                  ),
                );
              }).toList(),
            ),

最後に

割と普通のこと？なのかもしれないけど今までずっとMap<key, value>を使っていたのでやっと存在に気づけてよかった。
結構知らない便利なクラスやWidetがまだまだある気がする

全体のコードはこちらです