How Do You Use Border Radius All in Flutter?

In Flutter, you apply a border radius to all corners of a widget, typically a Container, by using the borderRadius property within its decoration, which is usually a BoxDecoration. You achieve a uniform radius for all corners using the BorderRadius.circular() constructor.

Applying Uniform Border Radius

The most common way to add rounded corners to a box or container in Flutter is by providing a BoxDecoration to the decoration property of a widget like Container. The BoxDecoration class has a borderRadius property that accepts a BorderRadius object.

To make all corners uniformly rounded, you use the BorderRadius.circular() static method. This method takes a single double value, which represents the radius applied to all four corners (top-left, top-right, bottom-left, bottom-right).

As the reference states: "Use the Radius.circular(value) constructor to set a uniform radius for all corners." While the reference mentions Radius.circular, in practice, you apply this uniformity via BorderRadius.circular(), which internally uses Radius.circular for each corner.

Here's the basic structure:

Container(
  decoration: BoxDecoration(
    // ... other decoration properties like color, border, etc.
    borderRadius: BorderRadius.circular(value), // Apply uniform radius to all corners
  ),
  // ... child widget
)

Where value is the desired radius (e.g., 8.0, 12.0, 20.0).

Example Implementation

Let's look at a practical example using a Container with a background color and a border, applying a uniform border radius:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Border Radius Example'),
        ),
        body: Center(
          child: Container(
            width: 200,
            height: 100,
            decoration: BoxDecoration(
              color: Colors.blueAccent, // Background color
              border: Border.all( // Optional: Add a border
                color: Colors.red,
                width: 2.0,
              ),
              borderRadius: BorderRadius.circular(16.0), // <--- Applies 16.0 radius to all corners
            ),
            alignment: Alignment.center,
            child: Text(
              'Rounded Corners',
              style: TextStyle(color: Colors.white, fontSize: 18),
            ),
          ),
        ),
      ),
    );
  }
}

In this example, BorderRadius.circular(16.0) ensures that the Container has smoothly rounded corners with a radius of 16 pixels on all sides.

Key Properties

When applying a uniform border radius, you primarily interact with these BoxDecoration properties:

Property	Type	Description
color	Color	The background color of the box.
border	Border	The border of the box. Use Border.all() for uniform border.
borderRadius	BorderRadius?	The radius for each corner. Use BorderRadius.circular() for uniformity.
boxShadow	List<BoxShadow>?	Shadows cast by the box.

Summary

To use border radius for all corners in Flutter:

1. Wrap your widget (like Container) in a decoration.
2. Use a BoxDecoration for the decoration property.
3. Set the borderRadius property of BoxDecoration.
4. Use BorderRadius.circular(value) with your desired radius value to round all corners uniformly.

This method provides a simple and efficient way to give your UI elements a softer, rounded look.