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,
                      ),
                    ),
            ),
          ),
        );
      },
    ),
  ),
);