Flutter ripple effect for png or svg images

Question

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?

score 0 · Answer 1 · answered Oct 09 '21 at 09:34

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

This method does not depend on transparent pixels of image, So this is not accurate and not work with different images — amir_a14, Oct 09 '21 at 09:44

score 0 · Answer 2 · answered Oct 09 '21 at 09:50

0

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

answered Oct 09 '21 at 09:50

Nilrajsinh Vaghela

163
5

and where is the image? – amir_a14 Oct 09 '21 at 10:00
add image in Container After height and width – Nilrajsinh Vaghela Oct 09 '21 at 10:01
1

Not works, ripple effect just draw behind the image and still have above problem – amir_a14 Oct 09 '21 at 10:11
Have you tried this? https://stackoverflow.com/questions/61703352/flutter-circular-ripple-effect-how-to-build-beautiful-material-bottomnavigation – Nilrajsinh Vaghela Oct 09 '21 at 10:13
It has nothing to do with my question. – amir_a14 Oct 09 '21 at 10:20

Flutter ripple effect for png or svg images

2 Answers2