How to animate AnimatedAlign by Curve in Flutter - animation

Question

I want bubble to move smoothly between edges of the screen tracking random curves.
This is the code I have
class BubbleAnimator extends StatefulWidget {
const BubbleAnimator({Key key}) : super(key: key);
#override
_BubbleAnimatorState createState() => _BubbleAnimatorState();
}
class _BubbleAnimatorState extends State<BubbleAnimator> {
double x;
double y;
#override
void initState() {
super.initState();
x = math.Random().nextDouble()*2-1;
y = math.Random().nextDouble()*2-1;
}
#override
Widget build(BuildContext context) {
return Bubble(
x: x,
y: y,
);
}
}
class Bubble extends StatelessWidget {
final double x;
final double y;
const Bubble({Key key, this.x, this.y}) : super(key: key);
#override
Widget build(BuildContext context) {
return AnimatedAlign(
duration: Duration(milliseconds: 300),
alignment: Alignment(x, y),
child: GestureDetector(
onTap: () {
print("tapped");
},
child: AnimatedContainer(
duration: Duration(milliseconds: 300),
decoration:
BoxDecoration(shape: BoxShape.circle, color: Colors.blue),
height: 30,
width: 30,
)),
);
}
}
How could I make my BubbleAnimator to move by curve?
For example, let my bubble shows up in the middle of the screen. Bubble then moves toward random edge of screen by surfing some smooth curve. Hitting the edge bubble then changes it's direction to some other edge tracking another unpredictable curve.

Answer 1

AnimatedAlign like any other Animated Widget (AnimatedContainer, etc) needs to be inside a StatefulWidget.
Your x and y values can't be final as they need to change to animate your Alignment.
Either move your BubbleWidget logic inside your BubbleAnimator or move everything to Bubble and convert that one into a StatefulWidget.
You'd need to call setState every time you change your x and y variables.