CODEWITHSUNDEEP
flutter
Cihan Kalmaz
Cihan Kalmaz

Reputation: 959

Flutter IconButton Animation on Multiple icons

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;
                            });
                          },
                        ),

Before Click

After Click

Upvotes: 0

Views: 439

Answers (1)

Ahmed banna
Ahmed banna

Reputation: 46

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];
                            });
                          },
                        ),

Upvotes: 1

Related Questions