Flutter – Create Overlapping Circle Avatar
Flutter gives so much flexibility to create UI components that are just unbelievable. Let’s see how to create Overlapping Circle Avatar in Flutter.
What’s the Use of Overlapping Circle Avatar?
The overlapping Circle Avatar is used in social media applications during live streaming of chats such as on Instagram.
Constructor Circle Avatar
const CircleAvatar( {Key key, Widget child, Color backgroundColor, ImageProvider<Object> backgroundImage, void onBackgroundImageError( dynamic exception, StackTrace stackTrace ), Color foregroundColor, double radius, double minRadius, double maxRadius} )
Step By Step Implementation
Step 1: Create a New Project in Android Studio
To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.
Step 2: Create an Appbar
Dart
import 'package:flutter/material.dart' ; void main() { runApp( const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo' , theme: ThemeData( primarySwatch: Colors.green, ), home: const MyHomePage(), ); } } class MyHomePage extends StatefulWidget { const MyHomePage({Key? key}) : super(key: key); @override State<MyHomePage> createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return Scaffold( // creating appbar appBar: AppBar( title: Text( 'w3wiki' ), centerTitle: true , ), ); } } |
Output:
Step 3: Create a list of images
The list contains links to images that are taken from the internet
Dart
import 'package:flutter/material.dart' ; void main() { runApp( const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo' , theme: ThemeData( primarySwatch: Colors.green, ), home: const MyHomePage(), ); } } class MyHomePage extends StatefulWidget { const MyHomePage({Key? key}) : super(key: key); @override State<MyHomePage> createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { // list containing URL links of images // that will directly access from internet List RandomImages = [ 'https://images.unsplash.com/photo-1597223557154-721c1cecc4b0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW4lMjBmYWNlfGVufDB8fDB8fA%3D%3D&w=1000&q=80' , 'https://img.freepik.com/free-photo/portrait-white-man-isolated_53876-40306.jpg' , 'https://images.unsplash.com/photo-1542909168-82c3e7fdca5c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OHx8ZmFjZXxlbnwwfHwwfHw%3D&w=1000&q=80' , 'https://i0.wp.com/post.medicalnewstoday.com/wp-content/uploads/sites/3/2020/03/GettyImages-1092658864_hero-1024x575.jpg?w=1155&h=1528' ]; @override Widget build(BuildContext context) { return Scaffold( // creating appbar appBar: AppBar( title: Text( 'w3wiki' ), centerTitle: true , ), ); } } |
Step 4: Displaying Overlapping Images
- Create a container and wrap it with a center widget
- Inside Row, the Widget loop is used to calculate the length of images
- Use Circle Avatar Widget and wrap it with Align widget and give a width factor of 0.5
- Inside Circle Avatar uses the background-image property to display images on the screen
- Give a radius- 50
- Now give MainAxisAlignment inside the row
Dart
import 'package:flutter/material.dart' ; void main() { runApp( const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo' , theme: ThemeData( primarySwatch: Colors.green, ), home: const MyHomePage(), ); } } class MyHomePage extends StatefulWidget { const MyHomePage({Key? key}) : super(key: key); @override State<MyHomePage> createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { // list containing URL links of images // that will directly access from internet List RandomImages = [ 'https://images.unsplash.com/photo-1597223557154-721c1cecc4b0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW4lMjBmYWNlfGVufDB8fDB8fA%3D%3D&w=1000&q=80' , 'https://img.freepik.com/free-photo/portrait-white-man-isolated_53876-40306.jpg' , 'https://images.unsplash.com/photo-1542909168-82c3e7fdca5c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OHx8ZmFjZXxlbnwwfHwwfHw%3D&w=1000&q=80' , 'https://i0.wp.com/post.medicalnewstoday.com/wp-content/uploads/sites/3/2020/03/GettyImages-1092658864_hero-1024x575.jpg?w=1155&h=1528' ]; @override Widget build(BuildContext context) { return Scaffold( // creating appbar appBar: AppBar( title: Text( 'w3wiki' ), centerTitle: true , ), // Using circle avatar // to create overlap images body: Center( child: Container( // parent row child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ for ( int i = 0; i < RandomImages.length; i++) Align( widthFactor: 0.5, child: CircleAvatar( radius: 50, backgroundImage: NetworkImage(RandomImages[i]), ), ) ], ), ))); } } |
Output:
Step 5: Improve the UI
- Wrap the circle avatar with another circle avatar
- Define the parent Circle Avatar with Radius and Background Color
Dart
import 'package:flutter/material.dart' ; void main() { runApp( const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo' , theme: ThemeData( primarySwatch: Colors.green, ), home: const MyHomePage(), ); } } class MyHomePage extends StatefulWidget { const MyHomePage({Key? key}) : super(key: key); @override State<MyHomePage> createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { // list containing URL links of images // that will directly access from internet List RandomImages = [ 'https://images.unsplash.com/photo-1597223557154-721c1cecc4b0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW4lMjBmYWNlfGVufDB8fDB8fA%3D%3D&w=1000&q=80' , 'https://img.freepik.com/free-photo/portrait-white-man-isolated_53876-40306.jpg' , 'https://images.unsplash.com/photo-1542909168-82c3e7fdca5c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OHx8ZmFjZXxlbnwwfHwwfHw%3D&w=1000&q=80' , 'https://i0.wp.com/post.medicalnewstoday.com/wp-content/uploads/sites/3/2020/03/GettyImages-1092658864_hero-1024x575.jpg?w=1155&h=1528' ]; @override Widget build(BuildContext context) { return Scaffold( // creating appbar appBar: AppBar( title: Text( 'w3wiki' ), centerTitle: true , ), // Using circle avatar to // create overlap images body: Center( child: Container( // parent row child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ for ( int i = 0; i < RandomImages.length; i++) Align( widthFactor: 0.5, // parent circle avatar. // We defined this for better UI child: CircleAvatar( radius: 60, backgroundColor: Colors.white, // Child circle avatar child: CircleAvatar( radius: 50, backgroundImage: NetworkImage(RandomImages[i]), ), ), ) ], ), ))); } } |
Output:
Step 6: Creating Plus(+) button to add members
- Wrap the Row widget with another widget
- Create another circle avatar and give Radius
- Use Add Icon using Icon Property
- Give Background Color
- Give MainAxisAlignment to the Parent Row
Dart
import 'package:flutter/material.dart' ; void main() { runApp( const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo' , theme: ThemeData( primarySwatch: Colors.green, ), home: const MyHomePage(), ); } } class MyHomePage extends StatefulWidget { const MyHomePage({Key? key}) : super(key: key); @override State<MyHomePage> createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { // list containing URL links of images // that will directly access from internet List RandomImages = [ 'https://images.unsplash.com/photo-1597223557154-721c1cecc4b0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW4lMjBmYWNlfGVufDB8fDB8fA%3D%3D&w=1000&q=80' , 'https://img.freepik.com/free-photo/portrait-white-man-isolated_53876-40306.jpg' , 'https://images.unsplash.com/photo-1542909168-82c3e7fdca5c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OHx8ZmFjZXxlbnwwfHwwfHw%3D&w=1000&q=80' , 'https://i0.wp.com/post.medicalnewstoday.com/wp-content/uploads/sites/3/2020/03/GettyImages-1092658864_hero-1024x575.jpg?w=1155&h=1528' ]; @override Widget build(BuildContext context) { return Scaffold( // creating appbar appBar: AppBar( title: Text( 'w3wiki' ), centerTitle: true , ), // Using circle avatar // to create overlap images body: Center( child: Container( // parent row child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ Row( mainAxisAlignment: MainAxisAlignment.center, children: [ for ( int i = 0; i < RandomImages.length; i++) Align( widthFactor: 0.5, // parent circle avatar. // We defined this for better UI child: CircleAvatar( radius: 60, backgroundColor: Colors.white, // Child circle avatar child: CircleAvatar( radius: 50, backgroundImage: NetworkImage(RandomImages[i]), ), ), ) ], ), SizedBox( width: 30, ), // this circle avatar we created add icon CircleAvatar( backgroundColor: Colors.grey.shade300, radius: 50, child: Icon(Icons.add), ) ], ), ))); } } |
Output:
Contact Us