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