如何在 flip_card Widget Flutter 中使用控制器？

Question

我正在使用 flip_card 包在我的测验应用程序中翻转卡片。我有一个下一个按钮来更改卡片两侧的问题和答案。但问题是如果卡片在答案面（背面），单击下一步按钮会显示下一个问题的答案。我想在点击下一个按钮时自动反转卡片，如果它在答案一侧。

酒吧开发 link : flip_card



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

Answer 1

您还可以将卡片配置为仅在需要时翻转，方法是使用 GlobalKey 切换卡片：

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

Answer 2

我没有看到任何立即明显的方法来跟踪卡的状态。但这是一个解决方案。

一般的想法是创建一个 boolean 在卡片翻转时更新，如果按下 Next 按钮，如果卡片被翻转，它会在移动到之前翻转回前面下一个索引。这还需要在 Getxclass.

中保留 GlobalKey

将以下内容添加到您的 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
  }

然后对您的 Scaffold 进行一些更改，您就可以开始了。

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

如何在 flip_card Widget Flutter 中使用控制器？

How to use controller in flip_card Widget Flutter?

flutter

dart

dart-pub

flutter-getx