png 或 svg 图像的颤动波纹效果答案

【问题标题】：Flutter ripple effect for png or svg imagespng 或 svg 图像的颤动波纹效果
【发布时间】：2021-11-28 23:23:25
【问题描述】：

我正在寻找某种方式在颤动的 png 或 svg 图像上添加波纹效果，而不覆盖图像中的透明部分。

我使用此代码在 svg 图像上添加波纹效果：

Stack(
      children: [
        SvgPicture.asset(
          R_Image.BACK,
          width: 45,
          height: 45,
          fit: BoxFit.fill,
        ),
        Positioned.fill(
          child: Material(
            color: Colors.transparent,
            child: InkWell(
              onTap: () {
                Navigator.of(context).pop();
              },
            ),
          ),
        ),
      ],
    )

结果如下：

如何从波纹效果中去除 svg 图像的透明部分？

在android中，我为此使用@android:id/mask，但是如何在flutter中做到这一点？

【问题讨论】：

标签： flutter svg flutter-layout ripple-effect

【解决方案1】：

试试这个

 body: new Center(
    child: new Container(
      child: new Material(
        child: new InkWell(
          onTap: (){print("tapped");},
          child: new Container(
            width: 100.0,
            height: 100.0,
          ),
        ),
        color: Colors.transparent,
      ),
      color: Colors.orange,
    ),
  ),

【讨论】：

图片在哪里？
在高度和宽度之后在容器中添加图像
不行，波纹效果只是在图像后面绘制，仍然存在上述问题
你试过了吗？ stackoverflow.com/questions/61703352/…
与我的问题无关。

【解决方案2】：

尝试用 ClipRRect 包装 Stack

ClipRRect(
  borderRadius: BorderRadius.circular(10.0),
  child: Stack(
    clipBehavior: Clip.none,
    children: [
      SvgPicture.asset(
        R_Image.BACK,
        width: 45,
        height: 45,
        fit: BoxFit.fill,
      ),
      Positioned.fill(
        child: Material(
          color: Colors.transparent,
          child: InkWell(
            onTap: () {
              Navigator.of(context).pop();
            },
          ),
        ),
      ),
    ],
  ),
),

【讨论】：

此方法不依赖于图像的透明像素，因此不准确，不适用于不同的图像