Flutter开发中如何实现宽度响应式适配，设置自动及100%占比宽度？

解决方案 #

你的代码中为Container硬编码了固定宽度width: 977，这是无法自适应不同屏幕宽度的核心原因，按以下步骤修改即可实现宽度100%占满父容器的效果：

• 替换Container的固定宽度参数为width: double.infinity，让容器自动撑满父组件提供的最大可用宽度
• 确保该组件的父级容器能提供明确的宽度约束，避免double.infinity失效：
  • 如果放在Column这类默认无强宽度约束的组件内，可在组件外层套Expanded（仅占剩余横向空间时使用），也可通过width: MediaQuery.of(context).size.width强制占满屏幕宽度
  • 不要将该组件放在UnconstrainedBox这类无约束父组件下，会导致无限宽约束失效
• 可选优化：如果需要全场景响应式适配，建议不要硬编码高度70和字体大小30，可通过MediaQuery获取屏幕尺寸按比例设置，避免小屏设备出现布局溢出问题

修改后的参考代码如下：

Widget _bottomSubText(BuildContext context, String subtext) {
  return Container(
    padding: const EdgeInsets.only(top: 15),
    // 替换固定宽度为无限宽，撑满父容器
    width: double.infinity,
    // 高度可按需替换为 MediaQuery.of(context).size.height * 比例值 做自适应
    height: 70,
    decoration: BoxDecoration(
      color: const Color.fromARGB(255, 245, 245, 245),
      boxShadow: [
        BoxShadow(
          color: Colors.grey.withOpacity(0.5),
          spreadRadius: 3,
          blurRadius: 7,
          offset: const Offset(0, 3),
        )
      ],
    ),
    child: Text(
      subtext,
      textAlign: TextAlign.center,
      // 字体大小可按需替换为 MediaQuery.of(context).size.width * 比例值 做自适应
      style: const TextStyle(fontSize: 30),
    ),
  );
}

如果修改后仍无法占满宽度，可检查_bottomSubText的上层组件树，确认是否存在父组件提前限制了最大可用宽度。

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