如何在 Flutter 中禁用 FlatButton 的飞溅突出显示？答案

【问题标题】：How to disable splash highlight of FlatButton in Flutter?如何在 Flutter 中禁用 FlatButton 的飞溅突出显示？
【发布时间】：2018-08-12 22:06:52
【问题描述】：

我有一个平面按钮。我不希望单击按钮时出现飞溅突出显示。我尝试将初始颜色更改为透明，但没有奏效。这是我的 FlatButton 的代码。

Widget button = new Container(
  child: new Container(
    padding: new EdgeInsets.only(bottom: 20.0),
    alignment: Alignment.center,
    child: new FlatButton(
      onPressed: () {
        _onClickSignInButton();
      },
      splashColor: Colors.transparent,
      child: new Stack(
        alignment: Alignment.center,
        children: <Widget>[
          new Image.asset('images/1.0x/button1.png',
          ),
          new Text("SIGN IN",
            style: new TextStyle(
                color: Colors.white,
                fontWeight: FontWeight.bold,
                fontSize: 16.0
              ),
          )
        ],
      ),
    ),
  ),
);

【问题讨论】：

也许您也只想将hightlightColor 设置为Colors.transparent。

标签： android ios user-interface dart flutter

【解决方案1】：

我希望一个不可见的高亮颜色可以做你想做的事：

new FlatButton({
  ...
  splashColor: Colors.transparent,  
  highlightColor: Colors.transparent, // makes highlight invisible too
})

【讨论】：

highlightColor 实际上是 OP 共享代码中缺少的参数...我还建议编辑代码 sn-p 以明确 (invisible) 是注释而不是代码的一部分，并且逗号是必要的

【解决方案2】：

由于 flatbutton 已被贬值，对于新的 textButton 我们有类似的东西。

TextButton(
   style: ButtonStyle(
   overlayColor: MaterialStateProperty.resolveWith<Color>(
  (Set<MaterialState> states) {
    if (states.contains(MaterialState.focused))
      return Colors.red;
    if (states.contains(MaterialState.hovered))
        return Colors.green;
    if (states.contains(MaterialState.pressed))
        return Colors.blue;
    return null; // Defer to the widget's default.
}),
),
 onPressed: () { },
 child: Text('TextButton with custom overlay colors'),
)

【讨论】：

【解决方案3】：

2021 年 12 月：

根据 flutter/lib/src/material/button_style.dart 第 247 行，正确的做法是：

style: TextButton.styleFrom(
  splashFactory: NoSplash.splashFactory,
),

/// Use [NoSplash.splashFactory] to defeat ink splash rendering. For example:
ElevatedButton(
  style: ElevatedButton.styleFrom(
    splashFactory: NoSplash.splashFactory,
  ),
  onPressed: () { },
  child: Text('No Splash'),
),

【讨论】：

据我所知，这并没有改变我按钮上的任何内容，仍然显示突出显示。