Want to create a circular image icon like those in social media apps?
You can use CircleAvatar, or even Container along with other widgets.
However, in this post, we’ll focus on using CircleAvatar.
Let’s dive in and see what you’ll learn!
Contents
- 1. Image In Circle Shape Example – Using CircleAvatar
- 2. CircleAvatar Properties
- 3. Flutter Circle Avatar AssetImage Example
- 4. Flutter Circle Avatar Text Example
- 5. Flutter Icon With Circle Background – Using CircleAvatar
- 6. Flutter Circle Avatar Border Example
- 7. Flutter FB Story Icon Ex – Multiple Border Using CircleAvatar
Image in Circle Shape Example – Using CircleAvatar
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
- In this example, Let’s use AssetImage widget and load image from app resources.
- 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
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
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
- 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
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