Rounded Corner Containers in Flutter - BoxDecoration in Flutter

BoxDecoration provides a lot of features for Containers. Shadows, rounded corners, amazing animated backgrounds are some of them. In this tutorial, we are going to learn how to create rounded corners of containers in Flutter.

Contents

• Decoration of Container

• Border Radius

• Example

• Result

Decoration of Container

The Container widget in Flutter has a field known as decoration. We can apply a Decoration type of an Object such as BoxDecoration, ShapeDecoration or Custom decoration. Here

Container(
  ...
  decoration: ...
),

With the help of decoration, we can create many anythings from the Container widget. In this tutorial, we will learn to create Rounded corners.

Border Radius

If anyone has learnt web development, they will easily relate the feature to create rounded div containers. Here in Flutter also, we can create rounded corners with the help of the borderRadius field. See the following image to understand.

For the border-radius feature, we need to use the decoration field and then apply the borderRadius. We can do it following two decorations:

• ShapeDecoration

• BoxDecoration

We are going to use BoxDecoration because we can apply the colour also in BoxDecoration.

Example

First, create a Container widget with equal width and height as follows:

Container(
  width: 200,
  height: 200,
  ...
),

Then apply the BoxDecoration to the decoration field. Apply the colour of your choice and then pass the borderRadius value.

Container(
  ...
  decoration: BoxDecoration(
    color: Colors.red,
    borderRadius: BorderRadius.circular(radius),
  ),
),

The borderRadius takes a BorderRadius type of value so we have used BorderRadius.circular() for rounded corners. Here radius is any double value. So we have created a double variable called the radius.

double radius = 0.0;

Then we have created a Slider widget to adjust the BorderRadius so that we can see the change.

Slider(
  value: radius,
  onChanged: (value) {
    setState(() {
      radius = value;
    });
  },
  min: 0,
  max: 100,
  label: radius.toStringAsPrecision(2),
),

The Slider and the Container are rapped inside the Column widget.

Column(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    Slider(
      ...
    ),
    Container(
      ...
    ),
  ],
),

Result

Here we can see that we are sliding the Slider and the border radius is increasing until the Container becomes a circle. This is because we set the radius to 100 and the side length of the Container is 200. So the diameter of Box Radius becomes 200. Hence the Container is a circle.

Here is the full code if you need it.

class RoundedCorners extends StatefulWidget {
  const RoundedCorners({Key? key}) : super(key: key);

  @override
  _RoundedCornersState createState() => _RoundedCornersState();
}

class _RoundedCornersState extends State<RoundedCorners> {
  double radius = 0.0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Rounded Corners Container")),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Slider(
            value: radius,
            onChanged: (value) {
              setState(() {
                radius = value;
              });
            },
            min: 0,
            max: 100,
            label: radius.toStringAsPrecision(2),
          ),
          Container(
            width: 200,
            height: 200,
            decoration: BoxDecoration(
              color: Colors.red,
              borderRadius: BorderRadius.circular(radius),
            ),
          ),
        ],
      ),
    );
  }
}