flutter 如何更改OutlinedButton边框颜色？

jucafojl 于 2022-11-30 发布在 Flutter

关注(0)|答案(5)|浏览(537)

Flutter小部件时，我尝试使用BorderSide（颜色：Colors.blue）. 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')
            ),
        ),
    );
  }
}

flutter

来源：https://stackoverflow.com/questions/57874576/how-to-change-outlinedbutton-border-color

5条答案

按热度按时间

jvlzgdj91#

使用style属性：

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

赞(0）回复(0）举报 2022-11-30

yxyvkwin2#

- 使用 * 样式 * 属性**

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

- 或者试试这两种方法**

第一次
结果可能类似于

赞(0）回复(0）举报 2022-11-30

ctehm74n3#

Style属性将起作用

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

赞(0）回复(0）举报 2022-11-30

jpfvwuh44#

我得到的'大纲按钮'是过时的，不应该使用。使用大纲按钮代替。请参阅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)),
  ),

下面是backgroundColor和颜色属性的正式引用：https://api.flutter.dev/flutter/material/ButtonStyle/backgroundColor.html
https://api.flutter.dev/flutter/material/MaterialButton/color.html

赞(0）回复(0）举报 2022-11-30

13z8s7eq5#

主题化
我想避免手动为每个OutlinedButton设置主题，而使用主题。
您可以使用ThemeData的outlinedButtonTheme执行此操作：

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

赞(0）回复(0）举报 2022-11-30

我来回答

flutter 如何更改OutlinedButton边框颜色？

5条答案

相关问题

热门标签

最新问答