How to place a container on top of other container properly in flutter

Question

I have a container with image and I wanted to place another small container on top to show an icon on the bottom right of it

   Widget buildImage2() {
    return Center(
      child: Container(
        decoration: const BoxDecoration(
          color: Colors.black12,
          shape: BoxShape.circle,
        ),
        child: ClipOval(
          child: Material(
            color: Colors.transparent,
            child: InkWell(
              onTap: () {
                showModalBottomSheet(
                    context: context,
                    builder: (context) {
                      return Column(
                        mainAxisSize: MainAxisSize.min,
                        children: <Widget>[
                          ListTile(
                            leading: const Icon(Icons.photo),
                            title: const Text('Gallery'),
                            onTap: () {
                              pickImage(ImageSource.gallery);
                              Navigator.pop(context);
                            },
                          ),
                          ListTile(
                            leading: const Icon(Icons.camera_alt_outlined),
                            title: const Text('Camera'),
                            onTap: () {
                              pickImage(ImageSource.camera);
                              Navigator.pop(context);
                            },
                          ),

                        ],
                      );
                    });
              },

              child: Stack(

                clipBehavior: Clip.none,

                children: [
                  CachedNetworkImage(
                    imageUrl: imageURL,

                    imageBuilder: (context, imageProvider) {
                      return Ink.image(
                        image: imageProvider,
                        fit: BoxFit.cover,

                        child: Container(
                          alignment: Alignment.bottomRight,
                          padding: const EdgeInsets.only(right: 15.0),
                          width: 160.0,
                          height: 160.0,
                        ),
                      );
                    },
                  ),
                  Container(

                    alignment: Alignment.bottomRight,
                    padding: const EdgeInsets.only(right: 4.0),
                    width: 150.0,
                    height: 150.0,

                    child: Positioned(
                      child: Container(
                        width: 50,
                        height: 50,
                        decoration: BoxDecoration(
                            color: const Color(0xFF5B84B1),
                            shape: BoxShape.circle,
                            border: Border.all(color: Colors.white, width: 3)
                        ),
                        child: const Icon (Icons.camera_alt, size: 25,
                        ),
                      ),
                    ),

                  ),

                ],
              ),


            ),


          ),
        ),
        // color: Colors.black12,
      ),

    );
  }

But its not giving me the exact behaviour I am looking for. the two containers are placed on top of each other but the small one with the icon is being cutted from the edges as the image shows:

What should I do to fix this?

No, I didnt and I actually updated the quistion to include the full widget code — taha khamis, Aug 10 '22 at 04:29

Renik Shiroya · Answer 1 · 2022-08-10T03:59:06.877

You can use of Stack() with Positioned(bottom:0.0, right: 0.0, child: Icon()

You can try to put another container outside of Clipped Container in stack.

  Stack(
      children: [
          Container(
            height: 100.0.h,
            width: 100.0.h,
            decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  image: DecorationImage(
                       image: AssetImage(AppImages.placeHolderImage))
                  ),
                ),
            Positioned(
               bottom: 0.0,
               right: 2.0,
               child: Container(
                    padding: EdgeInsets.all(8.0.sp),
                    decoration: const BoxDecoration(
                         shape: BoxShape.circle,
                         color: Colors.red,
                    ),
                child: Image.asset(
                     AppImages.cameraProfile,
                     scale: 3.0.sp,
                ),),)
  ],
),

score 1 · Answer 2 · answered Aug 10 '22 at 04:30

1

camera Icon from this Container gesture you need add this line behavior: HitTestBehavior.translucent

like this

GestureDetector(
      behavior: HitTestBehavior.translucent, // add this line
      onTap: () {
        //TODO
      },
      child: Container(

        alignment: Alignment.bottomRight,
        padding: const EdgeInsets.only(right: 4.0),
        width: 150.0,
        height: 150.0,

        child: Positioned(
          child: Container(
            width: 50,
            height: 50,
            decoration: BoxDecoration(
                color: const Color(0xFF5B84B1),
                shape: BoxShape.circle,
                border: Border.all(color: Colors.white, width: 3)
            ),
            child: const Icon (Icons.camera_alt, size: 25,
            ),
          ),
        ),

      ),
    )

answered Aug 10 '22 at 04:30

Mahesh

862
5
11

Thanks for your respons. Nothing has been changed actually – taha khamis Aug 10 '22 at 04:37
okay, if you want profile pic clickable just add this line in gesture " behavior: HitTestBehavior.translucent" – Mahesh Aug 10 '22 at 04:39
I dont have a problem with the profile pic being clickable as i am wraping the whole thing in an inkWell and you can look at the code again as I have updated my question to include the full code. My problem is just that the icon container is not appearing properly and its being cutted from the bottom right edges – taha khamis Aug 10 '22 at 04:41
okay got it. i'll share new code – Mahesh Aug 10 '22 at 04:48
try this padding: const EdgeInsets.only(right: 15.0), – Mahesh Aug 10 '22 at 05:11
1

well this actually just drag it inside the container but it doesnt solve that issue, however, I have actually managed to solve it differently and I will be posting my answer so you can have a look. And thanks again for your response – taha khamis Aug 10 '22 at 05:31

score 0 · Answer 3 · answered Aug 10 '22 at 05:35

Thanks for all the comments. This is how I solved that issue:

Widget buildImage() {
    return Center(
      child: Container(

        decoration: const BoxDecoration(
          color: Colors.black12,
          shape: BoxShape.circle,
        ),

        child: Material(
          color: Colors.transparent,
          child: InkWell(
            customBorder: const CircleBorder(),
            onTap: () {
              showModalBottomSheet(
                  context: context,
                  builder: (context) {
                    return Column(
                      mainAxisSize: MainAxisSize.min,
                      children: <Widget>[
                        ListTile(
                          leading: const Icon(Icons.photo),
                          title: const Text('Gallery'),
                          onTap: () {
                            pickImage(ImageSource.gallery);
                            Navigator.pop(context);
                          },
                        ),
                        ListTile(
                          leading: const Icon(Icons.camera_alt_outlined),
                          title: const Text('Camera'),
                          onTap: () {
                            pickImage(ImageSource.camera);
                            Navigator.pop(context);
                          },
                        ),

                      ],
                    );
                  });
            },
            child: Container(
              decoration:  BoxDecoration(
                image: DecorationImage(image: CachedNetworkImageProvider(
                      imageURL
                 )

                ),
                shape: BoxShape.circle,

              ),


              alignment: Alignment.bottomRight,
              padding: const EdgeInsets.only(right: 4.0),
              width: 150.0,
              height: 150.0,
              child: Container(
                width: 50,
                height: 50,
                decoration: BoxDecoration(

                    color: const Color(0xFF5B84B1),
                    shape: BoxShape.circle,
                    border: Border.all(color: Colors.white, width: 3)
                ),
                child: const Icon (Icons.camera_alt, size: 25,
                ),
              ),

            ),
          ),
        ),
      ),

    );
  }

score 0 · Answer 4 · answered Aug 10 '22 at 05:45

Please Use Stack Widget and set the property

clipBehavior: Clip.none, to full control for Positioned Widget . See the below example for reference

              Stack(
                    clipBehavior: Clip.none,
                    children: [
                      Container(
                        height: 150.0,
                        width: 150.0,
                        decoration: BoxDecoration(
                          shape: BoxShape.circle,
                          border: Border.all(
                            color: Colors.white,
                          ),
                        ),
                        child: const Icon(
                          Icons.person,
                          size: 70,
                        ),
                      ),
                      Positioned(
                        bottom: 0.0,
                        right: 6.0,
                        child: Container(
                          padding: const EdgeInsets.all(8.0),
                          decoration: const BoxDecoration(
                            color: Colors.white54,
                            shape: BoxShape.circle,
                          ),
                          child: const Icon(
                            Icons.camera_alt_outlined,
                          ),
                        ),
                      )
                    ],
                  ),

Thanks for your response. This is exactly what I have in the question. I was using Stack with clipBehavior: Clip.none, but it was not solving the issue I mentioned. Anyway I have managed to solve it differently as I shared my solution as well as an answer. — taha khamis, Aug 10 '22 at 06:01

Zia · Answer 5 · 2023-05-08T15:07:29.610

If someone need overlay like me please follow this

Container(
      decoration: iconStyle(context),
      child: Stack(
              clipBehavior: Clip.none,
              children: [
                Container(
                  width: 23,
                  height: 23,
                  margin: EdgeInsets.fromLTRB(8, 7, 8, 7),
                  padding: EdgeInsets.all(1),
                  child: assetImage(context, "bell.png"),
                ),
                Positioned(
                  bottom: -5,
                  right: -5,
                  child: Container(
                    width: 12,
                    height: 12,
                    padding: EdgeInsets.all(2),
                    decoration: BoxDecoration(
                        color: Colors.red,
                        borderRadius: BorderRadius.circular(10),
                        border: Border.all(color: Tingsapp.white, 
                      width: 2)),
                  ),
                ),
              ],
            );
      );

How to place a container on top of other container properly in flutter

5 Answers5