如何在 flutter 中为 PhysicalModel 添加波纹效果

Question

我正在尝试创建一个登录按钮，按下它时会显示动画。但是当点击按钮（在 PhysicalModel 上）时，涟漪效应只显示在登录文本上，而不是完全在物理模型上。如何向 PhysicalModel 添加涟漪或从 MaterialButton 移除涟漪效果？

PhysicalModel(
            color: Colors.teal,
            borderRadius: BorderRadius.circular(50.0),
            child: MaterialButton(
                   key: _globalKey,
                   child: Text("Login"),
                   onPressed: () {
                        setState(() {
                             if (_state == 0) {
                                    animateButton();
                             }
                        });
                   },
                   elevation: 4.0,
                   minWidth: _width,
                   height: 20.0,
            ),
)

Answer 1

如果要删除 MaterialButton 的启动颜色，只需将这些颜色更改为透明即可。

  MaterialButton(
    splashColor: Colors.transparent,
    highlightColor: Colors.transparent,

如果你想要 PhysicalModel 的连锁反应：

    PhysicalModel(
                  color: Colors.teal,
                  borderRadius: BorderRadius.circular(50.0),
                  child: RawMaterialButton(
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(50.0)),
                    padding: EdgeInsets.symmetric(vertical: 15.0, horizontal: 30.0),
                    materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                    child: Text("Login"),
                    onPressed: () {
                      setState(() {});
                    },
                    elevation: 4.0,
                  ),
                )

Answer 2

Adding Material Touch Ripples

Flutter 提供了 InkWell Widget 来实现这个效果。

定义：

A rectangular area of a Material that responds to touch.

另外：InkWell 小部件必须有一个 Material 小部件作为祖先。 Material 小部件是实际绘制墨水反应的地方。这符合 material 设计前提，其中 Material 是通过散布墨水实际对触摸做出反应的部分。

Directions

创建一个我们想要点击的小部件

将其包装在 InkWell Widget 中以管理点击回调和涟漪动画

    InkWell(
        // When the user taps the button, show a snackbar
        onTap: () {
          Scaffold.of(context).showSnackBar(SnackBar(
            content: Text('Tap'),
          ));
        },
        child: PhysicalModel(
          color: Colors.teal,
          borderRadius: BorderRadius.circular(50.0),
          child: MaterialButton /*or a FlatButton */(
            key: _globalKey,
            child: Text("Login"),
            onPressed: () {
              setState(() {
                if (_state == 0) {
                  animateButton();
                }
              });
            },
            elevation: 4.0,
            minWidth: _width,
            height: 20.0,
          ),
        )),

Answer 3

这是我的解决方案，您只需将您的 PhysicModel 颜色设置为透明，同时使用 Ink 小部件将颜色设置为您的子小部件所需的颜色：

PhysicalModel(
                        borderRadius: BorderRadius.circular(16),
                        shadowColor: Colors.grey.withAlpha(10),
                        elevation: 16,
                        color: Colors.transparent,
                        child: Ink(
                            color: Theme.of(context).scaffoldBackgroundColor,
                            child:

很简单，既可以有墨池效果，又可以保持颜色。

如何在 flutter 中为 PhysicalModel 添加波纹效果

How to add ripple effect to PhysicalModel in flutter

dart

flutter

flutter-animation