flutter border radius with code examples

Flutter is a framework for building high-performance, high-fidelity mobile and web applications from a single codebase. One of the key features of Flutter is its ability to create beautiful, dynamic user interfaces quickly and easily. One of the ways Flutter accomplishes this is by providing rich support for customizing the appearance of widgets with properties like border radius. In this article, we will explore border radius in Flutter with code examples.

What is a border radius?

A border radius is a property that can be applied to the edges of a widget to give it rounded corners. It is commonly used to create visual interest and soften the edges of a UI element. Border radius can be applied to a variety of widgets in Flutter, including containers, buttons, images, and more.

How to add a border radius in Flutter

Border radius can be added to a widget in Flutter through its BorderRadius property. There are two ways to set the BorderRadius:

1. Using the BorderRadius.all() method, which sets the same radius for all four corners
2. Using the BorderRadius.only() method, which allows you to set different radii for each corner

The following code example shows how to add a border radius to a Container widget using the BorderRadius.all() method:

Container(
  height: 100,
  width: 100,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.all(Radius.circular(20)),
    color: Colors.blue,
  ),
)

The BorderRadius.all() method takes a single Radius value, which represents the radius of the corners of the widget. In this example, we set the radius to 20, which gives the container rounded corners with a radius of 20 pixels.

The following code example shows how to add a border radius to a Container widget using the BorderRadius.only() method:

Container(
  height: 100,
  width: 100,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.only(
      topLeft: Radius.circular(20),
      topRight: Radius.circular(20),
    ),
    color: Colors.green,
  ),
)

The BorderRadius.only() method takes four Radius values, one for each corner of the widget. In this example, we set the top-left and top-right corners to 20 pixels, while leaving the bottom-left and bottom-right corners as 0 pixels. This creates a container with rounded top corners only.

Advanced border radius options

Flutter also provides some advanced options for working with border radius, such as the ability to set different radii for each corner with the BorderRadius.only() method.

Container(
  height: 100,
  width: 100,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.only(
      topLeft: Radius.circular(20),
      topRight: Radius.circular(10),
      bottomLeft: Radius.circular(5),
      bottomRight: Radius.circular(25),
    ),
    color: Colors.yellow,
  ),
)

As you can see, by specifying a different Radius value for each corner of the widget, we can create a more complex and unique border radius.

Conclusion

Border radius is a powerful tool for creating beautiful UI designs in Flutter. With its rich support for customizing widget appearance, Flutter makes it easy to add rounded corners to any element in your application. By leveraging the BorderRadius property and its methods, you can create a wide range of visual effects and make your app stand out from the crowd. With the examples provided in this article, you should be well on your way to creating stunning, rounded UI elements in no time.

Sure! Let's dive a little deeper into Flutter's support for border radius and explore some additional options for customizing your UI.

Customizing border radius with shape

Flutter's ShapeBorder class provides even more options for customizing the border radius of widgets. With ShapeBorder, you can create complex, multi-layered shapes with rounded corners, beveled edges, and more.

To use ShapeBorder, you'll define a custom shape that extends from the ShapeBorder class. Here's an example:

class CustomShape extends ShapeBorder {
  final double borderRadius;

  CustomShape({required this.borderRadius});

  @override
  EdgeInsetsGeometry get dimensions => const EdgeInsets.all(0.0);

  @override
  Path getInnerPath(Rect rect, {TextDirection? textDirection}) {
    return Path()..addRRect(getOuterPath(rect, textDirection: textDirection).inflate(-borderRadius));
  }

  @override
  Path getOuterPath(Rect rect, {TextDirection? textDirection}) {
    return Path()
      ..moveTo(rect.bottomLeft.dx, rect.bottomLeft.dy - borderRadius)
      ..lineTo(rect.bottomLeft.dx, rect.topLeft.dy + borderRadius)
      ..arcToPoint(rect.topLeft + Offset(borderRadius, 0), radius: Radius.circular(borderRadius))
      ..lineTo(rect.topRight.dx - borderRadius, rect.topLeft.dy)
      ..arcToPoint(rect.topRight, radius: Radius.circular(borderRadius))
      ..lineTo(rect.bottomRight.dx, rect.bottomRight.dy - borderRadius)
      ..arcToPoint(rect.bottomLeft + Offset(0, -borderRadius), radius: Radius.circular(borderRadius), clockwise: false);
  }

  @override
  void paint(Canvas canvas, Rect rect, {TextDirection? textDirection}) {}
}

In this example, we're defining a custom shape with rounded corners. We set the radius of the corners with the constructor parameter borderRadius.

Then, in the getOuterPath() method, we define the points that make up the shape of the widget. We start at the bottom-left corner, move up to the top-left corner with a rounded arc, move across to the top-right corner with another rounded arc, and then move down to the bottom-right corner with a final arc.

Once your custom shape is defined, you can use it just like you would any other ShapeBorder:

Container(
  height: 100,
  width: 100,
  decoration: BoxDecoration(
    border: Border.fromBorderSide(BorderSide(color: Colors.grey, width: 2)),
    shape: CustomShape(borderRadius: 20),
    color: Colors.pink,
  ),
)

By setting the shape property of the BoxDecoration to your custom shape, you can apply it to any widget with a border.

Styling the border with BoxDecoration

In addition to applying border radius with BorderRadius and ShapeBorder, you can also style the border of a widget with the BoxDecoration class. With BoxDecoration, you can set options like border color, width, and style.

Here's an example of using BoxDecoration to create a border with a dashed style:

Container(
  height: 100,
  width: 100,
  decoration: BoxDecoration(
    border: Border.all(color: Colors.grey, width: 2, style: BorderStyle.dashed),
    borderRadius: BorderRadius.circular(20),
    color: Colors.orange,
  ),
)

By setting the border property of the BoxDecoration to a Border object, you can define the color, width, and style of the border. In this example, we're creating a dashed border that is 2 pixels wide and colored grey.

Conclusion

With Flutter's robust support for border radius, ShapeBorder, and BoxDecoration, you have all the tools you need to create stunning, rounded UI elements. Whether you're building a simple button or a complex layout, adding a border radius can help soften the edges and give your design that extra polish. By experimenting with the techniques and examples provided in this article, you'll be well on your way to creating elegant, customizable UIs in no time.

Popular questions

1. What is a border radius in Flutter?
   A border radius is a property that can be applied to the edges of a widget to give it rounded corners. It is commonly used to create visual interest and soften the edges of a UI element.

2. How do you add a border radius to a widget in Flutter?
   Border radius can be added to a widget in Flutter using its BorderRadius property. You can use the BorderRadius.all() method to set the same radius for all four corners or the BorderRadius.only() method to set different radii for each corner.

3. What are some advanced border radius options available in Flutter?
   Flutter provides some advanced options for working with border radius, such as the ability to set different radii for each corner with the BorderRadius.only() method. You can create complex, multi-layered shapes with rounded corners, beveled edges, and more using the ShapeBorder class.

4. Can you customize the styling of the border in Flutter?
   Yes, you can customize the styling of the border using the BoxDecoration class. By setting the border property of the BoxDecoration to a Border object, you can define options such as border color, width, and style.

5. What are some benefits of using border radius in Flutter?
   Border radius is a powerful tool for creating beautiful UI designs in Flutter. By leveraging the BorderRadius property and its methods, as well as the ShapeBorder and BoxDecoration classes, you can create a wide range of visual effects and make your app stand out from the crowd. Adding a border radius can help soften the edges of your UI elements, creating a more inviting and user-friendly experience.

Tag

"Flutter BorderRadius"