Adding Rounded Borders in Flutter

When designing user interfaces in Flutter, you may want to add rounded borders to your widgets to give them a more visually appealing and polished look. Thankfully, Flutter provides an easy way to accomplish this using the Container widget and its borderRadius property. In this blog post, I will walk you through the steps to add rounded borders to your Flutter widgets.

1. Creating a Rounded Container

To add rounded borders to a widget, we will use the Container widget in Flutter. The Container widget allows you to customize the appearance of its child widget, including its background color and border radius.

Let's start by creating a simple rounded container with a blue background color and a border radius of 20. Here is the code:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Rounded Borders Demo',
      home: Scaffold(
        body: Center(
          child: Container(
            width: 200,
            height: 200,
            decoration: BoxDecoration(
              color: Colors.blue,
              borderRadius: BorderRadius.circular(20),
            ),
          ),
        ),
      ),
    );
  }
}

In this example, we created a Container widget with a width and height of 200. The decoration property is set to a BoxDecoration widget, which allows us to specify the container's appearance. We set the color property to Colors.blue to give the container a blue background color. Finally, we set the borderRadius property to BorderRadius.circular(20) to make the corners rounded with a radius of 20.

Feel free to adjust the values of width, height, color, and borderRadius to fit your specific requirements.

2. Adjusting the Rounded Borders

To adjust the border, we can start by changing the value inside the circular property to a higher number, like 50:

Container(
  width: 200,
  height: 200,
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(50),
  ),
),

By adjusting the value of the borderRadius, you can control the degree of rounding applied to the corners. Increasing the value will result in more pronounced rounding, giving your widgets a polished and visually appealing appearance. We can even make a full circle.

Container(
  width: 200,
  height: 200,
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(200),
  ),
),

But what if we only want to have the top borders rounded? No problem!

Container(
  width: 200,
  height: 200,
  decoration: const BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.vertical(
      top: Radius.circular(50),
    ),
  ),
),

And the same goes if we only want to have 1 rounded corner:

Container(
  width: 200,
  height: 200,
  decoration: const BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.only(
      bottomLeft: Radius.circular(50),
    ),
  ),
),

3. Adding Rounded Borders to Existing Widgets

What if you want to add rounded borders to an existing widget? No worries! Flutter allows you to wrap any widget with a Container widget and apply the desired decoration.

Here's an example of how to add rounded borders to an existing widget, in this case, an IconButton:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Rounded Borders Demo',
      home: Scaffold(
        body: Center(
          child: Container(
            width: 200,
            height: 200,
            decoration: BoxDecoration(
              color: Colors.blue,
              borderRadius: BorderRadius.circular(200),
            ),
            child: IconButton(
              icon: const Icon(
                Icons.check,
                size: 50,
                color: Colors.white,
              ),
              onPressed: () => print('I am clicked'),
            ),
          ),
        ),
      ),
    );
  }
}

In this code snippet,  we have wrapped the IconButton widget with a Container widget. By wrapping the widget with a Container and setting the desired decoration, you can easily add rounded borders to any widget in Flutter.

However, if you want to apply rounded borders to a button, there is a better approach. See the following post:

Create Rounded Buttons in Flutter

Learn how to create rounded buttons in Flutter using the ElevatedButton. Discover how to create a custom RoundedButton widget for reusability.

Code OnwardsTijn van den Eijnde

4. Conclusion

Adding rounded borders to widgets in Flutter is a simple and effective way to enhance the visual appeal of your user interfaces. By leveraging the Container widget and its borderRadius property, you can easily achieve this effect in your Flutter applications.

In this blog post, we covered the basics of adding rounded borders to widgets in Flutter. We explored creating a rounded container and applying the desired decoration, as well as adding rounded borders to existing widgets by wrapping them with a Container.

Now it is your turn to incorporate rounded borders into your Flutter applications! Experiment with different border radius and colors to achieve the desired look and feel.