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'),
),
),
),
),
],
),
),
);
}
}
User contributions licensed under CC BY-SA 3.0