Flutter slideTransition is not animating

Question

So I'm trying to create a trivial slide transition element in flutter and I'm having some difficulty. What the below does is wait for the animation time, and then just display the Text("hello there sailor"). I don't know why this is not animating - it seems very similar to this previous post that has a trivial example (Sliding animation to bottom in flutter).

This is how I call the below code: DeleteCheck(offsetBool: widget.model.deleteNotify, widthSlide: 0.50*width100) where double width100 = MediaQuery.of(context).size.width;.

Does anyone see what I am doing wrong?

class DeleteCheck extends StatefulWidget{

  final offsetBool;
  final double widthSlide;

  DeleteCheck({
    Key key, 
    this.offsetBool, 
    this.widthSlide
  }): super(key: key);

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

class _MyDeleteCheck extends State<DeleteCheck> with TickerProviderStateMixin {
  AnimationController _controller;
  Animation<Offset> _offsetFloat; 

  @override
  void initState() {
    super.initState();

    _controller = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 1),
    );

    _offsetFloat = Tween<Offset>(begin: Offset(widget.widthSlide, 0.0), end: Offset.zero)
        .animate(_controller);

    _offsetFloat.addListener((){
      setState((){});
    });

    _controller.forward();

  }

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

  @override
  Widget build(BuildContext context) {
    double height100 = MediaQuery.of(context).size.height;
    double width100 = MediaQuery.of(context).size.width;
    return new SlideTransition(
      position: _offsetFloat,
      child: Container(
        color: Colors.cyan,
        width: 0.525*width100-3.0,
        child: Text("hello there sailor")
      )
    );
  }
}

Solution

I have good news for you! Your code is working! :) The animation looks like it is not happening, because the distance it moves is huge. The Offset, passed to the SlideTransition, is relative to its childs size. For example your child has width: 100.0 and you offset with Offset(2.0, 0.0), your child will have moved 200.0 pixels to the right.

Just try to change begin: Offset(widget.widthSlide, 0.0), end: Offset.zero to begin: Offset(2.0, 0.0), end: Offset.zero. You'll see the text slowly animating from the right to the center of the screen. Therefore you just need to adjust your parameterisation.

Anyway here are some additional suggestions for optimizing your code:

• If you are using prebuilt AnimatedWidgets like the SlideTransition, you do not need to call addListener with setState on the controller. The AnimatedWidget takes care of it by itself. Hence you can remove the follwing lines:

lines:

_offsetFloat.addListener((){
  setState((){});
});

• Also it is not necessary to call const constructors. You can just leave this keyword out like new. The compiler will optimize and choose the right constructor in each case.

Comments

[Admin]

I hope it's obvious to everyone why simply changing it to Offset(2.0,0.0) is a bad solution. How would this behave on arbitrary screen size? Let's say you're running your App on an iPad Pro, or maybe you're compiling for Desktop and it's running on a 34" monitor. The Offset now needs to be much more than Offset(2.0,0.0).....

[Admin]

That's not available when the app loads... nor do you know the height (or width) of all sub-widgets. Some of the components in flutter tend to auto-size themselves... So how would you go about knowing the exact offset you need? Even if you could get the MediaQuery at app load (which requires an akward Future) ... then you'd still somehow need to know the exact height/width of your widget in order to properly compute the correct offset. This is a pretty terrible way of doing this. Constraints would be a much more explicit and intuitive approach. Not a criticism of your solution! Flutter.