Flutter 2.0 - 如何更改 TextButton 按下时的初始颜色？

Question

FlatButton is deprecated and shouldn't be used. Used TextButton instead.

在我之前的

FlatButton

小部件上，我能够在按下时更改启动颜色。但现在我正在使用

TextButton

小部件，如何在

MaterialApp ThemeData

上或直接在

TextButton

小部件上有效地更改其颜色。

目前这是我的文本按钮

TextButton(
  style: TextButton.styleFrom(
    primary: Colors.red,
    textStyle: TextStyle(
      color: Colors.black45,
      fontFamily: "Courier Prime",
    ),
    backgroundColor: Colors.transparent,
  ),
  onPressed: () {},
  child: Text(
    "Student",
    style: TextStyle(fontWeight: FontWeight.bold),
  ),
),

overlayColor is used to indicate that the button is focused, hovered, or pressed.

但是我找不到这个

overlayColor

Answer 1

首先请记住，TextButton 上的主要属性设置其文本和图标的颜色。它不会改变波纹颜色。其次，在 Textbutton 中没有直接属性来更改启动颜色。因此，如果您想将初始颜色更改为透明，可以这样做。

TextButton(
  style: ButtonStyle(
    overlayColor: MaterialStateProperty.all(Colors.________),
  ),
)

Answer 2

您可以使用辅助方法

TextButton

快速设置

TextButton.styleFrom()

的初始颜色。请注意，这实际上会根据前景色设置前景色和飞溅颜色，这在大多数情况下都是您想要的：

TextButton(
  style: TextButton.styleFrom(primary: Colors.red),
  child: const Text('Text Button'),
  onPressed: () {},
)

现场演示

Answer 3

TextButton(            
 style: ButtonStyle(
  overlayColor: MaterialStateColor.resolveWith((states) => Colors.red),
  ),
 child: ..., 
)

参考 Flutter TextButton splashColor 属性

Answer 4

您可以像这样更改启动颜色：

            Theme(
              data: ThemeData(
                splashColor: Colors.red,
                highlightColor: Colors.black.withOpacity(.5),
              ),
              child: ListTile(
                  title: Text(
                    "New theme splash",
                    textAlign: TextAlign.center,
                  ),
                  onTap: () {}),
            ),

Answer 5

flutter v3.1.0之后你可以实现像

TextButton(
  style: TextButton.styleFrom(
    backgroundColor: Colors.blueGrey,
    foregroundColor: Colors.white
  ),
  child: const Center(child: Text('OK')),
  onPressed: () {},
)