Flip card back after performing action on it

[ThraaxSession]

Hi! I've got a question. I have a ListView with multiple cards which are flipcards (with same controller assigend) Those cards contains same kind of actions which I control by the name. When I click those action on the back, I want to flip it back. (Right now it keeps the state and has to be flipped manually somehow)

Any idea? Thanks!

[BrunoJurkovic]

Hey there @ThraaxSession ,

if I understand your problem correctly, your issue should be fixed by an FlipCardController.

You can read all about it in the docs or the readme.

[tidharnitzan]

hi, I'm using FlipCardController with a list of cards. when creating the cards I create a new controller for each of the items. when calling toggleCard() it does work but only once. calling toggle again on the same card will not work once it was fired once. I'm not sure what the issue is. Thanks.

CarouselSlider(
            options: CarouselOptions(
              height: 200.0,
              enableInfiniteScroll: false,
            ),
            items: assignment.words.map((i) {
              FlipCardController _controller = FlipCardController();
              return Builder(
                builder: (BuildContext context) {
                  return Consumer(builder: (context, ref, _) {
...
                    return FlipCard(
                      controller: _controller,
                      fill: Fill
                          .fillBack, // Fill the back side of the card to make in the same size as the front.
                      direction: FlipDirection.HORIZONTAL, // default
                      front: Container(
                        height: 150.0,
                        width: MediaQuery.of(context).size.width,
                        margin: const EdgeInsets.symmetric(horizontal: 5.0),
                        color: Colors.transparent,
                       ...
                      ),
                      back: Container(
                        height: 150.0,
                        width: MediaQuery.of(context).size.width,
                        margin: const EdgeInsets.symmetric(horizontal: 5.0),
                        color: Colors.transparent,
                        child: Container(
                          ...
                                        ),
                                        InkWell(
                                          child: Container(
                                            decoration: BoxDecoration(
                                                borderRadius:
                                                    const BorderRadius.all(
                                                        Radius.circular(5.0)),
                                                color: i.translateExeSuccess
                                                    ? Colors.lightBlue
                                                    : Colors.blueGrey,
                                                border: Border.all(
                                                  color: Colors.black,
                                                )),
                                            width: 30,
                                            height: 30,
                                            child:
                                                const Icon(Icons.check_circle),
                                          ),
                                          onTap: () {
                                            // This line
                                            _controller.toggleCard();
                                            setState(() {
                                              i.translateExeSuccess = true;
                                              print("did it");
                                            });
                                          },
       ...

[ciriousjoker]

A couple of suggestions:

• long widget trees are inefficient because they all redraw when the top level widget changes
• Creating a controller in a loop like that probably recreates the controller whenever the widget is redrawn

If you extract the cards into their own stateful widget it should work.

[BrunoJurkovic]

Closing as this issue seems stale, thanks to @ciriousjoker for providing an answer. If this solution doesn't solve your issue, please make a new one, thanks!