flutter - png 或 svg 图像的颤动波纹效果

Question

我正在寻找某种方式在颤动的 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中做到这一点？

Answer 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,
    ),
  ),

Answer 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();
            },
          ),
        ),
      ),
    ],
  ),
),