I want to add a different persons image as attached(The images inside circle avatar stacked over one another).How to achieve this. I tried the following code but didn't get the result as expected
Padding(
padding: EdgeInsets.only(top: 7),
child: Stack(
children: <Widget>[
Positioned(
left: 0,
child: CircleAvatar(
radius: radius,
// backgroundColor: Colors.red,
backgroundImage: AssetImage(AssetImages.CHALLENGEPERSON1),
backgroundColor: Colors
.transparent, // Provide your custom image // Provide your custom image
),
),
Positioned(
left: 12,
child: CircleAvatar(
radius: radius,
// backgroundColor: Colors.red,
backgroundImage: AssetImage(
AssetImages.CHALLENGEPERSON1), // Provide your custom image
backgroundColor:
Colors.transparent, // Provide your custom image \
),
),
Positioned(
left: 28,
child: CircleAvatar(
radius: radius,
// backgroundColor: Colors.red,
backgroundImage: AssetImage(AssetImages.CHALLENGEPERSON1),
backgroundColor: Colors.transparent, // Provide your custom image
),
),
Positioned(
left: 35,
child: CircleAvatar(
radius: radius - 5,
// backgroundColor: Colors.red,
backgroundImage: AssetImage(AssetImages.ADDITIONAL),
backgroundColor:
Colors.transparent, // Provide your custom image
),
)
],
),
you can create this UI like this
import 'package:flutter/material.dart';
class Home extends StatefulWidget {
const Home({super.key});
@override
State<Home> createState() => _HomeState();
}
class _HomeState extends State<Home> {
List imagesList = [//your images list];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Center(
child: Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
for (int i = 0; i < imagesList.length; i++)
Container(
margin: EdgeInsets.symmetric(vertical: 0),
child: Align(
widthFactor: 0.5,
child: CircleAvatar(
radius: 50,
backgroundColor: Colors.white,
child: CircleAvatar(
radius: 40,
backgroundImage: NetworkImage(
imagesList[i],
),
),
)),
)
],
),
SizedBox(
width: 20,
),
CircleAvatar(
backgroundColor: Colors.grey.shade200,
radius: 40,
child: Center(child: Icon(Icons.add)),
),
],
),
),
),
);
}
}