Question 74760 in Flutter Question posted in
The official Flutter documentation can be found here.

Make Image.asset have ripple effect on tap flutter

I am trying to make my Image.asset() in Flutter have a ripple effect whenever the image is tapped

Below are my image assets

Image.asset('images/ic_close.png')

I have tried placing it inside InkWell and providing a splash color but it’s also not working. Below is how I have tried to achieve a ripple effect using InkWell

InkWell(
  splashColor: Colors.black87,
  onTap: () {
    Navigator.pop(context);
  },
  child: Image.asset('images/ic_close.png'),
)
Tags:

2

Answers


  1. 0

    You have to wrap your Inkwell also with transparent Material widget. If your Image have no background, it will work like this (because you see it through its transparent parts):

     Material(
                color: Colors.transparent,
                child: InkWell(
                  onTap: () {},
                  child: Container(
                    height: 50,
                    width: 50,
                    color: Colors.transparent,
                    child: Image.asset('images/ic_close.png'),
                  ),
                ),
              ),

    If you want to overlay your full image, I only found a ways with stack. Like:

    Stack(
            children: [
              Image.asset('images/ic_close.png'),
              Material(
                color: Colors.transparent,
                child: InkWell(
                  onTap: () {},
                  child: Container(
                    height: 50, // height of your image
                    width: 50, // width of your image
                    color: Colors.transparent,
                    
                  ),
                ),
              ),
            ],
          ),
    Login or Signup to reply.
  2. 0

    To get a ripple effect, you need to use the Ink.image constructor.

    But The problem is that Ink.image doesn’t have an onTap. so, let’s create our own reusable widget that supports an onTap:

    class CustomImage extends StatelessWidget {
  final String imageUrl;
  final Function() onTap;

  const CustomImage({super.key, required this.imageUrl, required this.onTap});

  @override
  Widget build(BuildContext context) {
    return Ink.image(
      image: AssetImage(imageUrl),
      fit: BoxFit.cover,
      child: InkWell(
        onTap: onTap,
      ),
    );
  }
}

    Usage:

    SizedBox(
            height: 200,
            width: 200,
            child: CustomImage(
              imageUrl: 'images/ic_close.png',
              onTap: () {
                Navigator.pop(context);
              },
            ),
          )
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search