Chrome Extension

Add border radius to container in flutter

Container(
    margin: EdgeInsets.all(30.0),
    padding: EdgeInsets.all(20.0),
    decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10.0),
        color: Colors.red,
    ),
    child: Text(
        'Hello world'
    ),
),
Best JSON Validator, JSON Tree Viewer, JSON Beautifier at same place. Check how cool is the tool

Here we are going to show you how to make rounded corners of a container or add border-radius to a container in Flutter. You can use decoration property for that and pass BoxDecoration with borderRadius property in it. We have assigned a '10.0' scale radius to the container by using 'BorderRadius.circular(10.0)'.

Was this helpful?
2 Comments

If you want to add border-radius of specific corners then we can use BorderRadius.only for decoration property value

Container(
    margin: EdgeInsets.all(30.0),
    padding: EdgeInsets.all(20.0),
    decoration: BoxDecoration(
        borderRadius: BorderRadius.only(
            topLeft: Radius.circular(15.0), 
            bottomLeft: Radius.circular(10.0),
            bottomRight: Radius.circular(20.0),
            topRight: Radius.circular(10.0)
        ),
        color: Colors.red,
    ),
    child: Text(
        'Hello world'
    ),
),
Join Devsheet Ask a Question