如何让Flutter Container占满屏幕宽度？

你遇到的问题大概率是父组件的约束限制了Container的宽度，比如你的Container可能嵌套在Column、ListView或者带padding的父组件里，这时候即便设置MediaQuery.of(context).size.width也会被父组件的约束覆盖。下面给你几种可行的解决方法：

方法1：用double.infinity替代MediaQuery #

直接把width设为double.infinity，它会让Container自动占满父组件提供的最大可用宽度：

Container(
  height: 50,
  width: double.infinity, // 替换为这个
  color: const Color(0xFF262724),
  child: const Row(
    mainAxisAlignment: MainAxisAlignment.spaceAround,
    children: [
      Icon(Icons.mic_none, color: Colors.white),
      Icon(
        Icons.check_box_outlined,
        color: Colors.white,
      ),
    ],
  ),
),

方法2：调整父组件的布局约束 #

如果你的Container放在Column里，Column默认crossAxisAlignment是CrossAxisAlignment.center，子组件宽度会被限制为内容宽度，这时候可以把Column的crossAxisAlignment设为CrossAxisAlignment.stretch：

Column(
  crossAxisAlignment: CrossAxisAlignment.stretch, // 添加这一行
  children: [
    // 你的Container代码
  ],
)

或者用Expanded包裹Container，让它占据Column里的剩余宽度：

Column(
  children: [
    Expanded(
      child: Container(
        height: 50,
        color: const Color(0xFF262724),
        child: const Row(...),
      ),
    ),
  ],
)

方法3：移除父组件的默认padding #

如果页面用了Scaffold，它的body默认会有小padding（避免内容被状态栏/导航栏遮挡），可以通过MediaQuery.removePadding去掉：

Scaffold(
  body: MediaQuery.removePadding(
    context: context,
    removeTop: true, // 根据需要选择是否移除顶部/底部padding
    child: // 你的布局代码
  ),
)

（从你提供的截图能看到黑色栏左右两侧有空白，这就是父组件的padding或约束导致的，用上面的方法就能解决）

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