如何修改OutlinedButton的边框颜色与文字颜色？

你的代码存在几个导致报错的问题：

• OutlinedButton没有color属性，该参数属于多余配置，需删除。
• ButtonStyle的side参数要求为MaterialStateProperty<BorderSide?>类型，不能直接传入BorderSide实例，必须用MaterialStateProperty.all()包裹。
• 文字标签颜色需通过ButtonStyle的foregroundColor配置，这样能统一管理组件样式逻辑。

以下是修正后的完整代码：

OutlinedButton(
  onPressed: null,
  style: ButtonStyle(
    shape: MaterialStateProperty.all(
      RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(30.0),
      ),
    ),
    // 配置边框宽度与颜色
    side: MaterialStateProperty.all(
      const BorderSide(width: 5.0, color: Colors.blue),
    ),
    // 配置文字标签颜色
    foregroundColor: MaterialStateProperty.all(Colors.orange),
  ),
  child: const Text("Crime"),
),

如果需要区分按钮不同状态（如按下、禁用）的样式，可以用MaterialStateProperty.resolveWith动态设置，示例如下：

OutlinedButton(
  onPressed: () {},
  style: ButtonStyle(
    shape: MaterialStateProperty.all(
      RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(30.0),
      ),
    ),
    side: MaterialStateProperty.resolveWith((states) {
      if (states.contains(MaterialState.pressed)) {
        return const BorderSide(width: 5.0, color: Colors.green);
      } else if (states.contains(MaterialState.disabled)) {
        return const BorderSide(width: 5.0, color: Colors.grey);
      }
      return const BorderSide(width: 5.0, color: Colors.blue);
    }),
    foregroundColor: MaterialStateProperty.resolveWith((states) {
      if (states.contains(MaterialState.pressed)) {
        return Colors.white;
      } else if (states.contains(MaterialState.disabled)) {
        return Colors.grey[400];
      }
      return Colors.orange;
    }),
  ),
  child: const Text("Crime"),
),

内容的提问来源于stack exchange，提问作者Cliff Odebala Clarke