Flutterの繰り返しでTextを表示させたい

Question

タイトルの通りです。
FlutterでRowやColumn等の配下のTextに繰り返し処理（for）を使える方法を探しています。

やりたいことは以下の通りです。

class hogehoge extends StatefulWidget{
  中略
  @override
  _hogehogeState createState() => _hogehogeState(
  );
}
class _hogehogeState extends State<hogehoge>{
   _hogehogeState({
      中略
  });
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child:Column(
          children[
//この部分をforで出力できるようにしたいここから
            Text('1'),
            Text('2'),
            Text('3'),
            Text('4'),
//この部分をforで出力できるようにしたいここまで
          ],
        ),
      ),
    );
  }

①以下のコードではエラーとなってしまいました。

class hogehoge extends StatefulWidget{
  中略
  @override
  _hogehogeState createState() => _hogehogeState(
  );
}
class _hogehogeState extends State<hogehoge>{
   _hogehogeState({
      中略
  });
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child:Column(
          children[
//この部分をforで出力できるようにしたいここから
//この書き方ではエラーになってしまうここから
            for(int i = 0; i < 5; i++){
              Text(i.toString()),
            }
//この書き方ではエラーになってしまうここまで
//この部分をforで出力できるようにしたいここまで
          ],
        ),
      ),
    );
  }

②以下のコードではエラーにはなりませんでしたがおかしな出力結果となってしまいました。

class hogehoge extends StatefulWidget{
  中略
  @override
  _hogehogeState createState() => _hogehogeState(
  );
}
class _hogehogeState extends State<hogehoge>{
   _hogehogeState({
      中略
  });
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child:Column(
          children[
//この部分を繰り返し出力できるようにしたいここから
            Text('$_hogehoge100'),
//この部分を繰り返し出力できるようにしたいここまで
          ],
        ),
      ),
    );
   _hogehoge100(){
    setState((){
      for(int i = 0; i < 5; i++){
        Text(i.toString());
      }
    });
   }
  }

上記の出力結果：
Closure: ()=> dynamic from Function '_hogehoge100@550105623':.

---

上記の通りエラーやおかしな出力結果となってしますのでTextを繰り返し出力させる方法がありましたらご教示ください

Answer 1

この場合は collection-for を使うのが効率的で可読性も高いと思います。

例1

return Scaffold(
      body: Center(
        child: Column(
          children: [
            for (var i = 1; i <= 4; i++) Text('$i'),
          ],
        ),
      ),
    );

例2

final numbers = [1, 2, 3, 4];

    return Scaffold(
      body: Center(
        child: Column(
          children: [
            for (var number in numbers) Text('$number'),
          ],
        ),
      ),
    );

Comments

[omochi0613]

ご回答ありがとうございます。
全く手を付けれていなかったので時間を見つけて上記を試してみたいと思います。

Answer 2

以下のように、Text Widgetのリストを返すメソッドを用意すればいいと思います

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          children: buildTextList(),
        ),
      ),
    );
  }
  
  buildTextList() {
    final textList = <Widget>[];
    for (int i = 0; i < 5; i++) {
      textList.add(Text(i.toString()));
    }
    return textList;
  }
}

DartPadの動くサンプルです

Comments

[omochi0613]

ご回答ありがとうございます。
試してみます。