在不同的小部件中使容器具有相同大小的图像答案

【问题标题】：Make Container the same size of image in a different widget在不同的小部件中使容器具有相同大小的图像
【发布时间】：2022-08-17 22:39:03
【问题描述】：

我有一个可以翻转的卡片小部件。正面是图片，背面是文字。
问题是图像可以由用户上传，因此大小可能会有所不同。
如何将带有文本的容器重新缩放为与提供的图像相同的大小？
现在容器占据了它所能得到的所有空间，而图像有点小。

代码：

 Widget getCardSide(isFlipped) {
    if (isFlipped) {
      return Container(
          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)),
              ),
              Container(
                padding: const EdgeInsets.only(top: 30),
                child: Text(widget.text,
                    style: const TextStyle(
                      color: textColor,
                      fontSize: 25,
                    )),
              ),
            ],
          ));
    } else {
      return Container(
        alignment: Alignment.center,
        child: Image.file(
          widget.image,
        ),
      );
    }
  }

那么如何将 If-Block 中的容器调整为与 Else-Block 中的图像相同的大小？

标签： flutter dart flutter-layout widget flutter-widget

【解决方案1】：

尝试这个

消除

对齐：Alignment.center，来自图像.. 用这个替换你的代码

 Widget getCardSide(isFlipped) {
if (isFlipped) {
  return Container(
      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)),
          ),
          Container(
            padding: const EdgeInsets.only(top: 30),
            child: Text(widget.text,
                style: const TextStyle(
                  color: textColor,
                  fontSize: 25,
                )),
          ),
        ],
      ));
} else {
  return Container(
      // remove alignment center 
    child: Image.file(
      widget.image,
    ),
  );
}

}

【讨论】：