Circle Image in Flutter

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 

 

Circler 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