How can i add the images stacked over one another

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
              ),
            )
           ],
      ),
     

enter image description here

>Solution :

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

Leave a Reply