简体   繁体   中英

Moving an image using AnimationPositioned

I'm trying to move an image from the center to a new position (50,10) using AnimatedPositioned. Following is my code

class _SplashScreenState extends State<SplashScreen> {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Color(0xFFFFFFFF),
      child: Stack(
        children: [
          AnimatedPositioned(
            duration: Duration(seconds: 3),
            child: Align(
              alignment: Alignment.bottomCenter,
              child: Container(
                child: Image(
                  image: AssetImage('images/img.png'),
                  width: 30,
                  height: 30,
                ),
              ),
            ),
            top: 50,
            left: 10,
          )
        ],
      ),
    );
  }

For some reason, the above code doesn't do any animation and the image is not centered initially before moving to the top left. How can I be able to fix it?

UPDATE:

I have tried AnimatedAlign as well,

return Container(
      color: Color(0xFFFFFFFF),
      child: AnimatedAlign(
        duration: Duration(seconds: 3),
        alignment: Alignment(50, 10),
        curve: Curves.bounceOut,
        child: Image(
          image: AssetImage('images/img.png'),
          width: 30,
          height: 30,
        ),
      ),
    );

For some reason, the image is still not moving

replace with below code. this works for me. :)

class _SplashScreenState extends State<SplashScreen>
    with TickerProviderStateMixin {
  AnimationController _animationController;
  Animation _animation;

  @override
  void initState() {
    _animationController =
        AnimationController(vsync: this, duration: Duration(seconds: 3));
    _animation = Tween<Offset>(begin: Offset(0.5, 0.5), end: Offset.zero)
        .animate(_animationController);
    _animationController.forward().whenComplete(() {
      // when animation completes, put your code here
    });
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Stack(
          alignment: Alignment.center,
          fit: StackFit.loose,
          children: <Widget>[
            // left = x value, top = y value;
            // to set last position (50,10) top:50, left:10, end _animation Offset.zero
            Positioned(
              top: 50,
              left: 10,
              child: SlideTransition(
                position: _animation,
                child: AnimatedContainer(
                  height: MediaQuery.of(context).size.height,
                  width: MediaQuery.of(context).size.width,
                  alignment: Alignment.topLeft,
                  duration: Duration(seconds: 0),
                  child: Image(
                    height: 50,
                    width: 50,
                    image: AssetImage('assets/img.png'),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM