FittedBox 中的文本在小屏幕上变得很小答案

【问题标题】：Text wrapped in FittedBox becomes tiny on small screensFittedBox 中的文本在小屏幕上变得很小
【发布时间】：2021-05-11 22:50:05
【问题描述】：

我有这个包装在 FittedBox 中的文本小部件：

FittedBox(
        fit: BoxFit.scaleDown,
        child: Text(
          text,
          style: TextStyle(
            color: color,
            fontWeight: fontWeight,
            fontSize: fontSize ?? Screen.heightUnit(context) * 3.5,
            fontFamily: fontFamily,
            shadows: [
              Shadow(
                color: shadowColor.withOpacity(shadow ? 1.0 : 0.0),
                blurRadius: blurRadius,
              ),
            ],
          ),
        ),
      );

生成的文本看起来很棒，无论屏幕大小如何，它都非常适合，除非屏幕很小。从设备预览包提供的所有屏幕中，唯一有问题的是“小手机”，在我的物理设备上测试，它也有一个小屏幕，也有问题。在这些情况下，文本不是完美的大小，而是太小以至于难以阅读。

Expected behavior

Bad behavior on small screens

更改 fit 参数不会改变任何内容，除非我将其更改为 BoxFit.none，在这种情况下 FittedBox 魔法完全停止工作。更改字体大小也几乎没有任何作用。

文字所在的卡片：

class FoodWidget extends CustomCard {
  FoodWidget(
    context, {
    this.foodWidth,
    @required this.food,
  }) : super(
          height: Screen.heightUnit(context) * 8,
          width: foodWidth ?? Screen.widthUnit(context) * 83,
          padding: 15,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              CustomTextWidget(
                food.name,
                color: Themes.cardHeader(context),
              ),
              Row(
                children: [
                  CustomTextWidget(
                    food.calories.toString(),
                    color: Themes.cardContent(context),
                  ),
                  CustomTextWidget(
                    ' kcal',
                    color: Themes.cardConstantUnit(context),
                  ),
                ],
              ),
            ],
          ),
        );
  final double foodWidth;
  final Food food;
}

自定义卡：

return Card(
  shadowColor: Colors.black,
  color: Themes.cardBackground(context),
  shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(borderRadius)),
  elevation: elevation,
  child: Container(
    height: height ?? Screen.heightUnit(context) * 12.5,
    width: width ?? Screen.widthUnit(context) * 20.5,
    alignment: alignment,
    padding: EdgeInsets.all(padding),
    child: child,
  ),
);

【问题讨论】：

标签： flutter dart flutter-layout

【解决方案1】：

好吧，我发现出了什么问题。虽然所有值都使用我定制的高度和宽度尺寸单位（Screen.heightUnit 和 Screen.widthUnit），它们与屏幕尺寸成正比，但 FoodWidget 的填充参数是硬编码的，值为 15 像素，这与屏幕尺寸不成比例，因此在小屏幕上表现不佳。

【讨论】：