How to slow down a fling animation in Flutter?

Question

I was playing with the fling animation based on the grid demo in Flutter Gallery. I made the example below work, but the animation plays very fast. I could barely see it unless I slow it down by using timeDilation. Changing the value of velocity doesn't seem to have much effect. Should I look at something else? Thanks!

import 'package:flutter/animation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart' show timeDilation;

const kLogoUrl =
    "https://raw.githubusercontent.com/dart-lang/logos/master/logos_and_wordmarks/dart-logo.png";

class LogoWidget extends StatelessWidget {
  // Leave out the height and width so it fills the animating parent
  build(BuildContext context) {
    return new Container(
        margin: new EdgeInsets.symmetric(vertical: 10.0),
        child: new Image.network(kLogoUrl));
  }
}

class TranslateTransition extends StatelessWidget {
  TranslateTransition({this.child, this.animation});

  Widget child;
  Animation<Offset> animation;

  Widget build(BuildContext context) {
    return new AnimatedBuilder(
        animation: animation,
        builder: (BuildContext context, Widget child) {
          return new Center(
            child: new Transform(
              transform: new Matrix4.identity()
                ..translate(animation.value.dx, animation.value.dy),
              child: new Container(
                height: 100.0,
                width: 100.0,
                child: child,
              ),
            ),
          );
        },
        child: child);
  }
}

class LogoApp extends StatefulWidget {
  LogoAppState createState() => new LogoAppState();
}

class LogoAppState extends State<LogoApp> with TickerProviderStateMixin {
  Animation<Offset> _flingAnimation;
  AnimationController _controller;

  initState() {
    super.initState();
    timeDilation = 5.0;

    _controller = new AnimationController(
      vsync: this,
    );

    _flingAnimation = new Tween<Offset>(
      begin: new Offset(-150.0, -150.0),
      end: new Offset(150.0, 150.0),
    )
        .animate(_controller);

    _controller
      ..value = 0.0
      ..fling(velocity: 0.1)
      ..addListener(() {
//        print(_flingAnimation.value);
      });
  }

  Widget build(BuildContext context) {
    return new TranslateTransition(
        child: new LogoWidget(), animation: _flingAnimation);
  }

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

void main() {
  runApp(new LogoApp());
}

Answer 1

fling uses a SpringSimulation with default parameters, one of which is the spring constant. Even if you start with velocity zero, a spring will spring at a speed determined by the spring constant. So what's happening is that you're going from 0.0 to 1.0 with a pretty tight critically-damped string.

Also, because you're using a NetworkImage, you don't see anything because the image takes longer to load than the animation takes to run.

If you replace LogoWidget with FlutterLogo, you'll see what's happening better.

If you want it to go slower, you can use animateWith instead of fling to pass it a specific SpringSimulation with your own custom parameters.

The existence of fling is a bit of a historical accident. It's designed to be used primarily with AnimationControllers with a lowerBound and upperBound given in pixels, rather than over the 0.0...1.0 default range.