flutter circleavatar example
Do you want to make a circular Image icon like in social media apps?

Use CircleAvatar, You can also use Container and other widgets.

But In this post, I am talking about CircleAvatar.

Let’s check it out what will you learn in this post.

Image in Circle Shape Example – Using CircleAvatar

image in circle avatar widget flutter
In this example, you will use NetworkImage widget for showing Image. If you are a real beginner, Use this post to create a Flutter project or you can use Flutter command to create project and open it in Visual Studio Code.

  • Align widget used to align the CircleAvatar to Center
  • By default, CircleAvatar radius size is 20. It’s okay for ListView item. For this example, I increased the size of radius to 50. you can delete that line and check.
  • NetworkImage shows the Image based on the given URL.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter CircleAvatar Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('CircleAvatar - NetworkImage Example'),
        ),
        body: Align(
          alignment: Alignment.topCenter,//aligns CircleAvatar to Top Center.
          child: CircleAvatar(
            radius: 50,//radius is 50
            backgroundImage: NetworkImage(
                'https://cdn.pixabay.com/photo/2015/03/03/20/42/man-657869_1280.jpg'),//image url
          ),
        ),
      ),
    );
  }
}


CircleAvatar Properties

1.backgroundColor: Use this property to fill the circle with color. If backgroundColor is not given, CircleAvatar uses a theme based color.

2.backgroundImage: Using backgroundImage property, You can set Image. Above example, uses NetworkImage. But you can also use FileImage, AssetImage, etc.

3.child: child property used set the widget inside the circle Avatar. Using this property, you can set Image, Icon or Text or any other Widget.

4.foregroundColor: It determines color of the text or Icon inside CircleAvatar.

5.foregroundImage: Foreground image of the CircleAvatar.

6.maxRadius: It determines maximum radius of the CircleAvatar.

7.minRadius: Decides the minimum radius of the CircleAvatar.

8.onBackgroundImageError: Callback released when background image loading fails.

9.onForegroundImageError: Callback executes when foreground Image loading fails.

10.radius: The size of the avatar (half of the diameter). Default size is 20 logical pixels.

Flutter CircleAvatar AssetImage Example

flutter circleavatar assetimage

  • In this example, Let’s use AssetImage widget and load image from app resources.

image in assets directory

  • First create an assets directory, and put your image in it. Just like above.

  assets:
    - assets/

  • Open the pubspec.yaml file, and add assets/ like above. Then only app can access Assets directory.
  • In dart code, you will use AssetImage and specify the path of the image.
  • Here Align used to align the Widget to topCenter. For an empty space around the CircleAvatar – Use Padding.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter CircleAvatar Image Asset Example',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Circle Avatar AssetImage Example'),
        ),
        body: Align(
          alignment: Alignment.topCenter,//aligns to topCenter
          child: Padding(//gives empty space around the CircleAvatar
            padding: const EdgeInsets.all(8.0),
            child: CircleAvatar(
              radius: 35,//radius is 35.
              backgroundImage: AssetImage('assets/environment.jpg'),//AssetImage loads image URL.
            ),
          ),
        ),
      ),
    );
  }
}


Flutter Circle Avatar Text Example

text inside circleavatar
How to fit text inside CircleAvatar Widget?

CircleAvatar provides a property called child helps to set Text inside of it.

okay…Let’s do that.

  • Row widget : helps to horizontally align both CircleAvatar widgets.
  • SizedBox: gives empty space between CircleAvatar widgets.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter CircleAvatar Text Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter CircleAvatar Text Example'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Row(//aligns children to Center.
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              CircleAvatar(
                child: Text(
                  'S',
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                    color: Colors.white,
                  ),
                ),
                backgroundColor: Colors.orange,
              ),
              SizedBox(
                width: 5.0,//empty space between CircleAvatar widgets.
              ),
              CircleAvatar(
                child: Text(
                  'Sun',
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                    color: Colors.white,
                  ),
                ),
                backgroundColor: Colors.red,
              ),
            ],
          ),
        ),
      ),
    );
  }
}


Flutter Icon With Circle Background – Using CircleAvatar

circleavatar widget icon
Let’s use icon instead of image or Text in CircleAvatar.

  • GestureDetector is used to listen for the tap events. If user tapped, it will print “icon tapped” in terminal.
  • Here you will use child property to set the Icon.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter CircleAvatar Icon Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter CircleAvatar Icon Example'),
        ),
        body: Align(
          alignment: Alignment.topCenter, //aligns to topCenter.
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: GestureDetector(
              //listening tap events
              onTap: () {
                print('icon tapped');
              },
              child: CircleAvatar(
                child: Icon(
                  Icons.search,
                  color: Colors.white,
                ),
                backgroundColor: Color(0xFF47b881),
              ),
            ),
          ),
        ),
      ),
    );
  }
}


Flutter Circle Avatar Border Example

circleavatar border flutter

  • Here you will use two CircleAvatar widgets. One for border and other for image.
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter CircleAvatar Border Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter CircleAvatar Border Example'),
        ),
        body: Align(
          alignment: Alignment.topCenter,
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: CircleAvatar(
              //border
              radius: 110,
              backgroundColor: Colors.brown,
              child: CircleAvatar(
                radius: 100,
                backgroundImage: NetworkImage(
                    'https://cdn.pixabay.com/photo/2017/09/27/15/52/man-2792456_1280.jpg'),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Flutter FB Story Icon Example – Multiple Border Using CircleAvatar

Flutter FB Story Icon - multiple border using circleavatar

Let’s make an Icon like in Facebook Stories.

  • Here you will use 3 CircleAvatars.1: Blue Color, 2: White Color, and 3: for Image.
  • Radius of each is different.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter FB Story Icon ex',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter FB Story Icon ex'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Align(
            alignment: Alignment.topCenter,
            child: CircleAvatar(
              radius: 135,
              backgroundColor: Colors.blue,
              child: CircleAvatar(
                radius: 125,
                backgroundColor: Colors.white,
                child: CircleAvatar(
                  radius: 115,
                  backgroundImage: NetworkImage(
                      'https://cdn.pixabay.com/photo/2018/01/15/07/52/woman-3083390_1280.jpg'),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}


That’s all for now. If you like this post, Please share it with your family and friends.

For more info: Flutter CircleAvatar Docs

Please disable your adblocker or whitelist this site!