Flutter文本溢出如何修复？Expanded/Flexible无效，图片怎么跨设备尺寸一致？

文本溢出问题修复 #

你之前使用Expanded/Flexible未生效的核心原因是包裹层级错误：Row的子元素默认无宽度限制，仅包裹Text不会生效，需要把文本对应的整个Padding组件放入Expanded中，强制限制文本区域的最大宽度为Row除去图片后的剩余空间。同时给Text配置软换行参数兜底即可解决溢出。

图片尺寸统一适配方案 #

你当前用屏幕宽度百分比设置图片尺寸的方案不是最优：不同设备的屏幕尺寸、宽高比差异大，该方案会导致图片在平板、折叠屏上过大，小屏手机上过小，且BoxFit.fill会拉伸图片导致变形。
最优适配方案为：用固定宽高比+宽高上下限约束的方式，既保证不同设备上图片尺寸不会偏离预期，也不会出现拉伸变形的问题。

完整修复代码 #

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    // 优化后的图片区域
    Container(
      // 增加宽高上下限约束，避免跨设备尺寸差异过大
      constraints: const BoxConstraints(
        maxWidth: 180,
        minWidth: 120,
        maxHeight: 270,
        minHeight: 180,
      ),
      width: MediaQuery.of(context).size.width * 0.4,
      // 固定宽高比为2:3，和你原有比例一致
      child: AspectRatio(
        aspectRatio: 2/3,
        child: Container(
          decoration: BoxDecoration(
            image: DecorationImage(
              image: AssetImage('images/brushOne.jpg'),
              // 替换fill为cover，避免图片拉伸
              fit: BoxFit.cover,
            ),
          ),
        ),
      ),
    ),
    // 文本区域外层包裹Expanded限制宽度
    const Expanded(
      child: Padding(
        padding: EdgeInsets.only(top: 40.0, left: 16),
        child: Text(
          'Thank you for letting me do what I love, your support is contagious If I could put all 10,000 of you in a room and give you all a hug I WOULD. Your support makes my heart grow and glow. Thank you for helping me create a business and a family.I love you all 🌈',
          softWrap: true,
          overflow: TextOverflow.visible,
        ),
      ),
    ),
  ],
)

原问题界面参考 #

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