Flutter中flip_card组件如何用控制器实现点击下题自动翻回正面？

核心逻辑：借助flip_card包暴露的组件状态能力，先判断卡片当前朝向，再按需求执行翻转+切题的串行操作。 #

实现步骤 #

• 第一步：给FlipCard组件定义全局Key，用来获取当前朝向状态和调用翻转方法

// 在Practice类内部声明全局Key
final GlobalKey<FlipCardState> flipCardKey = GlobalKey<FlipCardState>();

• 第二步：给FlipCard组件绑定上面声明的key

FlipCard(
  key: flipCardKey, // 新增此行绑定key
  direction: FlipDirection.HORIZONTAL,
  // 其余原有front、back配置保持不变
)

• 第三步：修改下一题按钮的点击逻辑，先判断状态再执行操作。flip_card默认翻转动画时长为300毫秒，延时时长要和你配置的duration参数保持一致：

onPressed: () async {
  // 判断当前卡片是否处于背面
  if (!flipCardKey.currentState!.isFront) {
    // 是背面，先触发翻转回正面
    flipCardKey.currentState!.toggleCard();
    // 等待翻转动画执行完成
    await Future.delayed(const Duration(milliseconds: 300));
  }
  // 动画结束后再更新索引切换题目
  practiceController.cardIndex++;
}

修改后完整代码 #

class Practice extends GetView {
  final ShowcaseController cardController = Get.put(ShowcaseController());
  final PracticeController practiceController = Get.put(PracticeController());
  // 新增FlipCard的全局Key
  final GlobalKey<FlipCardState> flipCardKey = GlobalKey<FlipCardState>();

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blue[100],
      body: Center(
        child: Obx(
          () => 
          //Flip_card Code
          FlipCard(
            key: flipCardKey, // 绑定Key
            direction: FlipDirection.HORIZONTAL,
            // 如果你自定义了翻转时长，要把Future.delayed的时长和这里保持一致
            // duration: Duration(milliseconds: 500),
            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: () async {
          if (!flipCardKey.currentState!.isFront) {
            flipCardKey.currentState!.toggleCard();
            // 这里的时长和你设置的FlipCard duration参数一致即可
            await Future.delayed(const Duration(milliseconds: 300));
          }
          practiceController.cardIndex++;
        },
      ),
    );
  }
}

注意：如果你手动修改了FlipCard的duration参数设置自定义翻转动画时长，需要把Future.delayed的等待时长和你设置的duration保持一致，避免动画还没结束就切换题目导致的显示异常。

内容的提问来源于stack exchange，提问作者Akhil