sliver_scroll_performance.dart

import 'package:flutter/material.dart';

const List<double> itemHeights = <double>[
  600, 300, 800, 40, 400, 50, 80, 60, 50, 40, 40, 300, 400, 50, 800, 200, 30,
  500, 80, 700, 40, 160, 50, 400, 80, 200, 500, 100, 80, 40, 200, 60, 600,
];

class ItemSlivers extends StatelessWidget {
  const ItemSlivers({
    super.key,
    required this.startColor,
    required this.endColor,
  });

  final Color startColor;
  final Color endColor;

  @override
  Widget build(BuildContext context) {
    final int itemCount = itemHeights.length;
    return SliverPadding(
      padding: const EdgeInsets.symmetric(horizontal: 8),
      sliver: SliverList(
        delegate: SliverChildBuilderDelegate(
          (BuildContext context, int index) {
            return Card(
              color: Color.lerp(startColor, endColor, index / itemCount)!,
              child: ListTile(
                textColor: Colors.white,
                title: Container(
                  height: itemHeights[index],
                  alignment: Alignment.centerLeft,
                  child: Text('$index: ${itemHeights[index]}'),
                ),
              ),
            );
          },
          childCount: itemCount,
        ),
      ),
    );
  }
}

class SliverListDemo extends StatelessWidget {
  const SliverListDemo({ super.key });

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          ItemSlivers(
            startColor: Colors.yellow,
            endColor: Colors.green,
          ),
        ],
      ),
    );
  }
}

class SliverListDemoApp extends StatelessWidget {
  const SliverListDemoApp({ super.key });

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        useMaterial3: true,
      ),
      debugShowCheckedModeBanner: false,
      home: const SliverListDemo(),
    );
  }
}
void main() {
  runApp(const SliverListDemoApp());
}