Flutter – Create Overlapping Circle Avatar
Last Updated :
23 Feb, 2023
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(
appBar: AppBar(
title: Text('GeeksforGeeks'),
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 RandomImages = [
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('GeeksforGeeks'),
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 RandomImages = [
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('GeeksforGeeks'),
centerTitle: true,
),
body: Center(
child: Container(
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 RandomImages = [
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('GeeksforGeeks'),
centerTitle: true,
),
body: Center(
child: Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
for (int i = 0; i < RandomImages.length; i++)
Align(
widthFactor: 0.5,
child: CircleAvatar(
radius: 60,
backgroundColor: Colors.white,
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 RandomImages = [
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('GeeksforGeeks'),
centerTitle: true,
),
body: Center(
child: Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
for (int i = 0; i < RandomImages.length; i++)
Align(
widthFactor: 0.5,
child: CircleAvatar(
radius: 60,
backgroundColor: Colors.white,
child: CircleAvatar(
radius: 50,
backgroundImage: NetworkImage(RandomImages[i]),
),
),
)
],
),
SizedBox(
width: 30,
),
CircleAvatar(
backgroundColor: Colors.grey.shade300,
radius: 50,
child: Icon(Icons.add),
)
],
),
)));
}
}
|
Output:
Share your thoughts in the comments
Please Login to comment...