Simple BounceIn Image Flutter Animation - flutter

Question

What i want?
I want to do simple animation with this image.
What does it mean?
If i click on it, it should make smooth for example bounce in animation. Im open in ways through which we can achieve this effect.
What i tried?
I thought AnimatedContainer will get done but curve: parameter is not doing anything.
ps. I am beginner
import 'package:google_fonts/google_fonts.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Poppy App',
theme: ThemeData(
primarySwatch: Colors.brown,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({
Key? key,
}) : super(key: key);
#override
State<MyHomePage> createState() => _MyHomePageState();
}
double _imgwidth = 200;
double _imgheight = 200;
class _MyHomePageState extends State<MyHomePage> {
void poopAnimationIn() async {
setState(() {
_imgheight = 300;
_imgwidth = 300;
});
await Future.delayed(const Duration(milliseconds: 500), () {
setState(() {
_imgheight = 200;
_imgwidth = 200;
});
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
color: const Color.fromARGB(164, 117, 81, 1),
child: Center(
child: GestureDetector(
onTap: () {
poopAnimationIn();
},
child: AnimatedContainer(
curve: Curves.bounceIn,
duration: const Duration(milliseconds: 200),
child: Image.network(
'https://picsum.photos/250?image=9',
width: _imgwidth,
height: _imgheight,
)),
),
),
));
}
}

Answer 1

You need to specify the size for AnimatedContainer and change that size in setState.
Here is the edited code:
I suggest you use other curves like easeIn instead of bounceIn to have a smoother animation
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Poppy App',
theme: ThemeData(
primarySwatch: Colors.brown,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({
Key? key,
}) : super(key: key);
#override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
double initialHeight = 200;
double initialImageHeight = initialHeight;
double expandedImageHeight = 300;
void poopAnimationIn() async {
setState(() {
initialImageHeight = expandedImageHeight;
});
await Future.delayed(const Duration(milliseconds: 500), () {
setState(() {
initialImageHeight = initialHeight;
});
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
color: const Color.fromARGB(164, 117, 81, 1),
child: Center(
child: GestureDetector(
onTap: () async {
poopAnimationIn();
},
child: AnimatedContainer(
height: initialImageHeight,
curve: Curves.bounceIn,
duration: const Duration(milliseconds: 200),
child: Image.network(
'https://picsum.photos/250?image=9',
// width: _imgwidth,
// height: _imgheight,
))),
),
),
// ),
);
}
}