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 :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

1451 Views

Subscribe For Daily Updates

Flutter Questions
Android Questions