Flutter多设备适配问题：布局错位、文本尺寸异常

问题现象 #

不同设备打开Flutter应用时，出现文本位置偏移、尺寸不一致的情况，当前使用固定宽高设计，仅在某一设备显示正常，其他设备上文本显示过大。

问题截图 #

原始代码 #

Container(
  margin: const EdgeInsets.only(
  left: 20, right: 20, bottom: 10),
  padding: const EdgeInsets.all(5),
  width: 420,
  child: Row(
  mainAxisAlignment: MainAxisAlignment.center,
        children: [
           Container(
           width: 80,
           child: Text(
           "Intervention Number",
           textAlign: TextAlign.left,
           style: TextStyle(fontSize: 14),
           ),
           ),
           SizedBox(
             width: 8,
           ),
           Text(snapshot.data!.totalIntervention,
               style: TextStyle(fontSize: 14),
               ),
               SizedBox(
                   width: 50,
               ),
               Container(
                 width: 60,
                 child: Text(
                    "Success Rate",
                 textAlign: TextAlign.left,
                 style: TextStyle(fontSize: 14),
                 ),
                ),
                SizedBox(
                   width: 5,
                ),
                Text(
                   snapshot.data!.sucessIntervention + '%',
                style: TextStyle(fontSize: 15),
                ),
                ],
               ),),
          ],
      );
   }
}

1. 替换固定宽高为弹性布局 #

移除代码中所有硬编码的固定宽度（如width:420、width:80），改用Expanded组件按比例分配Row内的空间，让布局自适应不同屏幕宽度。

2. 动态适配字体大小 #

放弃固定字号，基于当前可用屏幕宽度计算基准字号，保持文本在不同设备上的显示比例一致。

3. 修改后的适配代码 #

Container(
  margin: const EdgeInsets.only(left: 20, right: 20, bottom: 10),
  padding: const EdgeInsets.all(5),
  // 移除固定宽度，让容器自适应父级宽度
  child: LayoutBuilder(
    builder: (context, constraints) {
      // 根据可用宽度计算基准字号，可根据视觉效果调整比例
      double baseFontSize = constraints.maxWidth * 0.035;
      return Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Expanded(
            flex: 3, // 按比例分配空间，数值可根据需求调整
            child: Text(
              "Intervention Number",
              textAlign: TextAlign.left,
              style: TextStyle(fontSize: baseFontSize),
            ),
          ),
          SizedBox(width: 8),
          Expanded(
            flex: 1,
            child: Text(
              snapshot.data!.totalIntervention,
              style: TextStyle(fontSize: baseFontSize),
              textAlign: TextAlign.center,
            ),
          ),
          SizedBox(width: 20), // 替换固定间距为相对合理值
          Expanded(
            flex: 2,
            child: Text(
              "Success Rate",
              textAlign: TextAlign.left,
              style: TextStyle(fontSize: baseFontSize),
            ),
          ),
          SizedBox(width: 5),
          Expanded(
            flex: 1,
            child: Text(
              snapshot.data!.sucessIntervention + '%',
              // 保持原有的字号比例差异
              style: TextStyle(fontSize: baseFontSize * 1.07),
              textAlign: TextAlign.center,
            ),
          ),
        ],
      );
    },
  ),
);

额外优化建议 #

• 可引入flutter_screenutil库，基于设计稿尺寸自动完成屏幕适配，无需手动计算比例。
• 布局中尽量避免固定宽高，优先使用弹性布局组件（Expanded、Flex）和相对间距（如基于屏幕宽度的百分比）。

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