Applying Rounded Borders to Images in Flutter

Adding rounded borders to images can enhance the visual appearance of your Flutter applications. In this post, we will explore different approaches to apply rounded borders to images in Flutter using various widgets and techniques. By exploring each method in detail, you will understand how to implement rounded borders effectively. Additionally, we will compare these approaches at the end to help you choose the most suitable option for your needs.

Getting Started

Let us start by setting up our main.dart file with the following code snippet as the foundation of our Flutter application:

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 bordered Images Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Network Image Example'),
        ),
        body: Center(
          child: Image.network(
            'https://picsum.photos/id/9/350/250',
          ),
        ),
      ),
    );
  }
}

In the above code, we define a simple Flutter application that displays a network image using the provided URL (https://picsum.photos/id/9/350/250). The picsum.photos website is a placeholder image generator that provides random images with various dimensions. By specifying the ID 9, we retrieve a specific image with a width of 350 pixels and a height of 250 pixels.

This image will serve as the foundation for experimenting with various rounded border styles in the upcoming code snippets.

Now, let us dive into the various techniques for applying rounded borders to images.

1. ClipRRect widget

The ClipRRect widget can be used to clip its child widget with rounded corners. Replace the body property of the Scaffold widget with the following code:

body: Center(
  child: ClipRRect(
    borderRadius: BorderRadius.circular(25.0),
    child: Image.network(
      'https://picsum.photos/id/9/350/250',
    ),
  ),
),

In this code snippet, the Image.network widget is wrapped within a ClipRRect widget. The borderRadius property of ClipRRect is set to BorderRadius.circular(25.0), which creates rounded borders around the image. You can play around with value inside the named constructor circular() to get the desired border radius.

2. Material widget with shape

The Material widget provides a way to clip its child widget with a custom shape. By specifying a RoundedRectangleBorder as the shape, we can create rounded borders. Replace the body property of the Scaffold widget with the following code:

body: Center(
  child: Material(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(25.0),
    ),
    clipBehavior: Clip.antiAlias,
    child: Image.network(
      'https://picsum.photos/id/9/350/250',
    ),
  ),
),

In this snippet, the Image.network widget is wrapped within a Material widget. The shape property of Material is set to RoundedRectangleBorder with borderRadius of BorderRadius.circular(25.0), resulting in rounded borders around the image.

3. ClipPath widget

The ClipPath widget allows us to define custom clipping paths. By using a ShapeBorderClipper with a RoundedRectangleBorder, we can achieve rounded borders. Modify the body property of the Scaffold widget with the following code:

body: Center(
  child: ClipPath(
    clipper: ShapeBorderClipper(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(25.0),
      ),
    ),
    child: Image.network(
      'https://picsum.photos/id/9/350/250',
    ),
  ),
),

Here, the Image.network widget is wrapped within a ClipPath widget. The clipper property of ClipPath is set to a ShapeBorderClipper, which uses a RoundedRectangleBorder with borderRadius of BorderRadius.circular(25.0) to create rounded borders.

4. ClipOval widget

The ClipOval widget clips its child widget into an oval shape. Although primarily used for circular clipping, it can also produce rounded borders for images. Replace the body property of the Scaffold widget with the following code:

body: Center(
  child: ClipOval(
    child: Image.network(
      'https://picsum.photos/id/9/350/250',
    ),
  ),
),

This code snippet simply wraps the Image.network widget with a ClipOval widget, resulting in an oval-shaped image with rounded borders.

However, when both the width and height are equal it will be a perfect circle.

body: Center(
  child: ClipOval(
    child: Image.network(
      'https://picsum.photos/id/9/250/250',
    ),
  ),
),

In this code snippet we changed the URL to make the image have an equal width and height of 250 pixels.

5. CircleAvatar widget

The CircleAvatar widget is primarily used for displaying user avatars, but it can also be utilized to display rounded images. Modify the body property of the Scaffold widget with the following code:

body: const Center(
  child: CircleAvatar(
    radius: 175,
    backgroundColor: Colors.transparent,
    backgroundImage: NetworkImage(
      'https://picsum.photos/id/9/600',
    ),
  ),
),

In this code snippet, the CircleAvatar widget is used, and its backgroundImage property is set to a NetworkImage with the provided URL. The URL has been adjusted to show a square image with higer resolution.  The radius property defines the size of the circular image. The backgroundColor is set to Colors.transparant, because when loading the image the background color is shown before the image is loaded.

Comparisons

Now that we have explored different techniques for applying rounded borders to images in Flutter, let us compare them:

• The ClipRRect widget provides a simple and straightforward way to achieve rounded borders by clipping its child widget.
• The Material widget with a RoundedRectangleBorder shape offers more customization options and anti-aliasing, which can result in smoother rounded borders.
• The ClipPath widget allows for more complex and custom clipping paths, providing greater flexibility in creating rounded borders.
• The ClipOval widget is suitable when you specifically want an oval shape and is primarily used for circular clipping.
• The CircleAvatar widget is a convenient option when you need to display rounded images, especially for user avatars.

Conclusion

In this post, we have explored different techniques for applying rounded borders to images in Flutter. Each approach offers its own advantages and can be chosen based on your specific requirements and preferences. By applying rounded borders, you can enhance the visual appearance of your Flutter applications and create a more polished user interface. Experiment with these techniques and choose the one that best suits your needs.

Tags

• Flutter
• Dart