[Flutter]ListView.builderでMap(マップ)を使うには？

どうも、ちょげ(@chogetarou)です。

ListView.builderで連想配列であるMapを使う方法を紹介します。

方法

ListView.builderでマップを使うには、「return」する前に「キー」を用意します。

マップの「keys.elementAt(インデックス)」のようにすることで、インデックスに合わせたキーを取得することが出来ます。

itemBuilder: (context, index) {
  var key = _numbers.keys.elementAt(index);
・・・

後は、取得したキーを使って、マップの値にアクセスします。

_sample[key]

また、キー自体も、変数で使うことが出来ます。

以下は、使用例です。

  var _numbers = <String, String>{
    'one': 'イチ',
    'two': 'ニ',
    'three': 'サン',
  };

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ListView.builder(
          itemCount: _numbers.length,
          itemBuilder: (context, index) {
            var key = _numbers.keys.elementAt(index);
            return Card(
              child: ListTile(
                title: Text('$key : ${_numbers[key]}'),
              ),
            );
          },
        ),
      ),
    );
  }