如何更改OutlinedButton边框颜色？

Question

Flutter 小部件，我尝试使用 BorderSide(color : Colors.blue) 更改 OutlineButton 边框颜色。无论设置哪种颜色，OutlineButton 始终带有灰色边框，但宽度变化适用。如何更改OutlineButton边框线颜色？

class OutlineButtonWidget extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Center(
        child: OutlineButton(
            onPressed: null,
            borderSide: BorderSide(
                width: 5.0,
                color: Colors.blue,
                style: BorderStyle.solid,
            ),
            child: Text('outline button')
            ),
        ),
    );
  }
}

Answer 1

使用

style

属性：

OutlinedButton(
  onPressed: () {},
  child: Text('Outlined button'),
  style: OutlinedButton.styleFrom(
    side: BorderSide(width: 5.0, color: Colors.blue),
  ),
)

Answer 2

使用style属性

   style: ButtonStyle(
                    side: MaterialStateProperty.all(BorderSide(
                        color: Colors.blue,
                        width: 1.0,
                        style: BorderStyle.solid)))

---

或者尝试一下这两种方法都有效

style: OutlinedButton.styleFrom(
                          side: BorderSide(
                            width: 5.0,
                            color: Colors.blue,
                            style: BorderStyle.solid,
                          ),
                        ),
            child: Text('outline button')
            )

---

OutlinedButton(
                style: ButtonStyle(
                    side: MaterialStateProperty.all(BorderSide(
                        color: Colors.blue,
                        width: 1.0,
                        style: BorderStyle.solid))),
                onPressed: () {},
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Align(
                      child: Padding(
                        padding:
                            const EdgeInsets.symmetric(horizontal: 12.0),
                        child: Icon(
                          Icons.clear,
                          size: 24,
                        ),
                      ),
                    ),
                    Text("Clear")
                  ],
                ))

结果可能是这样的

Answer 3

样式属性将起作用

OutlineButton(
            onPressed: (){},
            style: OutlinedButton.styleFrom(
                          side: BorderSide(
                            width: 5.0,
                            color: Colors.blue,
                            style: BorderStyle.solid,
                          ),
                        ),
            child: Text('outline button')
            ),
        ),

Answer 4

我收到“OutlineButton”已弃用且不应使用的消息。请改用 OutlinedButton。看 flutter.dev/go/material-button-migration-guide 中的迁移指南）。

迁移前代码：

child: OutlineButton(
    onPressed: onPressed,
    child: CustomText(
      text,
      style: TextStyle(
          fontWeight: FontWeight.w600,
          fontSize: 14,
          color: Colors.black),
    ),
    color: Colors.orange,
    borderSide: BorderSide(color: Colors.amber),
  ),

迁移后代码：

child: OutlinedButton(
    onPressed: onPressed,
    child: CustomText(
      text,
      style: TextStyle(
          fontWeight: FontWeight.w600,
          fontSize: 14,
          color: Colors.black),
    ),
    style: OutlinedButton.styleFrom(backgroundColor: Colors.orange, side: BorderSide(color: Colors.amber)),
  ),

这是背景颜色和颜色属性的官方参考： https://api.flutter.dev/flutter/material/ButtonStyle/backgroundColor.html

https://api.flutter.dev/flutter/material/MaterialButton/color.html

Answer 5

主题

我想避免手动设置每个

OutlinedButton

的主题，而是使用主题。

您可以使用

ThemeData

的

outlinedButtonTheme

来做到这一点：

   final color = ...;
   ThemeData(
    ...
    outlinedButtonTheme: OutlinedButtonThemeData(
        style: ButtonStyle(
          side: MaterialStateProperty.all(const BorderSide(color: color)),
          // surfaceTintColor: MaterialStateProperty.all(Colors.blue),
        )),
  );

Answer 6

Flutter 的文档说你需要定义 shape 和 side 属性

与 TextButton 或 ElevatedButton 不同，轮廓按钮具有默认的 ButtonStyle.side，它定义轮廓的外观。由于默认边不为空，因此它无条件地覆盖形状的 OutlinedBorder.side。换句话说，要指定轮廓按钮的形状及其轮廓的外观，必须指定 ButtonStyle.shape 和 ButtonStyle.side 属性。

所以，你需要通过

child: OutlinedButton(
  onPressed: () {},
  style: OutlinedButton.styleFrom(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(10.0),
    ),
    side: const BorderSide(
      width: 5.0,
      color: Colors.blue,
    ),
  ),
  child: const Text('outline button'),
),