How to use controller in flip_card Widget Flutter?

Question

I am using flip_card package for flipping the cards in my quiz application. I have a next button to change the question and answer on both sides of card. But the problem is if the card is on answer side(back side), clicking the next button shows the answer of next question. I want to automatically reverse the card with next button click, if it is in answer side.

pub dev link : flip_card

github link : flip_card Github



class Practice extends GetView {
  final ShowcaseController cardController = Get.put(ShowcaseController());
  final PracticeController practiceController = Get.put(PracticeController());

  final subjectName;
  Practice({this.subjectName});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blue[100],
      body: Center(
        child: Obx(
          () => 
          //Flip_card Code
          FlipCard(
            direction: FlipDirection.HORIZONTAL,
            front: Container(
              color: Colors.white,
              child: Text(cardController.cards[practiceController.cardIndex.toInt()]["question"]),
            ),
            back: Container(
              color: Colors.red,
              child: Text(cardController.cards[practiceController.cardIndex.toInt()]["answer"]),
            ),
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Text("Next"),
        onPressed: () {
          practiceController.cardIndex++;
        },
      ),
    );
  }
}

score 2 · Accepted Answer · answered Sep 18 '21 at 17:00

I wasn't seeing any immediately obvious way to track that state of the card. But here's one solution.

General idea is to create a boolean that updates on card flip, and if the Next button is hit, if the card is flipped, it will flip back to the front before moving onto the next index. This will also require keeping the GlobalKey in the Getxclass.

Add the following to your PracticeController class.

GlobalKey<FlipCardState> cardKey = GlobalKey<FlipCardState>();

  bool cardIsFlipped = false;

  void updateCardIsFlipped() => cardIsFlipped = !cardIsFlipped;

  Future<void> nextQuestion() async {
    if (cardIsFlipped) {
      cardKey.currentState.toggleCard();
    }
    await Future.delayed(const Duration(milliseconds: 200), () {
      cardIndex++;
    }); // needs time for the flip animation to complete before moving to the next question
  }

Then a few changes to your Scaffold and you're good to go.

Scaffold(
      backgroundColor: Colors.blue[100],
      body: Center(
        child: Obx(
          () => FlipCard(
            direction: FlipDirection.HORIZONTAL,
            key: practiceController.cardKey, // using key from Getx class
            onFlip: () => practiceController.updateCardIsFlipped(), // updating bool on every flip
            front: Container(
                color: Colors.white,
                child: Text(cardController
                        .cardsMap[practiceController.cardIndex.toInt()]
                    ["question"])),
            back: Container(
              color: Colors.red,
              child: Text(cardController
                  .cardsMap[practiceController.cardIndex.toInt()]["answer"]),
            ),
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: const Text("Next"),
        onPressed: () => practiceController.nextQuestion(), // function from Getx class
      ),
    );

Wow, Thanks bro for taking your precious time for solving the issue. It really helped me :) — Akhil, Sep 20 '21 at 04:04

novol · Answer 2 · 2021-09-17T15:12:33.570

You can also configure the card to only flip when desired by using a GlobalKey to toggle the cards:

class Practice extends GetView {
  final ShowcaseController cardController = Get.put(ShowcaseController());
  final PracticeController practiceController = Get.put(PracticeController());

GlobalKey<FlipCardState> cardKey = GlobalKey<FlipCardState>();
bool isFlipped = false;

  final subjectName;
  Practice({this.subjectName});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blue[100],
      body: Center(
        child: Obx(
          () => 
          //Flip_card Code
          FlipCard(
          onFlipDone: (status) {
             isFlipped = true;
             print(isFlipped);
          },
            direction: FlipDirection.HORIZONTAL,
            front: Container(
              color: Colors.white,
              child: Text(cardController.cards[practiceController.cardIndex.toInt()]["question"]),
            ),
            back: Container(
              color: Colors.red,
              child: Text(cardController.cards[practiceController.cardIndex.toInt()]["answer"]),
            ),
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Text("Next"),
        onPressed: () { if (isFlipped == false) {cardKey.currentState.toggleCard(); isFlipped = true}},
      ),
    );
  }
}

Thanks for the reply. But it is not working. Even if it will flip the card from question to answer of next question automatically. I want to flip only if the card is on the answer side. — Akhil, Sep 17 '21 at 15:06
I am not familiar with this library, but I changed the code and this should help — novol, Sep 17 '21 at 15:14
I don't know why but, cardKey.currentState?.toggleCard() is not working :( — Akhil, Sep 17 '21 at 15:34

How to use controller in flip_card Widget Flutter?

2 Answers2