Flutter GridView Item Click Animation - flutter

Question

Grid view item animation
I want individual grid items to animate on click. But on clicking an item, all the items animate simultaneously. How to fix this?
I want individual grid items to animate on click. But on clicking an item, all the items animate simultaneously. How to fix this?
I want individual grid items to animate on click. But on clicking an item, all the items animate simultaneously. How to fix this?
I want individual grid items to animate on click. But on clicking an item, all the items animate simultaneously. How to fix this?
class ChoosePetState extends State with TickerProviderStateMixin
{
late AnimationController _animationController;
late Animation<double> _animation;
#override
void initState()
{
super.initState();
_animationController = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 500),
);
_animation =
Tween<double>(begin: 1.0, end: 1.2).animate(_animationController);
_animation.addStatusListener((status) {
if (status == AnimationStatus.completed) {
_animationController.reverse();
}
});
}
#override
Widget build(BuildContext context)
{
SystemChrome.setSystemUIOverlayStyle(
const SystemUiOverlayStyle(statusBarColor: CustomColor.mailColor));
return SafeArea(
child: Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverToBoxAdapter(
child: SizedBox(
width: double.infinity,
child: Padding(
padding: const EdgeInsets.fromLTRB(20.0, 20.0,20.0,30.0),
child: Text(
Strings.choosePet,
style: GoogleFonts.firaSans(
fontSize: 32.0,
fontWeight: FontWeight.bold,
color: CustomColor.colorPrimaryDark.withOpacity(0.7),
),
),
),
),
),
SliverPadding(
padding: const EdgeInsets.fromLTRB(10.0,0.0,10.0,30.0),
sliver: SliverGrid(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
childAspectRatio: 0.91,
mainAxisSpacing: 1.0,
crossAxisSpacing: 1.0,
),
delegate: SliverChildBuilderDelegate(
(context, index) {
return Card(
clipBehavior: Clip.antiAliasWithSaveLayer,
shape: const CircleBorder(),
elevation: 5.0,
shadowColor: CustomColor.mailColor,
child: InkResponse
(
onTap: (){
_animationController.forward();
},
child: ScaleTransition(
scale: _animation,
child: Image.asset(
list[index].url,
fit: BoxFit.cover,
height: 70.0,
width: 70.0,
),
),
),
);
},
childCount: list.length,
),
),
),
],
),
),
);
}
}

Answer 1

you can use my code for answer :
here i used onTapIndex where i can update this value when onclick and that index match then only that widget is animated
class ChoosePetState extends State with TickerProviderStateMixin
{
late AnimationController _animationController;
late Animation<double> _animation;
int onTapIndex = -1;
#override
void initState()
{
super.initState();
_animationController = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 500),
);
_animation =
Tween<double>(begin: 1.0, end: 1.2).animate(_animationController);
_animation.addStatusListener((status) {
if (status == AnimationStatus.completed) {
_animationController.reverse();
}
});
}
#override
Widget build(BuildContext context)
{
SystemChrome.setSystemUIOverlayStyle(
const SystemUiOverlayStyle(statusBarColor: CustomColor.mailColor));
return SafeArea(
child: Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverToBoxAdapter(
child: SizedBox(
width: double.infinity,
child: Padding(
padding: const EdgeInsets.fromLTRB(20.0, 20.0,20.0,30.0),
child: Text(
Strings.choosePet,
style: GoogleFonts.firaSans(
fontSize: 32.0,
fontWeight: FontWeight.bold,
color: CustomColor.colorPrimaryDark.withOpacity(0.7),
),
),
),
),
),
SliverPadding(
padding: const EdgeInsets.fromLTRB(10.0,0.0,10.0,30.0),
sliver: SliverGrid(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
childAspectRatio: 0.91,
mainAxisSpacing: 1.0,
crossAxisSpacing: 1.0,
),
delegate: SliverChildBuilderDelegate(
(context, index) {
return Card(
clipBehavior: Clip.antiAliasWithSaveLayer,
shape: const CircleBorder(),
elevation: 5.0,
shadowColor: CustomColor.mailColor,
child: InkResponse
(
onTap: (){
setState(() {
onTapIndex = index;
});
_animationController.forward();
},
child: onTapIndex == index ? ScaleTransition(
scale: _animation,
child: Image.network(
list[index],
fit: BoxFit.cover,
height: 70.0,
width: 70.0,
),
) : Image.network(
list[index],
fit: BoxFit.cover,
height: 70.0,
width: 70.0,
),
),
);
},
childCount: list.length,
),
),
),
],
),
),
);
}
}