Splash effect onTap on widget

Question

it's quite difficult using InkWell to get the result i want like this, but the code it's not good. the code works fine i need more simple approach so i can give any widget with splash effect, im bored with GestureDetector since it has no effect. Do you have any better code?

Container(
         margin: EdgeInsets.fromLTRB(0, 0, 0, 0),
         width: 227,
         height: 227,
         decoration: BoxDecoration(
           image: DecorationImage(
             image: NetworkImage(
                 'https://images.unsplash.com/photo-1587207433549-7d796bccc6a2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8YnV0dG9ufGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60'),
             fit: BoxFit.cover,
           ),
         ),
         child: Material(
           color: Colors.transparent,
           child: InkWell(
             // borderRadius: BorderRadius.circular(50),
             onTap: () {},
           ),
         ),
       ),

your code working correct as per above image what was the issue? — Ravindra S. Patil, Apr 21 '22 at 05:00
yes it's working correctly but the code doesn't looks good, is there any better way to do it ? — CCP, Apr 21 '22 at 05:30

score 0 · Answer 1 · answered Apr 21 '22 at 06:03

Try below code hope its helpful to you.Wrap your Inkwell inside Ink.image().

Container(
            width: 227,
            height: 227,
            child: Ink.image(
              image: NetworkImage('https://images.unsplash.com/photo-1587207433549-7d796bccc6a2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8YnV0dG9ufGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60'),
              fit: BoxFit.cover,
              child: InkWell(
                onTap: () {},
              ),
            ),
          ),

You can refer my answer here also.

Result screen->

score 0 · Answer 2 · answered Apr 21 '22 at 06:05

MaterialButton(
            onPressed: () {},
            splashColor: Colors.white,
            minWidth: 0,
            padding: EdgeInsets.zero,
            materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
            child: Ink.image(
              image: NetworkImage(url),
              width: 227,
              height: 227,
              fit: BoxFit.cover,
            ),
          ),

Splash effect onTap on widget

2 Answers2

Linked