/// {@template flutter.widgets.list_view.enableItemExtentsCaching}
  /// Whether to cache the main axis extents of all laid out children. The
  /// cached data will be used to calculate which children will be loaded during
  /// the 'Lazy Loading' phase.
  ///
  /// If true, the main axis extent of child will be cached as
  /// index/(key, extent) pairs when the child first laid out. If the [Key] of
  /// the item widget changes after caching, the corresponding cached extent
  /// will be removed and the new extent will be cached after layout.
  ///
  /// If false, the main axis extents of children will not be cached and all the
  /// previously cached data will be cleared.
  ///
  /// The default is false.
  ///
  /// This caching mechanism is suitable for scenarios where the main axis extents
  /// of children do not change or change infrequently during its life cycle.
  /// Using cached extent dimensions will improve scrolling performance,
  /// especially in scenarios that the scroll position changes drastically,
  /// as it will significantly reduce the layout times if the children
  /// have been laid out before.
  ///
  /// If the main axis extent of child at a certain index changes, the [Key] of
  /// the item widget needs to change to drive the framework to invalidate
  /// this child's cached value.
  ///
  /// All cached data will be cleared automatically if [scrollDirection] or
  /// [SliverConstraints.crossAxisExtent] changed.
  ///
  /// This has no effect if the extent of the children is predetermined,
  /// for example, the [itemExtent], [itemExtentBuilder] or [prototypeItem] have
  /// a non-null value, as they are already efficient.
  /// {@endtemplate}
  final bool enableItemExtentsCaching;

import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
final scrollController = ScrollController(initialScrollOffset: childCount * 30);
final childCount = 10000;
void main() {
  runApp(
    MaterialApp(
      showPerformanceOverlay: true,
      scrollBehavior: MyScrollBehavior(),
      home: Scaffold(
        body: const ExampleApp(),
        floatingActionButton: FloatingActionButton(onPressed: () {
          if (scrollController.offset < 100) {
            scrollController.animateTo(
              childCount * 20,
                duration: const Duration(seconds: 1),
                curve: Curves.linear,
            );
          } else {
            scrollController.animateTo(
              0,
              duration: const Duration(seconds: 1),
              curve: Curves.linear,
            );
          }
        },),
      ),
    ),
  );
}

class ExampleApp extends StatefulWidget {
  const ExampleApp({Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return ExampleAppState();
  }
}

class ExampleAppState extends State<ExampleApp> {

  @override
  Widget build(BuildContext context) {
    return Scrollbar(
      thumbVisibility: true,
      controller: scrollController,
      child: ListView.builder(
        cacheExtent: 250,
        // scrollDirection: Axis.horizontal,
        controller: scrollController,
        itemCount: childCount,
        enableItemExtentsCaching: true,
        // itemExtent: 25.0,
        // itemExtentBuilder: (int index, SliverLayoutDimensions dimensions) {
        //   return 10;
        // },
        // itemExtentBuilder: (int index, SliverLayoutDimensions dimensions) {
        //   if (index % 2 == 0) {
        //     return 50;
        //   } else {
        //     return 100;
        //   }
        // },
        itemBuilder: (BuildContext context, int index) {
          var color = Colors.yellow;
          if (index % 2 == 0) {
            color = Colors.red;
          }

          return ColoredBox(
            color: color,
            child: Center(
              child: Text('Item $index'),
            ),
          );
        },
      ),
    );
  }
}

class MyScrollBehavior extends MaterialScrollBehavior {
  @override
  Widget buildScrollbar(
      BuildContext context, Widget child, ScrollableDetails details) {
    return child;
  }

  @override
  Set<PointerDeviceKind> get dragDevices => <PointerDeviceKind>{
    PointerDeviceKind.touch,
    PointerDeviceKind.mouse,
  };
}