How to create a circular image in flutter

How to show a circular image in flutter:

Circular image is required to show in many places in a mobile app. For example, user profile screen or list of users screen where we need to show the profile image inside a circle etc.

Flutter makes it really easy to implement. It provides a widget called CircleAvatar that is developed only for showing avatars. We can provide an image or we can provide a text as the child.

In this post, I will show you how to use CircleAvatar widget with an example:

Constructor of CircleAvatar:

Below is the constructor of CircleAvatar class :

CircleAvatar({Key key, Widget child, Color backgroundColor, ImageProvider<Object> backgroundImage, void onBackgroundImageError(dynamic exception, StackTrace stackTrace), Color foregroundColor, double radius, double minRadius, double maxRadius})

Here,

• child : It is the child widget. We can use a Text to show the initials of a user if the image is empty
• backgroundColor : Background color of the circle.
• backgroundImage : Background image of the circle. Changing the background color or image will change with an animation.
• foregroundColor : Text color in the circle.
• onBackgroundImageError : Optional callback function that is called on image loading error.
• radius : Radius of the circle.
• minRadius : Minimum radius of the circle.
• maxRadius : Maximum radius of the circle.

Example program:

Let me show you a quick example of how to use CircleAvatar :

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('FAB Example'),
      ),
      body: Center(
          child: CircleAvatar(
            backgroundImage: NetworkImage('https://cdn.pixabay.com/photo/2013/05/11/08/28/sunset-110305_1280.jpg'),
        backgroundColor: Colors.red.shade800,
        radius: 80,
      )),
    );
  }
}

Here, I am using a background image and backgroundColor with a radius of 80. The background image is loaded using a url in NetworkImage.

it will give the below output:

We can also add a Text widget as a child :

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('FAB Example'),
      ),
      body: Center(
          child: CircleAvatar(
        backgroundColor: Colors.red.shade800,
        child: Text('AH'),
      )),
    );
  }
}

It will give:

official guide

You might also like:

• How to create a Flutter web and mobile Application from command line
• How to create a Floating Action Button in Flutter
• How to create an Alert dialog in Flutter