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.
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
