How to add rounded border radius to image in flutter ?

In this article we will learn to add rounded border radius to image in flutter. In flutter rounded corner border can be added using borderRadius but to add the rounded border to image is not same because by adding the border radius to container it won’t apply to child image.

In this article i will show you multiple methods to add rounded corner to image. We will use background image to add border radius, ClipRRect, ClipOval and CircleAvatar. In this example i will create a simple image with border radius, width and color of border as well.

Flutter use BoxDecoration class to render the border and borderRadius in container widget it accepts multiple options like border, border radius, color, background image, gradient, shape and etc. so to add the borderRadius first we need to add decoration option to container and then in decoration value we need to assign BoxDecoration class to implement the border.

Let’s implement the methods to add rounded border radius to image in flutter

Method 1 : Using backgroundImage to add rounded border to image

In this method we will use the backgroundImage attribute BoxDecoration to add the rounded border to image

Container(
            margin: const EdgeInsets.only(top: 20),
            height: 100,
            width: 100,
            decoration:  BoxDecoration(
            border: Border.all(color: Colors.red,width: 10),
              borderRadius: BorderRadius.circular(50.0),
             image: const DecorationImage(
                 fit: BoxFit.cover,
                 image: NetworkImage('https://picsum.photos/id/238/200')
            ),
            ),
),

Method 2 : Using ClipRRect to add rounded border to image

In this method we will use the ClipRRect to add the rounded border to image

 Container(
            decoration:  BoxDecoration(
              borderRadius: BorderRadius.circular(105.0),
              border: Border.all(color: Colors.red,width: 10)
            ),
            child: ClipRRect(
              borderRadius: BorderRadius.circular(100),
              child:Image.network("https://picsum.photos/200" ),
            ),
          ),

rounded border image using ClipRRect in flutter

Method 3 : Using CircleAvatar to add rounded border to image

In this method we will use the CircleAvatar to add the rounded border to image

Container(
            margin: const EdgeInsets.only(top: 20),
            height: 100,
            width: 100,
            decoration:  BoxDecoration(
              border: Border.all(color: Colors.red,width: 10),
              borderRadius: BorderRadius.circular(50.0),

            ),
            child: const CircleAvatar(
              backgroundColor: Colors.red,
              backgroundImage: NetworkImage('https://picsum.photos/id/237/200'),
              radius: 50,

            ),
          ),

rounded image with border color and width in flutter

One side border radius to widget flutter

Sometimes we also want to add border radius to specific one side of widget or container so then we can use BorderRadius.only class named constructor to add the border radius to the one side or any side of container as follow

Container(
  padding: EdgeInsets.all(10),
  decoration: BoxDecoration(
      border: Border.all(color: Colors.white),
      borderRadius: const BorderRadius.only(
          bottomLeft: Radius.circular(20.0),
          topRight: Radius.circular(20.0))),
  child: const Text(
    'Hello, World!',
    style: TextStyle(color: Colors.white, fontSize: 30),
  ),
),

one side rounded corner in flutter using border radius

Let’s understand it with example

Step 1 : Create flutter project

Very first step is to create the fluter application using command line tool or in Android studio.

flutter create example_app

This will create a new project with name my_app then go in to the folder .

Step 2 : Create a simple widget

Now, Create a simple state less widget to add a border with image in flutter as follow

File : lib/borderimage.dart

class RoundedImage extends StatelessWidget {
  const RoundedImage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.only(top: 40),
      color: Colors.white,

      child: Column(
        children: [
          Container(
            decoration:  BoxDecoration(
              borderRadius: BorderRadius.circular(105.0),
              border: Border.all(color: Colors.red,width: 10)
            ),
            child: ClipRRect(
              borderRadius: BorderRadius.circular(100),
              child:Image.network("https://picsum.photos/200" ),
            ),
          ),
          Container(
            margin: const EdgeInsets.only(top: 20),
            height: 100,
            width: 100,
            decoration:  BoxDecoration(
            border: Border.all(color: Colors.red,width: 10),
              borderRadius: BorderRadius.circular(50.0),
             image: const DecorationImage(
                 fit: BoxFit.cover,
                 image: NetworkImage('https://picsum.photos/id/238/200')
            ),
            ),
          ),
          Container(
            margin: const EdgeInsets.only(top: 20),
            height: 100,
            width: 100,
            decoration:  BoxDecoration(
              border: Border.all(color: Colors.red,width: 10),
              borderRadius: BorderRadius.circular(50.0),

            ),
            child: const CircleAvatar(
              backgroundColor: Colors.red,
              backgroundImage: NetworkImage('https://picsum.photos/id/237/200'),
              radius: 50,

            ),
          ),

        ],
      ),
    );
  }
}

Step 3: Import and use the widget in main

We just created a new widget with name RoundedImage, now we are going to use it in our main.dart file as below

import 'package:flutter/material.dart'; 
import 'package:example_app/borderimage.dart';;

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: RoundedImage(),
        ),
      ),
    );
  }
}

Step 4: Run the project

Simply run the project using command line or in android studio to check the implementation.