1

First of all I'm using flutter Backdrop but this question is about animation, not specifically backdrop.

See how when I scroll up just a little the top hides all of it right away? it jumps up and down upon scrolling. Watch this:

scroll jump animation

So What I'd rather do is move up the view with the users scrolling, in lockstep, rather than playing a full animation to make it happen. Unfortunately, I really have no idea how to do this.

I can show you what I have now, but I suspect I'll need to overhaul the whole thing:

First, I have a NotificationListener to find out when the user starts scrolling. As soon as the user starts scrolling a whole animation plays to revealBackLayer or concealBackLayer:

  @override
  Widget build(BuildContext context) {
  return ...
    NotificationListener<UserScrollNotification>(
      onNotification: visibilityOfSendReceive,
      child: TransactionList(...)),
  ...;

...

  bool visibilityOfSendReceive(notification) {
    if (notification.direction == ScrollDirection.forward) {
      Backdrop.of(components.navigator.routeContext!).revealBackLayer();
    } else if (notification.direction == ScrollDirection.reverse) {
      Backdrop.of(components.navigator.routeContext!).concealBackLayer();
    }
    return true;
  }

Now, we get into the Backdrop package code where it has the animation guts. This is just part of what it feels like I'll have to overhaul to get this to work, but I'm not sure what entirely needs replacing:

Backdrop code:

  void revealBackLayer() {
    if (isBackLayerConcealed) {
      animationController.animateBack(-1);
    }
  }

  void concealBackLayer() {
    if (isBackLayerRevealed) {
      animationController.animateTo(1);
    }
  }
...
  TickerFuture animateBack(double target, { Duration? duration, Curve curve = Curves.linear }) {
    assert(() {
      if (this.duration == null && reverseDuration == null && duration == null) {
        throw FlutterError(
          'AnimationController.animateBack() called with no explicit duration and no default duration or reverseDuration.\n'
          'Either the "duration" argument to the animateBack() method should be provided, or the '
          '"duration" or "reverseDuration" property should be set, either in the constructor or later, before '
          'calling the animateBack() function.',
        );
      }
      return true;
    }());
    assert(
      _ticker != null,
      'AnimationController.animateBack() called after AnimationController.dispose()\n'
      'AnimationController methods should not be used after calling dispose.',
    );
    _direction = _AnimationDirection.reverse;
    return _animateToInternal(target, duration: duration, curve: curve);
  }

There's so much more animation code in Backdrop, I'm not sure what else to show... here's the whole thing: scaffold.dart

Ironically, the main thing I was trying to avoid by leveraging the Backdrop package was dealing with this animation stuff... c'est la vie.

If you could just give me any examples of animations in lockstep with scrolling, or anything like that it would help thanks!

MetaStack
  • 3,266
  • 4
  • 30
  • 67

0 Answers0