How to put two images on top of each other in a row? Flutter-CodePudding

I'm completely new to Flutter and I want to do something

I did a frame for the first person but their profile picture is not in a row. But second and third people's profile picture are in the same row.

I used Positioned for the frame. But when I apply same to the others, this is what I get:

error

Here's my code down below:

child: Column(
         children: [
           Stack(
             children: [
               Padding(
                 padding: const EdgeInsets.only(bottom: 25.0),
                 child: CircleAvatar(
                   backgroundImage: NetworkImage(
                      "https://www.kindpng.com/picc/m/20-200312_anonymous-avatar-icon-hd-png-download.png"),
                   radius: 50,
                 ),
               ),
               new Positioned(
                   left: 0,
                   right: 0,
                   top: 0,
                   child:
                      new Image(image: AssetImage('Assets/111.png'))),
             ],
           ),
           SizedBox(
             height: 20,
           ),
           Row(
             mainAxisAlignment: MainAxisAlignment.spaceEvenly,
             children: [
               Column(
                 children: [
                   CircleAvatar(
                     backgroundImage: NetworkImage(
                        "https://www.kindpng.com/picc/m/20-200312_anonymous-avatar-icon-hd-png-download.png"),
                     radius: 50,
                   ),
                  new Positioned(
                   left: 0,
                   right: 0,
                   top: 0,
                   child:
                       new Image(image: AssetImage('Assets/111.png'))),
                 ],
               ),
              Column(
                children: [
                   CircleAvatar(
                     backgroundImage: NetworkImage(
                        "https://www.kindpng.com/picc/m/20-200312_anonymous-avatar-icon-hd-png-download.png"),
                    radius: 50,
                  ),
                 ],
              )
            ],
           )
         ],
       )

I want to put a frame on those profile pictures, but in a row, I can't do what I did for the first one to the second and third ones.

CodePudding user response：

You are facing this error in the Row because you are using Column inside of Row instead of Stack.

Here's the code you can refer:

child: Column(
        children: [
          Stack(
            children: [
              Padding(
                padding: EdgeInsets.only(bottom: 25.0),
                child: CircleAvatar(
                  backgroundImage: NetworkImage(
                      "https://www.kindpng.com/picc/m/20-200312_anonymous-avatar-icon-hd-png-download.png"),
                  radius: 50,
                ),
              ),
              Positioned(
                left: 0,
                right: 0,
                top: 0,
                child: Image(
                  image: AssetImage('Assets/111.png'),
                ),
              ),
            ],
          ),
          const SizedBox(
            height: 20,
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Stack(
                children: [
                  const CircleAvatar(
                    backgroundImage: NetworkImage(
                        "https://www.kindpng.com/picc/m/20-200312_anonymous-avatar-icon-hd-png-download.png"),
                    radius: 50,
                  ),
                  Positioned(
                    left: 0,
                    right: 0,
                    top: 0,
                    child: Container(
                      height: 100,
                      width: 60,
                      color: Colors.amber,
                    ),
                  ),
                ],
              ),
              Stack(
                children: [
                  CircleAvatar(
                    backgroundImage: NetworkImage(
                        "https://www.kindpng.com/picc/m/20-200312_anonymous-avatar-icon-hd-png-download.png"),
                    radius: 50,
                  ),
                  Positioned(
                    left: 0,
                    right: 0,
                    top: 0,
                    child: Image(
                      image: AssetImage('Assets/111.png'),
                    ),
                  )
                ],
              )
            ],
          )
        ],
      )

Hope it will work now