ListView 内の要素を Column の中に入れたら全部表示されて焦った話

いつも通りコード書いたつもりなのに
なんか急に重いなと思って FlutterPerformance 開いてみたら
ビビるくらい描画数が多くて焦った

それがこちら

いや、1000回もブン回ってるやんけぇぇぇ

ま、テスト的に for 文で 1000回ブン回してるから別に良いねんけど
ListView の中で回してるから20個くらいの描画のはずだけどなぁと思ってた

正しいコード

ちなみに、本来の ListView の使い方をすれば
20回くらいで終わる。それがこちらのコード↓

dart

class _ListViewTest extends StatelessWidget {
  const _ListViewTest();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Builder(
        builder: (context) {
          return Scaffold(
            appBar: AppBar(),
            body: ListView(
              children: [
                for (var i = 0; i < 100; i++) ListTile(title: Text('Item $i')),
              ],
            ),
          );
        },
      ),
    );
  }
}

やらかしたコード

で、僕がやってしまった問題のコードはこちら

dart

class _ListViewTest extends StatelessWidget {
  const _ListViewTest();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Builder(
        builder: (context) {
          return Scaffold(
            appBar: AppBar(),
            body: ListView(
              children: [
                Column(
                  children: [
                    for (var i = 0; i < 1000; i++)
                      ListTile(title: Text('Item $i')),
                  ],
                ),
              ],
            ),
          );
        },
      ),
    );
  }
}

ListView の中に Column を入れて
その中で for 文を回してしまった

これ、あかんねや。初めて知った。