Continuous change of front and back cards

[rmrbytes]

My use case is a deck of cards. The front being the Question card and the back being the Answer. On Tap of the Q card, it must toggle to show the A card. On the tap of the A card, the two card information should be changed and the Q card of the next card from the deck should be shown.

I am able to achieve this easily using your wonderful widget. Thanks!

However, when I update the contents of the Q and A cards, for an instance the user is able to see the Answer of the next card. I wish to avoid that.

Here is the relevant code

...
// I am using a Consumer to a Change Notifier of the Deck class
//
 Consumer<Deck>(builder: (context, deck, _) {
    return FlipCard(
        key: cardKey,
        direction: FlipDirection.VERTICAL,
         front: showQ(deck),
         back: showA(deck),
      );
    ...
 }

 Widget showQ(deck) {
    question = deck.getCurrentQuestion();
    return GestureDetector(
       onTap: () {cardKey.currentState!.toggleCard();}
       child: 
        .....

} 

 Widget showA(deck) {
    answer =  deck.getCurrentAnswer();
    return GestureDetector(
       onTap: () {
            // calls the Deck Class to increment the index etc
           deck.nextCard(); 
           // this causes the entire FlipCard widget to rebuild because of the consumer
           // however,
           // at this moment since the A card which is visible to the user
           // has changed it momentarily shows the updated answer
           //
           cardKey.currentState!.toggleCard();
        }
       child: 
        .....

} 

I tried using the onFlipDone as below. However, that too shows the old Question as it turns before updating before the user

...
// I am using a Consumer to a Change Notifier of the Deck class
//
 Consumer<Deck>(builder: (context, deck, _) {
    return FlipCard(
        key: cardKey,
        direction: FlipDirection.VERTICAL,
         onFlipDone: (status) {
             if(status) { // true viz. that the A card has turned
                 // call the Class
                 deck.nextCard();
                 // this will cause a rebuild
             }
         },
         front: showQ(deck),
         back: showA(deck),
      );
    ...
 }

 Widget showQ(deck) {
    question = deck.getCurrentQuestion();
    return GestureDetector(
       onTap: () {cardKey.currentState!.toggleCard();}
       child: 
        .....

} 

 Widget showA(deck) {
    answer =  deck.getCurrentAnswer();
    return GestureDetector(
       onTap: () {cardKey.currentState!.toggleCard();}
       child: 
        .....

} 

In the second case, at least the updated answer is not seen by the User. However, when the card rotates back to the Q card, momentarily the user sees the existing (old) question and then it instantly updates to the new question.

As mentioned the second options works better for me but thought of posting it here to find out if there is a more elegant way to do it.

Thanks

[kpk-i710]

+1 yes i have the same problem, i don't know how to solve

[ciriousjoker]

Can't you toggle the widget before loading the next card in the deck?

[kpk-i710]

Can't you toggle the widget before loading the next card in the deck?

For example, it didn't work out for me, I can only rotate the widget after showing the next card. Maybe there is a way to rotate the map backward without animation? Then the user would not see the answer to the next card, if with the animation he still sees the answer for half a second.

[rmrbytes]

Can't you toggle the widget before loading the next card in the deck?

If you toggle the widget, it would show the existing content briefly before the updated text code makes the change. That is precisely what I am doing. As mentioned in the code snippet I shared where the content is being changed onFlipDone event

[BrunoJurkovic]

Could you provide either screenshots or more details, I am having trouble understanding what the exact issue is, thanks.