Paused Whilst Scrolling- by Simon Lightfoot - Humpday Q&A :: 28th February 2024 #Flutter #Dart - https://www.youtube.com/watch?v=m1ytM8iBGHY

humpday_280224-2.dart

// MIT License
//
// Copyright (c) 2023 Simon Lightfoot
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in all
// copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.
//
import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(
    debugShowCheckedModeBanner: false,
    home: ScrollScreen(),
  ));
}

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

  @override
  State<ScrollScreen> createState() => _ScrollScreenState();
}

class _ScrollScreenState extends State<ScrollScreen> {
  final _controller = SmoothScrollController();

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('No animation on Hover!'),
      ),
      body: SingleChildScrollView(
        controller: _controller,
        child: const Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            PausedWhilstScrolling(
              child: AnimateItemWidget(
                colorSet: (Colors.green, Colors.blue),
              ),
            ),
            PausedWhilstScrolling(
              child: AnimateItemWidget(
                colorSet: (Colors.purple, Colors.cyan),
              ),
            ),
            PausedWhilstScrolling(
              child: AnimateItemWidget(
                colorSet: (Colors.yellow, Colors.brown),
              ),
            ),
            PausedWhilstScrolling(
              child: AnimateItemWidget(
                colorSet: (Colors.grey, Colors.orange),
              ),
            ),
            PausedWhilstScrolling(
              child: AnimateItemWidget(
                colorSet: (Colors.green, Colors.blue),
              ),
            ),
            PausedWhilstScrolling(
              child:  AnimateItemWidget(
                colorSet: (Colors.purple, Colors.cyan),
              ),
            ),
            PausedWhilstScrolling(
              child: AnimateItemWidget(
                colorSet: (Colors.yellow, Colors.brown),
              ),
            ),
            PausedWhilstScrolling(
              child: AnimateItemWidget(
                colorSet: (Colors.grey, Colors.orange),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class PausedWhilstScrolling extends StatelessWidget {
  const PausedWhilstScrolling({
    super.key,
    required this.child,
  });

  final Widget? child;

  @override
  Widget build(BuildContext context) {
    final notifier = Scrollable.of(context).position.isScrollingNotifier;
    return ValueListenableBuilder(
      valueListenable: notifier,
      builder: (BuildContext context, bool isScrolling, Widget? child) {
        return IgnorePointer(
          ignoring: isScrolling,
          child: TickerMode(
            enabled: !isScrolling,
            child: child!,
          ),
        );
      },
      child: child,
    );
  }
}

class AnimateItemWidget extends StatefulWidget {
  const AnimateItemWidget({
    super.key,
    required this.colorSet,
  });

  final (Color start, Color end) colorSet;

  @override
  State<AnimateItemWidget> createState() => _AnimateItemWidgetState();
}

class _AnimateItemWidgetState extends State<AnimateItemWidget> {
  bool _isHovered = false;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: InkWell(
        onTap: () {},
        onHover: (event) => setState(() => _isHovered = event),
        child: AnimatedOpacity(
          duration: Durations.medium1,
          opacity: _isHovered ? 0.5 : 1,
          child: AnimatedContainer(
            height: 300,
            duration: Durations.medium1,
            decoration: BoxDecoration(
              color: _isHovered ? widget.colorSet.$1 : widget.colorSet.$2,
            ),
          ),
        ),
      ),
    );
  }
}

// -- from: https://gist.github.com/slightfoot/201487d4b0eb2b6b0ee68eeb0e4cac12

class SmoothScrollController extends ScrollController {
  SmoothScrollController({
    super.initialScrollOffset,
    super.keepScrollOffset,
    super.debugLabel,
    this.velocityMultiplier = 5,
  });

  final double velocityMultiplier;

  @override
  ScrollPosition createScrollPosition(ScrollPhysics physics,
      ScrollContext context, ScrollPosition? oldPosition) {
    return SmoothScrollPositionWithSingleContext(
      velocityMultiplier: velocityMultiplier,
      physics: physics,
      context: context,
      initialPixels: initialScrollOffset,
      keepScrollOffset: keepScrollOffset,
      oldPosition: oldPosition,
      debugLabel: debugLabel,
    );
  }
}

class SmoothScrollPositionWithSingleContext
    extends ScrollPositionWithSingleContext {
  SmoothScrollPositionWithSingleContext({
    required this.velocityMultiplier,
    required super.physics,
    required super.context,
    super.initialPixels,
    super.keepScrollOffset,
    super.oldPosition,
    super.debugLabel,
  });

  final double velocityMultiplier;

  @override
  void pointerScroll(double delta) {
    double velocity =
        ((activity?.velocity ?? 0.0) + (delta * velocityMultiplier))
            .clamp(-physics.maxFlingVelocity, physics.maxFlingVelocity);
    goBallistic(velocity);
  }
}