Circular Image

main.dart

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: const Text("Circular Image"),
            backgroundColor: Colors.deepOrangeAccent),
        body: Container(
            alignment: Alignment.topCenter,
            padding: const EdgeInsets.all(15),
            child: Wrap(children: [
              Padding(
                  padding: const EdgeInsets.all(5),
                  child: 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,
                    ),
                  )),
              Padding(
                  padding: const EdgeInsets.all(5),
                  child: 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
                    ),
                  )),
              Padding(
                  padding: const EdgeInsets.all(5),
                  child: ClipOval(
                    //no need to provide border radius to make circular image
                    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
                    ),
                  )),
              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
                  ),
                ),
              ),
              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
                  ),
                ),
              ),
             const CircleAvatar(
               
                backgroundColor: Colors.white,
                backgroundImage:NetworkImage(
                    'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg',
                   
                  ),
                
              ),
              
            ])));
  }
}