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 1: Matthias
The Inkwell
widget has a property customBorder
of type ShapeBorder
. You can use that to provide a borderRadius
to your Inkwell
.
E.g.:
customBorder: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
),
Solution 2: Sh4msi
The Inkwell widget has a property borderRadius of type BorderRadius
InkWell(
borderRadius: BorderRadius.circular(25),
// ...
);
OR
InkWell(
customBorder: CircleBorder(),
// ...
);
Solution 3: Ritesh Ghimire
InkWell(
borderRadius: BorderRadius.circular(12),
child: // ...
);
Solution 4: Konstantin Kozirev
To make splash also rounded, use suitable options of clipBehavior
for Material
widget.
Solution 5: RuslanBek
Simple and New Approach/Solution
I somehow agree with @Matthias's answer but if you need more realistic answer rather than giving RoundedRectangleBorder
to customBorder
property, then simply use CircleBorder()
like an example below:
InkWell(customBorder: CircleBorder(), // ... );
Solution 6: Ced
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.