How to add Border Radius/Make Circular Image in Flutter

In this example, you will learn to add a border radius to the Image to make it oval or circular. We will use ClipRRect, ClipOval, Container widgets to add rounded corners to the Image to make it look like a circle or oval.

Read This Also: How to Insert Image from Asset Folder in Flutter App

How to Add Border Radius on Image using ClipRRect:

ClipRRect(
  borderRadius: BorderRadius.circular(10.0), //add border radius
  child: Image.asset(
      "assets/img.png",
      height: 100.0,
      width: 100.0,
      fit:BoxFit.cover,
  ),
)

How to Make Image Circular using ClipRRect:

ClipRRect(
  borderRadius: BorderRadius.circular(50.0),
  //make border radius more than 50% of square height & width
  child: Image.asset(
      "assets/img.png",
      height: 100.0,
      width: 100.0,
      fit:BoxFit.cover, //change image fill type
  ),
)

How to Make Image Circular using ClipOval:

ClipOval( //no need to provide border radius to make circular image
  child: Image.asset(
      "assets/img.png",
      height: 100.0,
      width: 100.0,
      fit:BoxFit.cover, //change image fill type
  ),
)

How to Make Image Circular using Container Widget:

Container(
    margin: 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: DecorationImage(
        image: AssetImage("assets/img.png"),
        fit: BoxFit.cover, //change image fill type
      ),
    ),
)

Full Code Example:

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp( 
      home: MyApp()
    )
  );
}

class MyApp extends StatefulWidget{
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
          appBar: AppBar(
              title:Text("Border Radius/Curcular Image"),
              backgroundColor: Colors.deepOrangeAccent
          ),
          body: Container(
            alignment:Alignment.topCenter,
            padding: EdgeInsets.all(15),
             child: Wrap(
               children:[
                       Padding(
                         padding: EdgeInsets.all(5),
                         child:ClipRRect(
                          borderRadius: BorderRadius.circular(10.0), //add border radius
                          child: Image.asset(
                              "assets/img.png",
                              height: 100.0,
                              width: 100.0,
                              fit:BoxFit.cover,
                          ),
                         )
                      ),

                      Padding(
                         padding: EdgeInsets.all(5),
                         child:ClipRRect(
                          borderRadius: BorderRadius.circular(50.0),
                          //make border radius more than 50% of square height & width
                          child: Image.asset(
                              "assets/img.png",
                              height: 100.0,
                              width: 100.0,
                              fit:BoxFit.cover, //change image fill type
                          ),
                         )
                      ),  


                      Padding(
                         padding: EdgeInsets.all(5),
                         child:ClipOval( //no need to provide border radius to make circular image
                          child: Image.asset(
                              "assets/img.png",
                              height: 100.0,
                              width: 100.0,
                              fit:BoxFit.cover, //change image fill type
                          ),
                         )
                      ),  


                      Container(
                         margin: 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: DecorationImage(
                              image: AssetImage("assets/img.png"),
                              fit: BoxFit.cover, //change image fill type
                            ),
                         ),
                      ),  
               ]
             )
          )
      );
  }
}

Output Screenshot:

In this way, you can add a border radius to the Image and make it rounded corner to look like a circle or oval.