Flutter中如何设置OutlinedButton的宽度与高度？

当前写法是否正确？ #

你当前的代码写法是正确的，但直接在OutlinedButton构造函数中添加width参数会报错——因为OutlinedButton并没有暴露width/height这类直接的尺寸属性，必须通过样式配置或父容器来控制按钮的宽高。你的现有代码已经正确配置了边框、圆角和文本样式，只是缺少宽高设置的逻辑。

其他实现宽高的方式 #

方式1：通过OutlinedButton.styleFrom的fixedSize参数设置 #

这是官方推荐的直接方式，在styleFrom中指定fixedSize来固定按钮的宽高：

OutlinedButton(
  style: OutlinedButton.styleFrom(
    fixedSize: Size(AppSize.DIMEN_230, 50), // 第一个值为宽度，第二个为高度
    side: const BorderSide(
      width: 2.0, color: Colors.black12,
    ),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(10),
    ),
  ),
  onPressed: () {
    showDatePicker(
      context: context,
      initialDate: DateTime.now(),
      firstDate: DateTime(1880),
      lastDate: DateTime(2050),
    );
  },
  child: Text(
    "YYYY/MM/DD HH:MM:SS",
    style: textStyleW400S16.copyWith(
      fontStyle: FontStyle.italic,
      color: Colors.black54,
    ),
  ),
)

方式2：用SizedBox包裹按钮 #

通过父容器SizedBox强制指定尺寸，适合需要更灵活布局的场景：

SizedBox(
  width: AppSize.DIMEN_230,
  height: 50,
  child: OutlinedButton(
    style: OutlinedButton.styleFrom(
      side: const BorderSide(
        width: 2.0, color: Colors.black12,
      ),
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10),
      ),
    ),
    onPressed: () {
      showDatePicker(
        context: context,
        initialDate: DateTime.now(),
        firstDate: DateTime(1880),
        lastDate: DateTime(2050),
      );
    },
    child: Text(
      "YYYY/MM/DD HH:MM:SS",
      style: textStyleW400S16.copyWith(
        fontStyle: FontStyle.italic,
        color: Colors.black54,
      ),
    ),
  ),
)

方式3：通过ButtonStyle的minimumSize/maximumSize设置 #

如果需要设置最小/最大尺寸而非固定值，可以使用这种方式：

OutlinedButton(
  style: ButtonStyle(
    minimumSize: MaterialStateProperty.all(Size(AppSize.DIMEN_230, 50)), // 最小宽高
    side: MaterialStateProperty.all(const BorderSide(
      width: 2.0, color: Colors.black12,
    )),
    shape: MaterialStateProperty.all(RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(10),
    )),
  ),
  onPressed: () {
    showDatePicker(
      context: context,
      initialDate: DateTime.now(),
      firstDate: DateTime(1880),
      lastDate: DateTime(2050),
    );
  },
  child: Text(
    "YYYY/MM/DD HH:MM:SS",
    style: textStyleW400S16.copyWith(
      fontStyle: FontStyle.italic,
      color: Colors.black54,
    ),
  ),
)

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