Add border Radius in the Inkwell widget in flutter
Solution 1
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 2
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 3
The Inkwell widget has a property borderRadius of type BorderRadius
InkWell(
borderRadius: BorderRadius.circular(25),
// ...
);
Related videos on Youtube
Pratyay Sinha
Updated on September 16, 2022Comments
-
Pratyay Sinha over 1 year
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.
-
MBK almost 3 yearsthis answer is more short and precise