ListView.builder example

main.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Material(
        child: PerformanceMediumDemo(),
      ),
    );
  }
}

class _ListItem extends StatefulWidget {
  final int index;

  _ListItem({required this.index}) {
    print('creating list item $index');
  }

  @override
  _ListItemState createState() {
    // print('creating list item state $index');
    return _ListItemState();
  }
}

class _ListItemState extends State<_ListItem> {
  @override
  Widget build(BuildContext context) {
    print('building list item ${widget.index}');
    return Container(height: 500, child: Center(child: Text(widget.index.toString())));
  }
}

class PerformanceMediumDemo extends StatefulWidget {
  @override
  _PerformanceMediumDemoState createState() => _PerformanceMediumDemoState();
}

class _PerformanceMediumDemoState extends State<PerformanceMediumDemo> {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemBuilder: (context, index) {
        return _ListItem(index: index);
      },
      itemCount: 8,
    );
  }
}