如何更改轮廓按钮的初始颜色？

Question

最新的轮廓按钮没有任何飞溅颜色属性。如何更改飞溅颜色？大家有什么想法吗

                  OutlinedButton(
                      style: OutlinedButton.styleFrom(
                        onSurface: Colors.green,
                        side: BorderSide(color: alertColor, width: 1),
                      ),
                      onPressed: () {},
                      child: Row(
                        children: [
                          FaIcon(
                            FontAwesomeIcons.trash,
                            size: 14,
                            color: alertColor,
                          ),
                          SizedBox(
                            width: 10,
                          ),
                          Text(
                            'Delete',
                            style: getFont(14, FontWeight.w500, alertColor),
                          )
                        ],
                      ),
                    )

Answer 1

使用

ButtonStyle

代替

OutlinedButton.styleFrom

style: ButtonStyle(
         overlayColor:
               MaterialStateProperty.resolveWith<Color>((states) {
                if (states.contains(MaterialState.pressed)) {
                  return Colors.orange.withOpacity(.1);
               }
                return Colors.transparent;
       }),

Answer 2

您可以通过更改

OutlinedButton

 来更改 

style

的初始颜色

OutlinedButton.icon(
  onPressed: () {},
  icon: Icon(Icons.add),
  label: Label(
    text: 'Add',
  ),
  style: OutlinedButton.styleFrom(
    primary: Colors.pink, // <- this changes the splash color
    side: BorderSide(width: 1, color: Colors.pink),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(8),
    ),
  ),
),

Answer 3

更新：Flutter 3.X 支持 Material 3

IconButton(
  onPressed: (){},
  style: IconButton.styleFrom(
    highlightColor: Colors.red,
  ),
)

Answer 4

叠加颜色

https://api.flutter.dev/flutter/material/ButtonStyle/overlayColor.html

通常用于指示按钮的突出显示颜色 已聚焦、悬停或按下。

OutlinedButton.styleFrom(
              side: BorderSide(color: alertColor),
              disabledForegroundColor: Colors.green.withOpacity(0.38),
            ).copyWith(overlayColor: Colors.red)

Answer 5

好吧，我的错误。

primary

中的

OutlinedButton.styleFrom()

属性可以改变飞溅颜色。