如何让Flutter中的Container宽度接近屏幕一半？

你当前代码里的黄色Container用了固定宽度300，这在不同设备上无法适配成屏幕一半的宽度。可以通过以下两种方式修改：

方法一：利用MediaQuery动态计算宽度 #

通过MediaQuery获取当前屏幕的宽度，再减去body的左右内边距（各20），最后除以2就能得到接近屏幕一半的宽度。修改两个Container的width属性：

Container(
  alignment: Alignment.center,
  height: 30,
  // 计算屏幕一半宽度，减去左右padding的总和
  width: (MediaQuery.of(context).size.width - 40) / 2,
  decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(30), color: Colors.amber),
),
const SizedBox(height: 30),
Container(
  height: 30,
  width: (MediaQuery.of(context).size.width - 40) / 2,
  decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(30), color: Colors.amber),
),

解释：MediaQuery.of(context).size.width获取屏幕总宽度，40是body的左右内边距之和（EdgeInsets.all(20)），除以2后得到的就是扣除内边距后屏幕一半的宽度，完美适配不同设备。

方法二：使用Align配合widthFactor #

如果不想计算数值，也可以用Align包裹Container，通过widthFactor设置宽度比例：

Align(
  alignment: Alignment.center,
  widthFactor: 0.5,
  child: Container(
    alignment: Alignment.center,
    height: 30,
    decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(30), color: Colors.amber),
  ),
),
const SizedBox(height: 30),
Align(
  alignment: Alignment.center,
  widthFactor: 0.5,
  child: Container(
    height: 30,
    decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(30), color: Colors.amber),
  ),
),

解释：widthFactor:0.5会让Container的宽度变为父组件宽度的一半，而父组件是body的Padding容器，刚好对应扣除内边距后的屏幕宽度的一半。

完整修改后的核心代码片段 #

替换原代码中两个黄色Container的部分即可，以下是修改后的body区域关键代码：

body: Padding(
  padding: const EdgeInsets.all(20.0),
  child: Column(
    children: [
      // ... 原有Row、TextButton等代码保持不变
      const SizedBox(height: 300),
      // 第一个黄色Container
      Container(
        alignment: Alignment.center,
        height: 30,
        width: (MediaQuery.of(context).size.width - 40) / 2,
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(30), color: Colors.amber),
      ),
      const SizedBox(height: 30),
      // 第二个黄色Container
      Container(
        height: 30,
        width: (MediaQuery.of(context).size.width - 40) / 2,
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(30), color: Colors.amber),
      ),
    ],
  ),
),

内容的提问来源于stack exchange，提问作者Hana.HD