Home > front end >  How can you superimpose circle avatars on top of each other?
How can you superimpose circle avatars on top of each other?

Time:11-07

I am facing this for the first time and I have no options on how to do it. I read many forums and did not find anything like this anywhere. I need to do as in the picture, how can I do it
This is a sample of how it should turn out: enter image description here

    Padding(padding: const  EdgeInsets.only(top: 15), 
     child: Row(
      children: const  [
                                        
      CircleAvatar(
 backgroundColor: Colors.white,
    radius: 18,
  child: CircleAvatar(
  radius: 16,
  backgroundImage: AssetImage('lib/assets/avatar-410658-028235png.png'),
     ),
       ),
                                   
   CircleAvatar(
    backgroundColor: Colors.white,
      radius: 18,
      child: CircleAvatar(
   radius: 16,
    backgroundImage: AssetImage('lib/assets/avatar-410658-028235png.png'),
       ),
      ),

      CircleAvatar(
 backgroundColor: Colors.white,
   radius: 18,
 child: CircleAvatar(
     radius: 16,
  backgroundImage: AssetImage('lib/assets/avatar-410658-028235png.png'),
  ),
   ),
    
    
     CircleAvatar(
    backgroundColor: Colors.white,
   radius: 20,
   child:  CircleAvatar(
  radius: 18, 
    backgroundColor: Colors.black,
  child: Text('28', style: TextStyle(fontSize: 12.5, color: Colors.white ),),
   )
     ),
     
    
     Padding(padding: EdgeInsets.only(left: 70)   ,
     child: Text('6 Hours Ago', style: TextStyle(fontSize: 12.5),)
      ),
        ],
           ),
             ),
    
     

CodePudding user response:

Use the stack widget. Read about it here:

https://api.flutter.dev/flutter/widgets/Stack-class.html

  • Related