Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

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

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading