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

December 11, 2022

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.

>Solution :

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