Add border Radius in the Inkwell widget in flutter

Issue

I want to add a hover color property to a container using the inkwell widget but the container has its own border-radius and when I am using the hover property using inkwell it is taking its custom shape and making it look rectangle in shape after hovering on the inkwell.

Here’s my code snippet:

InkWell(
            
            onTap: () {},
            hoverColor: Colors.red[200],
            child: Container(
              width: 70.w,
              height: 60.h,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(20),
              ),
              child: Row(
                children: [
                  Image.asset(
                    'images/call.png',
                    height: 30.h,
                  ),
                  Text(
                    'Call',
                    style: white,
                  ),
                ],
              ),
            ),
          ),

I hope I made you understand the problem well

Please help me solve the issue or provide an alternate to it.

Solution

You can use the clip behavior to not have hard coded values:

    return Card(
      clipBehavior: Clip.antiAlias,
      child: InkWell(

Note that you need a material widget around InkWell, Card is one, Material is another that could be used.

Answered By – Ced

Answer Checked By – Robin (FlutterFixes Admin)

Leave a Reply

Your email address will not be published.