close

How to Give Rounded Corner to Container In Flutter?

Hello Guys How are you all? Hope you all are fine. Today in this tutorial we are going to learn How to Give Rounded Corner to Container In Flutter? So without wasting your time lets start this tutorial.

How to Give Rounded Corner to Container In Flutter?

1. Using borderRadius.
2. Using shape.
3. Using ClipRRect.

1. Give Rounded Corner to Container By using borderRadius

To add a border to the container we can give borderRadius to decoration property in Container. Let look at our Example. You have to add decoration to Container. BoxDecoration has borderRadius Property so that we are going to use BorderRadius.circular.

            Container(
                height: 100,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(20.0),
                  color: Colors.red,
                ),
              )

Output Is something like below.

How to Give Rounded Corner to Container In Flutter?,
Rounded Corner to Container In Flutter,
Rounded Corner Container flutter,
rounded corner to container,
corner to container in flutter

2. Give Rounded Corner to Container By using shape

Give decoration to Container and Boxdecoration has Shape property we are going to use it. So, To make it completely circle. we are using shape.

Container(
  height: 100,
  decoration: BoxDecoration(
    shape: BoxShape.circle,
    color: Colors.green,
  ),
),

Output is as like below.

How to Give Rounded Corner to Container In Flutter?,
Rounded Corner to Container In Flutter,
Rounded Corner Container flutter,
rounded corner to container,
corner to container in flutter

3. Give Rounded Corner to Container By using ClipRRect

If you dont want to give decoration then simply wrap your Container with ClipRRect. ClipRRect has borderRadius Property so that we can use borderRadius. Just look at below exapmle.

            ClipRRect(
                borderRadius: BorderRadius.circular(20.0),
                child: Container(
                  height: 100,
                  color: Colors.yellow,
                ),
              ),

Output

How to Give Rounded Corner to Container In Flutter?,
Rounded Corner to Container In Flutter,
Rounded Corner Container flutter,
rounded corner to container,
corner to container in flutter

Faq

  1. How to Give Rounded Corner to Container In Flutter?

    To add a border to the container we can give border-radius to decoration property in Container. Let look at our Example. You have to add decoration to Container. BoxDecoration has borderRadius Property so that we are going to use BorderRadius.circular.

  2. Give Rounded Corner to Container In Flutter

    To add a border to the container we can give border-radius to decoration property in Container. Let look at our Example. You have to add decoration to Container. BoxDecoration has borderRadius Property so that we are going to use BorderRadius.circular.

Summery

So, It’s All About this tutorial. I hope this tutorial helps you to solve your error. Please Comment Below if You stucks anywhere with my code.

Also Check Out Below Tutorials

Leave a Comment

%d bloggers like this: