Flutter翻牌卡片背面文本镜像问题解决方案咨询

问题根源：通过Transform.rotateY旋转整个容器后，背面内容会自然呈现镜像状态，而textDirection仅控制文本的排版阅读方向（从左到右/从右到左），并非实现镜像翻转，因此调整它无法解决问题。

正确处理方式：当容器处于背面状态时，单独对背面文本做一次反向180度Y轴旋转，抵消容器整体旋转带来的镜像效果。

修改后的完整代码：

import 'dart:math';

import 'package:flutter/material.dart';

class FlipCard extends StatefulWidget {
  const FlipCard({Key? key}) : super(key: key);

  @override
  State<FlipCard> createState() => _FlipCardState();
}

class _FlipCardState extends State<FlipCard>
    with SingleTickerProviderStateMixin {
  bool _isFrontVisible = true;
  late AnimationController _flipAnimationController;
  late Animation<double> _flipAnimation;

  @override
  void initState() {
    super.initState();
    _flipAnimationController =
        AnimationController(vsync: this, duration: Duration(milliseconds: 500));
    _flipAnimation =
        Tween<double>(begin: 0.0, end: 1.0).animate(_flipAnimationController);
  }

  @override
  void dispose() {
    _flipAnimationController.dispose();
    super.dispose();
  }

  void _toggleCard() {
    if (_isFrontVisible) {
      _flipAnimationController.forward();
    } else {
      _flipAnimationController.reverse();
    }
    _isFrontVisible = !_isFrontVisible;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: GestureDetector(
          onTap: () => _toggleCard(),
          child: AnimatedBuilder(
            animation: _flipAnimation,
            builder: (context, child) {
              final value = _flipAnimation.value;
              final perspective = 0.002;
              final angle = value * pi;
              final isFrontFacing = angle <= pi / 2;
              return Transform(
                transform: Matrix4.identity()
                  ..setEntry(3, 2, perspective)
                  ..rotateY(angle),
                alignment: Alignment.center,
                child: Container(
                  height: 200,
                  width: 300,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(10),
                    color: isFrontFacing ? Colors.white : Colors.blueGrey,
                  ),
                  child: Center(
                    // 关键修改：根据正反面决定是否翻转文本
                    child: isFrontFacing
                        ? Text(
                            "Vorderseite",
                            style: TextStyle(
                              fontSize: 20,
                              color: Colors.black,
                            ),
                          )
                        : Transform(
                            transform: Matrix4.identity()..rotateY(pi),
                            alignment: Alignment.center,
                            child: Text(
                              "Rückseite",
                              style: TextStyle(
                                fontSize: 20,
                                color: Colors.white,
                              ),
                            ),
                          ),
                  ),
                ),
              );
            },
          ),
        ),
      ),
    );
  }
}

关键修改说明 #

1. 移除无效的textDirection设置，它无法解决镜像问题。
2. 当容器处于背面（isFrontFacing为false）时，用Transform.rotateY(pi)将文本单独翻转180度，抵消容器整体旋转的镜像效果，让文本显示正常。

另外也可以用Transform.scale实现水平翻转，效果一致：

Transform(
  transform: Matrix4.identity()..scale(-1, 1, 1),
  alignment: Alignment.center,
  child: Text("Rückseite", ...),
)

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