如何让Flutter Row中的组件延伸至行最左侧，消除左侧多余灰色边距？

问题根因 #

MaterialButton 组件默认自带非零内边距，导致按钮内部的白色容器无法铺满按钮全部可用空间，左侧露出外层灰色父容器的背景。

修复代码 #

只需要给两个MaterialButton添加padding: EdgeInsets.zero属性清除默认内边距即可，修改后的完整代码如下：

Container(
  decoration: const BoxDecoration(
    borderRadius: BorderRadius.all(Radius.circular(15)),
    color: Colors.grey,
  ),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.start,
    children: [
      Expanded(
        child: MaterialButton(
          padding: EdgeInsets.zero, // 新增：清除默认内边距
          onPressed: () {},
          child: Container(
            height: 60,
            decoration: const BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(15)),
              color: Colors.white,
            ),
            child: const Center(
              child: Text(
                'Test 1',
                style: TextStyle(
                  color: Color(0xFF3d3636),
                ),
              ),
            ),
          ),
        ),
      ),
      Expanded(
        child: MaterialButton(
          padding: EdgeInsets.zero, // 新增：清除默认内边距
          onPressed: () {},
          child: Container(
            height: 60, // 补充高度和左侧按钮保持一致
            decoration: const BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(15)),
              color: Colors.grey,
            ),
            child: const Center(
              child: Text(
                'test 2',
              ),
            ),
          ),
        ),
      ),
    ],
  ),
)

可选优化 #

如果不需要MaterialButton自带的水波纹、点击高亮等Material风格效果，可以直接用GestureDetector替换MaterialButton包裹容器，无需处理默认padding，代码更简洁：

Expanded(
  child: GestureDetector(
    onTap: () {},
    child: Container(
      // 原有容器配置
    ),
  ),
)

效果对照 #

• 当前实际效果：
• 修复后目标效果：

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