Flutter中ElevatedButton宽度设置无效，寻求解决方案

我想要设置ElevatedButton的宽度，尝试用SizedBox、Container包裹并设置宽度，同时也配置了ElevatedButton的minimumSize属性，但均无法改变按钮的宽度，恳请各位提供解决方法。

代码如下：

bottomNavigationBar: Container(
        width: 20,
        padding: const EdgeInsets.all(20),
        child: ElevatedButton(
          style: ElevatedButton.styleFrom(
            elevation: 0.0,
            onPrimary: _buttonIsActive ? Colors.white : const Color(0xFF91A5B2),
            primary:
                _buttonIsActive ? Color(0xFF0E71B0) : const Color(0xFFE1EAF0),
            minimumSize: const Size(88, 56),
            padding: const EdgeInsets.symmetric(horizontal: 16),
            //padding: EdgeInsets.fromLTRB(10, 5, 10, 5),
            shape: const RoundedRectangleBorder(
              borderRadius: BorderRadius.all(Radius.circular(10)),
            ),
          ),
          onPressed: () {}, //=> _addVital(), (Need Open)
          child: const Text('Update',
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.w600)),
        ),
      ),

问题原因 #

bottomNavigationBar 默认会强制子组件占满屏幕宽度，你外层的 Container 设置 width:20 不会生效；同时 ElevatedButton 的 minimumSize 仅定义最小尺寸，无法限制最大宽度，所以按钮会自动撑满父容器宽度。

可行解决方案 #

方案1：用 Align + SizedBox 固定宽度

通过 Align 让按钮居中，再用 SizedBox 直接指定按钮宽度：

bottomNavigationBar: Container(
  padding: const EdgeInsets.all(20),
  child: Align(
    alignment: Alignment.center,
    child: SizedBox(
      width: 200, // 自定义按钮宽度
      child: ElevatedButton(
        style: ElevatedButton.styleFrom(
          elevation: 0.0,
          onPrimary: _buttonIsActive ? Colors.white : const Color(0xFF91A5B2),
          primary: _buttonIsActive ? Color(0xFF0E71B0) : const Color(0xFFE1EAF0),
          minimumSize: const Size(88, 56),
          padding: const EdgeInsets.symmetric(horizontal: 16),
          shape: const RoundedRectangleBorder(
            borderRadius: BorderRadius.all(Radius.circular(10)),
          ),
        ),
        onPressed: () {},
        child: const Text('Update', style: TextStyle(fontSize: 18, fontWeight: FontWeight.w600)),
      ),
    ),
  ),
),

方案2：通过 constraints 固定按钮尺寸

在 ElevatedButton.styleFrom 中使用 constraints 替代 minimumSize，直接设置固定宽高：

bottomNavigationBar: Container(
  padding: const EdgeInsets.all(20),
  child: ElevatedButton(
    style: ElevatedButton.styleFrom(
      elevation: 0.0,
      onPrimary: _buttonIsActive ? Colors.white : const Color(0xFF91A5B2),
      primary: _buttonIsActive ? Color(0xFF0E71B0) : const Color(0xFFE1EAF0),
      constraints: BoxConstraints.tightFor(width: 200, height: 56), // 固定宽高
      padding: const EdgeInsets.symmetric(horizontal: 16),
      shape: const RoundedRectangleBorder(
        borderRadius: BorderRadius.all(Radius.circular(10)),
      ),
    ),
    onPressed: () {},
    child: const Text('Update', style: TextStyle(fontSize: 18, fontWeight: FontWeight.w600)),
  ),
),

方案3：用 Row 控制按钮位置和宽度

通过 Row 并设置 mainAxisAlignment，让按钮居中，再用 SizedBox 限制宽度：

bottomNavigationBar: Container(
  padding: const EdgeInsets.all(20),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      SizedBox(
        width: 200,
        child: ElevatedButton(
          // 按钮样式和逻辑同前
        ),
      ),
    ],
  ),
),

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