velocity rendering sliver flutter

velocity_rendering.dart

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'dart:async';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Velocity Scroll Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: const VelocitySensitiveListPage(),
    );
  }
}

class VelocitySensitiveListPage extends StatefulWidget {
  const VelocitySensitiveListPage({super.key});

  @override
  State<VelocitySensitiveListPage> createState() =>
      _VelocitySensitiveListPageState();
}

class _VelocitySensitiveListPageState extends State<VelocitySensitiveListPage> {
  late final ScrollController _scrollController;
  bool _isScrollingFast = false;
  final int _itemCount = 1000;
  static const double _itemExtent = 400;
  Timer? _scrollStopTimer;
  final Duration _scrollStopTimeout = const Duration(milliseconds: 150);
  bool _velocityOptimizationEnabled = true;

  @override
  void initState() {
    super.initState();
    _scrollController = ScrollController();
  }

  bool _onScrollNotification(ScrollNotification notification) {
    _scrollStopTimer?.cancel();

    if (!_velocityOptimizationEnabled) {
      return false;
    }

    if (notification is ScrollUpdateNotification) {
      final DragUpdateDetails? dragDetails = notification.dragDetails;

      double currentVelocity = 0;

      if (dragDetails != null) {
        currentVelocity = notification.metrics.axis == Axis.vertical
            ? dragDetails.delta.dy
            : dragDetails.delta.dx;
      }

      final bool currentlyFast =
          currentVelocity.abs() > 0.5 ||
          (dragDetails == null &&
              notification.metrics.extentBefore > 0 &&
              notification.metrics.extentAfter > 0);

      if (currentlyFast != _isScrollingFast) {
        if (mounted) {
          setState(() {
            _isScrollingFast = currentlyFast;
          });
        }
      }

      _scrollStopTimer = Timer(_scrollStopTimeout, () {
        if (mounted && _isScrollingFast) {
          setState(() {
            _isScrollingFast = false;
          });
        }
      });
    } else if (notification is ScrollEndNotification) {
      _scrollStopTimer?.cancel();

      if (mounted && _isScrollingFast) {
        setState(() {
          _isScrollingFast = false;
        });
      }
    } else if (notification is UserScrollNotification) {
      if (notification.direction == ScrollDirection.idle) {
        _scrollStopTimer?.cancel();

        _scrollStopTimer = Timer(_scrollStopTimeout, () {
          if (mounted && _isScrollingFast) {
            setState(() {
              _isScrollingFast = false;
            });
          }
        });
      }
    }

    return false;
  }

  @override
  void dispose() {
    _scrollStopTimer?.cancel();
    _scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions: [
          Padding(
            padding: const EdgeInsets.only(right: 16.0),
            child: Align(
              alignment: Alignment.centerRight,
              child: Row(
                children: [
                  const Text('Velocity Optimization:'),
                  Switch(
                    value: _velocityOptimizationEnabled,
                    onChanged: (bool value) {
                      setState(() {
                        _velocityOptimizationEnabled = value;
                        _isScrollingFast = false;
                      });
                    },
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
      body: NotificationListener<ScrollNotification>(
        onNotification: _onScrollNotification,
        child: CustomScrollView(
          controller: _scrollController,
          slivers: <Widget>[
            SliverFixedExtentList(
              itemExtent: _itemExtent,
              delegate: SliverChildBuilderDelegate((
                BuildContext context,
                int index,
              ) {
                if (_isScrollingFast && _velocityOptimizationEnabled) {
                  return const Placeholder();
                } else {
                  final imageUrl =
                      'https://picsum.photos/id/$index/${_itemExtent.toInt()}/${_itemExtent.toInt()}';

                  return ImagePlaceholder(
                    extent: _itemExtent,
                    imageUrl: imageUrl,
                  );
                }
              }, childCount: _itemCount),
            ),
          ],
        ),
      ),
    );
  }
}

class ImagePlaceholder extends StatelessWidget {
  final double extent;
  final String imageUrl;

  const ImagePlaceholder({
    super.key,
    required this.extent,
    required this.imageUrl,
  });

  @override
  Widget build(BuildContext context) {
    return Image.network(
      imageUrl,
      width: extent,
      height: extent,
      fit: BoxFit.cover,
    );
  }
}