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")
      )
    );
  }
}

Answer 1

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.