In this article, you are going to learn how to make a circular image in Flutter. There are various methods to achieve it, and you are going to learn all the possible ways to make the image circular. Along with it, you will get to know to add a border to the circular image.

The Final Output will look as follows:

Make a circular image using ClipOval

ClipOval is a widget used to clip its child widget into an oval shape. This widget is part of Flutter’s rich tools for creating visually appealing user interfaces with custom shapes and designs.

How ClipOval Works

The primary purpose of ClipOval is to clip its child widget into an oval shape. Whatever child widget you place inside ClipOval, will be clipped to fit within the oval boundary defined by ClipOval.

ClipOval widget has properties like child and clipBehavior. The child property is where you place the widget you want to clip into an oval shape. The clipBehavior property defines how the clipping should be performed; it can be set to Clip.antiAlias, Clip.antiAliasWithSaveLayer, or Clip.none.

Although ClipOval inherently creates an oval shape, you can customize its appearance by adjusting the properties of its child widget, like its size, color, or content.

You do not have to give the border radius to make the image circular.

ClipOval( 
                          child: Image.network(
                              "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg",
                              height: 100.0,
                              width: 100.0,
                              fit:BoxFit.cover, //change image fill type
                          ),
                         )

Whether you need to display only a portion of a widget or constrain its rendering area, ClipRect offers flexibility and control in shaping your UI components.

Add Border Radius on Image using ClipRRect

ClipRRect is a widget that clips its child widget into a rounded rectangle shape. It’s similar to ClipRect, but specifically clips its child to a rounded rectangular boundary, allowing you to create visually appealing rounded corners for UI elements.

You need to provide the border radius to get the circular image using the ClipRRect. Here you won’t be having a full circle but you shall have the image with its side circular.

ClipRRect(
                          borderRadius: BorderRadius.circular(10.0), //add border radius
                          child: Image.network(
                              "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg",
                              height: 100.0,
                              width: 100.0,
                              fit:BoxFit.cover,
                          ),
                         )

Final Output

Full Circular Image with ClipRRect

Here you shall have a fully circular image.

ClipRRect(
                          borderRadius: BorderRadius.circular(50.0),
                          //make border radius more than 50% of square height & width
                          child: Image.network(
                              "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg",
                              height: 100.0,
                              width: 100.0,
                              fit:BoxFit.cover, //change image fill type
                          ),
                         )
You will get the full circle image here as you have the radius half the size of the height and width of the image.

Using Container decoration

Creating a circular image in Flutter with a container decoration involves using a combination of Container widgets and BoxDecoration. The Container widget allows you to define the layout properties of your widget, and BoxDecoration allows you to apply visual effects like colors, gradients, borders, and shadows.

Container(
                         margin:const EdgeInsets.all(5),
                         height: 100.0,
                         width: 100.0,
                         decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(50), 
                            //set border radius to 50% of square height and width
                            image:const DecorationImage(
                              image: NetworkImage("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg"),
                              fit: BoxFit.cover, //change image fill type
                            ),
                         ),
                      ),  

Circle Image with Border

Container(
                         margin:const EdgeInsets.all(5),
                         height: 100.0,
                         width: 100.0,
                         decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(50),
                           border: Border.all(color: Colors.white,width: 2),
                            //set border radius to 50% of square height and width
                            image:const DecorationImage(
                              image: NetworkImage("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg"),
                              fit: BoxFit.cover, //change image fill type
                            ),
                         ),
                      ),  

With the use of Circle Avatar

CircleAvatar widget is specifically designed for displaying images or initials in a circular shape, commonly used for user avatars. Here’s how you can use CircleAvatar to create a circular image:

CircleAvatar(
               
                backgroundColor: Colors.white,
                backgroundImage:NetworkImage(
                    'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg',
                   
                  ),
                
              ),

Conclusion

In this article, you learned the various ways to create a circular image in Flutter.

I hope this blog post provides you with enough important information on how to make a circular image in Flutter.

 Thanks for reading this article 

Also, follow to get updated on exciting articles and projects.

If I got something wrong? Let me know in the comments. I would love to improve.

Let’s get connected

We can be friends. Find on Facebook, Linkedin, Github, YouTube, 

BuyMeACoffee, and Instagram.

Contribute: BuyMeACoffee

Contact: Contact Us