final avatars = [
'https://images.pexels.com/photos/846741/pexels-photo-846741.jpeg?auto=compress&cs=tinysrgb&w=600',
'https://images.pexels.com/photos/2379004/pexels-photo-2379004.jpeg?auto=compress&cs=tinysrgb&w=600',
'https://images.pexels.com/photos/1172207/pexels-photo-1172207.jpeg?auto=compress&cs=tinysrgb&w=600',
'',
];
const borderWidth = 2.0;
return SizedBox(
height: 48 + (2 * borderWidth),
width: 300,
child: Stack(
children: List.generate(
avatars.length,
(index) {
final url = avatars[index];
return Positioned(
left: index == 0 ? 0 : index * 30,
child: DecoratedBox(
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(color: Colors.white, width: borderWidth),
),
child: Padding(
padding: const EdgeInsets.all(borderWidth),
child: url == ''
? CircleAvatar(
foregroundColor: Theme.of(context).primaryColor,
radius: 24,
child: const Text(
'+99',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 14,
),
),
)
: ClipOval(
child: ExtendedImage.network(
url,
fit: BoxFit.cover,
width: 48,
height: 48,
),
),
),
),
);
},
),
),
);