How to Give Rounded Corner to Container In Flutter ?

· 3 min read
How to Give Rounded Corner to Container In Flutter
How to Give Rounded Corner to Container In Flutter

ClipRect Widget is used to clip a child by using a rectangular shape. ClipRect Widget is commonly used with these widgets, which commonly paint outside their bounds. So in this article, we will walk through how to give Rounded Corner to Container in flutter…

How to Give Rounded Corner to Container In Flutter?

There are 2 known forms for solving and defining maths equations rectangle and sq. shape.

In flutter, it is simple to create an easy rectangle and sq. form using container widget however they need sharp edges and therefore the corner is sharp however using the BoxDecoration property of box decoration we are able to simply and make the perimeters rounded.

The box decoration includes a sub-property named as BorderRadius.all() that supports the double worth and wont to create the perimeters rounded within the container widget

So first, Try using the property border-radius from BoxDecoration

Container(
  decoration: BoxDecoration(
    border: Border.all(
      color: Colors.red[500],
    ),
    borderRadius: BorderRadius.all(Radius.circular(20))
  ),
  child: ...
)

So, To make it completely circle.

Container(
      decoration: BoxDecoration(
        shape: BoxShape.circle
      ),

To make it circle at selected spots.

Container(
      
      decoration: BoxDecoration(
          borderRadius: BorderRadius.only(
              topRight: Radius.circular(40.0),
              bottomRight: Radius.circular(40.0)),
             topLeft: Radius.circular(40.0),
              bottomLeft: Radius.circular(40.0)), 
         
      child: Text("hello"),
    ),

or

 Container(
   decoration: BoxDecoration(
   borderRadius: BorderRadius.all(Radius.circular(20))
 ),
 child: ...
)
Container(
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(20.0),
      border: Border.all(
        color: HexColor('#C88A3D'),
        width: 3.0
      )
    ),
    child: Container(
      decoration: new BoxDecoration(borderRadius:
      BorderRadius.circular(20.0),
      color: Colors.white,),
    )
  ),

So now, Enhancement for the above answer.

Container(
  decoration: BoxDecoration(
    border: Border.all(
      color: Colors.red[500],
    ),
   borderRadius: BorderRadius.circular(20) // use instead of BorderRadius.all(Radius.circular(20))
  ),
  child: ...
)

So you can use the ClipRRect Widget :

ClipRRect (
  borderRadius: BorderRadius.circular(5.0),
  child: Container(
                    height: 25,
                    width: 40,
                    color: const Color(0xffF8742C),
                    child: Align(
                        alignment: Alignment.center,
                        child: Text("Withdraw"))),
          )

Conclusion:

Keep Learning!!! Keep fluttering!!!

So in this article, we have been through how to give Rounded Corner to Container in flutter...

So do not forget to drop your valuable suggestions/feedback. We would love to assist you.

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget GuideFlutter ProjectsCode libs and etc.

FlutterAgency.com is one of the most popular online portals dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge of Flutter.

Leave a Reply