CODEWITHSUNDEEP
flutterdartwidgetflutter-layout
needHelp
needHelp

Reputation: 599

Add border Radius in the Inkwell widget in flutter

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.

Upvotes: 49

Views: 36097

Answers (6)

Ced
Ced

Reputation: 17337

You can use the clip behavior to not have hard coded values when you have a widget that already has a border radius, eg a Card for example:

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

Upvotes: 8

Sh4msi
Sh4msi

Reputation: 1531

The Inkwell widget has a property borderRadius of type BorderRadius

InkWell(
  borderRadius: BorderRadius.circular(25),
  // ...
);

OR

InkWell(
  customBorder: CircleBorder(),
  // ...
);

Upvotes: 54

RuslanBek
RuslanBek

Reputation: 2009

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(), // ... );

Upvotes: 7

Konstantin Kozirev
Konstantin Kozirev

Reputation: 1262

To make splash also rounded, use suitable options of clipBehavior for Material widget.

Upvotes: 4

Ritesh Ghimire
Ritesh Ghimire

Reputation: 103

InkWell(
  borderRadius: BorderRadius.circular(12),
  child: // ...
);

Upvotes: 5

Matthias
Matthias

Reputation: 4163

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),
),

Upvotes: 97

Related Questions