Create Circle Image in Flutter

Last updated Nov 15, 2021

How to create a Circle Image in Flutter. Display image in circler shape will always look cool in the UI Screen. Flutter doesn't provide any widget to Create Circle Image.

In this post, we are going to create a circler image in a flutter application

This example will show just a basic screen with a circle image and loading the image from URL, as well as from Asset

We can also add icon to the Circle Avatar

Circle Image in Flutter

Let's get started.

Step 1: Create a Flutter application

Step 2: Create a file circler_image.dart file add below code

import 'package:flutter/material.dart';

class CircleImage extends StatelessWidget{

  final Size size;
  final Widget child;

  CircleImage({Key key,@required this.child,this.size=const Size.fromWidth(120)}):super(key:key);
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(

      decoration: new BoxDecoration(
        color: Colors.grey,
        shape: BoxShape.circle),
      height: size.width,
      child: ClipOval(
        child: child,

      ),
    );
  }


}

This is the widget that will show our image in a circle shape.

Step 3: User Circle Widget in our main.dart file

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

class MyApp extends StatelessWidget {
  Size size=Size.fromWidth(120);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Circle Imageview',
      theme: ThemeData(

      primarySwatch: Colors.blue,
        fontFamily: 'sriracha'
      ),
      home: Scaffold(
        appBar: AppBar(title: Text("Flutter Circle Imageview"),),
        body: Center(
          child: Container(
            height: 400,
            child: Expanded(
                child: Column(

                  children: [
                    Text("Image From Network"),
                    SizedBox(height: 20,),
                    CircleImage(size:size,child: Image.network("https://upload.wikimedia.org/wikipedia/commons/b/b8/White-lion-images-20.jpg",
                      width: size.width,
                      height: size.height,
                      fit: BoxFit.fitWidth,
                    ),),
                    SizedBox(height: 20,),
                    Text("Image From Assets"),
                    SizedBox(height: 20,),
                    CircleImage(size:size,child: Image.asset("assets/images/profile.jpg",
                      width: size.width,
                      height: size.height,
                      fit: BoxFit.fitWidth,
                    ),)
                  ],

                )),
          ),
        ),)
    );
  }
}

Upload Image to Firebase Example

Flutter Rest API Integration Example

Article Contributed By :

2441 Views