如何移除Flutter中FilledButton与Container间的默认内边距？

你遇到的边距问题是因为FilledButton默认自带内边距、最小尺寸和形状样式，和外层Container的样式冲突导致的，按以下步骤修改即可解决：

具体修改方案 #

• 清除按钮默认内外边距：在FilledButton.styleFrom中添加padding: EdgeInsets.zero和minimumSize: Size(0, 0)，去掉按钮自带的多余空间。
• 统一圆角样式：外层Container用了BorderRadius.circular(45)，需要给左右两个按钮分别设置对应圆角，保证和外层容器圆角匹配，避免边缘间隙。
• 让按钮充满容器高度：给外层的Row添加crossAxisAlignment: CrossAxisAlignment.stretch，让按钮垂直方向填满Container，消除垂直间隙。

修改后的完整代码 #

Widget _signInOrSignUpSelector() {
  return Container(
    decoration: BoxDecoration(
      color: FoodlooseColors.cOrange.withOpacity(0.3),
      borderRadius: BorderRadius.circular(45),
    ),
    child: Row(
      crossAxisAlignment: CrossAxisAlignment.stretch, // 让按钮垂直填满容器
      children: [
        Expanded(child: _signInSelectorButton()),
        Expanded(child: _signUpSelectorButton()),
      ],
    ),
  );
}

Widget _signInSelectorButton() {
  return FilledButton(
    onPressed: () {
      setState(() {
        isLogin = !isLogin;
      });
    },
    style: FilledButton.styleFrom(
      backgroundColor: isLogin ? FoodlooseColors.cOrange : Colors.transparent,
      padding: EdgeInsets.zero, // 清除按钮内边距
      minimumSize: Size(0, 0), // 清除按钮最小尺寸限制
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.only( // 匹配外层容器左侧圆角
          topLeft: Radius.circular(45),
          bottomLeft: Radius.circular(45),
        ),
      ),
    ),
    child: const Text("Sign-In"),
  );
}

Widget _signUpSelectorButton() {
  return FilledButton(
    onPressed: () {
      setState(() {
        isLogin = !isLogin;
      });
    },
    style: FilledButton.styleFrom(
      backgroundColor: isLogin ? Colors.transparent : FoodlooseColors.cOrange,
      padding: EdgeInsets.zero, // 清除按钮内边距
      minimumSize: Size(0, 0), // 清除按钮最小尺寸限制
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.only( // 匹配外层容器右侧圆角
          topRight: Radius.circular(45),
          bottomRight: Radius.circular(45),
        ),
      ),
    ),
    child: const Text("Sign-Up"),
  );
}

补充说明 #

• 移除了原代码中Container的Center组件，因为Row设置CrossAxisAlignment.stretch后不需要居中，反而会影响按钮填充高度。
• 按钮的形状设置和外层Container圆角完全对应，切换选中状态时，橙色背景会完美贴合容器圆角，不会出现突兀边角。

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