Flutter实现翻转卡片：让文本容器与用户上传图片尺寸一致

要让背面的文本Container和正面图片尺寸完全匹配，核心是先拿到图片的实际尺寸，再用这个尺寸约束文本容器的大小。具体实现步骤如下：

1. 在State中存储图片尺寸 #

在你的StatefulWidget对应的State类里，添加变量保存图片的宽高：

Size? _imageSize;

2. 加载图片时获取实际尺寸 #

在组件初始化阶段，监听图片加载完成事件，拿到图片的原始宽高：

@override
void initState() {
  super.initState();
  // 通过FileImage获取图片尺寸
  final imageProvider = FileImage(widget.image);
  imageProvider.resolve(const ImageConfiguration()).addListener(
    ImageStreamListener((ImageInfo info, bool _) {
      setState(() {
        _imageSize = Size(
          info.image.width.toDouble(),
          info.image.height.toDouble(),
        );
      });
    }),
  );
}

3. 用图片尺寸约束文本容器 #

修改getCardSide方法，当显示文本侧时，用获取到的图片尺寸限制Container的宽高：

Widget getCardSide(bool isFlipped) {
  if (isFlipped) {
    // 图片尺寸未加载完成时，显示占位加载组件
    if (_imageSize == null) {
      return const Center(child: CircularProgressIndicator());
    }
    return Container(
      width: _imageSize!.width,
      height: _imageSize!.height,
      padding: const EdgeInsets.all(15),
      child: Column(
        children: [
          Container(
            alignment: Alignment.topCenter,
            child: Text(widget.title,
                style: const TextStyle(
                    color: textColor,
                    fontSize: 45,
                    decoration: TextDecoration.underline,
                    fontWeight: FontWeight.bold)),
          ),
          const SizedBox(height: 30),
          // 用Expanded+SingleChildScrollView处理文本溢出
          Expanded(
            child: SingleChildScrollView(
              child: Text(widget.text,
                  style: const TextStyle(
                    color: textColor,
                    fontSize: 25,
                  )),
            ),
          ),
        ],
      ),
    );
  } else {
    return Container(
      alignment: Alignment.center,
      child: Image.file(
        widget.image,
      ),
    );
  }
}

补充说明 #

• 如果图片设置了fit属性（比如BoxFit.contain），需要根据父容器约束和图片比例计算实际显示尺寸，再应用到文本容器上。
• 加入SingleChildScrollView是为了避免文本内容超过图片高度时出现溢出问题。

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