[Flutter]Column(カラム)の要素(item children)を動的(dynamically)に作成するには？

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

Columnの要素を動的に作成する方法を紹介します。

方法
まとめ

方法

Columnの要素を動的に作成する方法は３つあります。

for

１つは、「for文」もしくは「for in文」を使う方法です。

具体的には、Columnの引数「children」のリスト内でfor文を使います。

Column(
  children: [
    for (var i = 0; i < 10; i++)
      Widget(),
  ],
),

リスト内でfor文を使う時は１つだけ条件があり、{}は使えず、１文で完結出来るものとなります。

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            for (var i = 0; i < 10; i++)
              Container(
                height: 70,
                color: i.isOdd ? Colors.blue : Colors.pink,
              ),
          ],
        ),
      ),
    );
  }

map

２つ目は、配列のmapメソッドを使う方法です。

具体的には、List、Set、Mapが持つmapメソッドを使い、全ての要素で処理をし、ウェジェットのリストを返します。

そのリストをColumnの引数「children」に指定します。

Column(
  children: _list
      .map(
        (e) => Widget(),
      )
      .toList(),
),

以下は、使用例です。

  var _numbers = [
    1,
    2,
    3,
    4,
    5,
  ];

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Column(
          children: _numbers
              .map(
                (e) => Container(
                  height: 100,
                  width: double.infinity,
                  color: Colors.blue[100],
                  child: Text('$e'),
                  alignment: Alignment.center,
                ),
              )
              .toList(),
        ),
      ),
    );
  }

[Dart]リスト(List)でmapメソッドを使う方法

リストで「mapメソッド」を使う方を解説します。

関数

３つ目は、関数を使う方法です。

具体的には、表示するウェジェットのリストを戻り値とする関数を作ります。

  List<Widget> _createList() {
    ~~~リストの作成~~~
    return WidgetList();
  }

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Column(
          children: _createList(),
        ),
      ),
    );
  }

  List<Widget> _createList() {
    var _list = <Widget>[];

    for (var i = 0; i < 10; i++) {
      _list.add(
        Container(
          height: 70,
          width: double.infinity,
          color: Colors.green[100],
          child: Text('$i'),
          alignment: Alignment.center,
        ),
      );
    }

    return _list;
  }