I wonder how to animate a container widget to leave the screen to the left.

How do I do that?

Thanks!


Solution 1: Josteve

This is a way you can do it with SlideTransition

class SlideContainerToTheLeft extends StatefulWidget {
  @override
  _SlideContainerToTheLeftState createState() =>
      _SlideContainerToTheLeftState();
}

class _SlideContainerToTheLeftState extends State<SlideContainerToTheLeft>
    with SingleTickerProviderStateMixin {
  var tween = Tween<Offset>(begin: Offset.zero, end: Offset(-2, 0))
      .chain(CurveTween(curve: Curves.ease));
  AnimationController animationController;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    animationController =
        AnimationController(vsync: this, duration: Duration(seconds: 2));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SlideTransition(
          position: animationController.drive(tween),
          child: Container(
            width: 300,
            height: 400,
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(20), color: Colors.blue),
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          animationController.forward();
        },
      ),
    );
  }
}

Hope this helps you.