How to mimic a natural ball bounce animation in Flutter? - flutter

Question

I'm new to flutter animations and want to animate a natural ball bounce in Flutter. I have an image inside a SizedBox within a Transform.translate, when clicked it begins bouncing using the offset, but whenever it gets to the top it reflects backwards (it feels like it collides with an imaginary wall above). I only want it to reflect only when it's at the bottom and when it gets to the top it starts coming back down, as natural as possible.
class MyApp extends StatelessWidget {
const MyApp({super.key});
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
#override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage>
with SingleTickerProviderStateMixin {
late AnimationController _controller;
late Animation<double> _height;
late Animation _curve;
late Animation<Offset> _offset;
#override
void initState() {
super.initState();
_controller = AnimationController(
duration: const Duration(milliseconds: 1000),
vsync: this,
);
_curve = CurvedAnimation(parent: _controller, curve: Curves.linear, reverseCurve: Curves.linear);
_offset = TweenSequence(<TweenSequenceItem<Offset>>[
TweenSequenceItem<Offset>(
tween: Tween<Offset>(begin: const Offset(0, 0), end: const Offset(0, -40)), weight: 50),
]).animate(_curve as Animation<double>);
_controller.addStatusListener((status) {
if (status == AnimationStatus.completed) {
_controller.reverse();
} else if (status == AnimationStatus.dismissed) {
_controller.forward();
}
});
}
#override
void dispose() {
_controller.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: AnimatedBuilder(
animation: _controller,
builder: (_, __) {
return InkWell(
hoverColor: Colors.transparent,
highlightColor: Colors.transparent,
focusColor: Colors.transparent,
onTap: () => _controller.forward(),
child: Transform.translate(
offset: _offset.value,
child: SizedBox(
// color: Colors.black,
height: 40,
width: 40,
child: Image.asset('lib/ball.png')),
),
);
}),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}
Thanks in advance!