控制 Flutter ElevatedButton 上的点击波纹效果

Question

问题

如何更改ElevatedButton 上的点击波纹效果的持续时间和颜色？有关这种涟漪效应的工作示例，请参阅飞镖垫链接。

ElevatedButton 工作代码

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

/// This is the main application widget.
class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: MyStatelessWidget(),
      ),
    );
  }
}

class MyStatelessWidget extends StatelessWidget {
  MyStatelessWidget({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        onPressed: () {},
        child: const Text('Elevated Button', style: TextStyle(fontSize: 20)),
      ),
    );
  }
}

DartPad 链接

https://dartpad.dev/369b01f31b06c18d4f47076319aa4da4

Answer 1

这很简单。只需确保在按下当前 MaterialState 时返回所需的叠加颜色即可。

    Scaffold(
        body: Center(
          child: ElevatedButton(
            onPressed: () {},
            style: ButtonStyle(
              overlayColor: MaterialStateProperty.resolveWith(
                (states) {
                  return states.contains(MaterialState.pressed)
                      ? Colors.red
                      : null;
                },
              ),
            ),
            child: const Text(
              'Elevated Button',
              style: TextStyle(fontSize: 20),
            ),
          ),
        ),
      ),

更好的是，您可以将其用作您的按钮样式：

ElevatedButton.styleFrom(
    onPrimary: Colors.yellow,
 ),

唯一的问题是它会影响你的前景色，但这还不错。

所以你的自定义启动按钮应该是这样的：

      ElevatedButton(
            onPressed: () {},
            style: ElevatedButton.styleFrom(
              onPrimary: Colors.yellow,
            ),
            child: const Text(
              'Elevated Button',
              style: TextStyle(fontSize: 20, color: Colors.white),
            ),
          ),

但是，更改启动的持续时间是不可能的，因为从源代码来看，按钮的启动工厂是硬编码的，并且无法修改。

...
splashFactory: InkRipple.splashFactory,

正如this answer 所示，您需要修改启动工厂以更改持续时间。

如果您确实需要该功能，完成该功能的最快方法是从源代码复制代码并自己重新实现。但我不建议这样做。

更合适的方法是使用 Material 和 InkWell 创建自己的自定义按钮，但这不是提升按钮

Answer 2

您可以使用animationDuration 来表示持续时间，并使用onPrimary 来更改初始颜色。

return ElevatedButton(
      onPressed: action,
      child:
          Text(text, style: Theme.of(context).textTheme.subtitle1),
      style: ElevatedButton.styleFrom(
        onPrimary: Colors.black,
        animationDuration: Duration(milliseconds: 1000),
        primary: Colors.red,
        shadowColor: Colors.redAccent,
        elevation: 10,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(15),
        ),
      ),
    );