Flutter IconButton Animation on Multiple icons - flutter

Question

Helllo
I have a Product Category screen on my Flutter App. I have added a IconButton for animation for 'Add To Cart' action. But if you click add to cart icon on product image, all icons are animating. I want to animate only one icon. Can you help me?
IconButton(
icon: AnimatedSwitcher(
duration: const Duration(milliseconds: 350),
transitionBuilder: (child, anim) => RotationTransition(
turns: child.key == ValueKey('icon1')
? Tween<double>(begin: 1, end: 0.75).animate(anim)
: Tween<double>(begin: 0.75, end: 1).animate(anim),
child: ScaleTransition(scale: anim, child: child),
),
child: _currIndex == 0
? Icon(Icons.close, key: const ValueKey('icon1'))
: Icon(
Icons.arrow_back,
key: const ValueKey('icon2'),
)),
onPressed: () {
setState(() {
_currIndex = _currIndex == 0 ? 1 : 0;
});
},
),

Answer 1

I think the issue is because you are using _currIndex in each IconButton, so when you change one you make setState to change the value then every product gets affected by this change.
what you have to do is separate each product from the other...
one way is to make _currIndex a local variable if you use ListView put the variable in its scope but I doubt this works
the other way is to make a list of Booleans of size equal to the number of products and you can check if the _currIndex of a product is 0 or 1 by accessing the List with the index of the ListView.
so it will look like this:
// at the beginning of the file you will have a list of booleans with all values set to zero by doing this
List<bool> isInCart = List.filled(numberOfProducts, false);
// then you will do your code but with the list not the _currIndex
IconButton(
icon: AnimatedSwitcher(
duration: const Duration(milliseconds: 350),
transitionBuilder: (child, anim) => RotationTransition(
turns: child.key == ValueKey('icon1')
? Tween<double>(begin: 1, end: 0.75).animate(anim)
: Tween<double>(begin: 0.75, end: 1).animate(anim),
child: ScaleTransition(scale: anim, child: child),
),
// if the element is true then this product is in the cart otherwise its not
child: isInCart[index]
? Icon(Icons.close, key: const ValueKey('icon1'))
: Icon(
Icons.arrow_back,
key: const ValueKey('icon2'),
)),
onPressed: () {
setState(() {
// you just invert the value here
isInCart[index] = !isInCart[index];
});
},
),