Flutter ripple effect for png or svg images-CodePudding

I am looking for someway to add ripple effect on the png or svg images in flutter, without covering the transparent parts in image.

I use this code to add ripple effect over an svg image:

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

And the result is as follows:

How to remove transparent parts of svg image from ripple effect?

In android, I use @android:id/mask for this purpose, but how to do that in flutter?

CodePudding user response：

Try this

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

CodePudding user response：

Try to wrap Stack with ClipRRect

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