Home > Software design >  how to resolve flutter stack widget problems
how to resolve flutter stack widget problems

Time:12-27

 SizedBox(
                width: ScreenUtil().setWidth(197),
                height: ScreenUtil().setHeight(117),
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(ScreenUtil().radius(30)),
                  child: Stack(
                    clipBehavior: Clip.none,
                    fit: StackFit.expand,
                    children: [
                      Image.asset(
                        "assets/images/image2.png",
                        fit: BoxFit.cover,
                      ),
                      Positioned(
                        right: -15,
                        top: -15,
                        child: Container(
                          height: 50,
                          width: 50,
                          decoration: BoxDecoration(
                            color: Colors.orange,
                            borderRadius: BorderRadius.circular(15),
                          ),
                        ),
                      ),
                      Positioned(
                        bottom: 10,
                        left: 12,
                        child: Text("naber lan"),
                      )
                    ],
                  ),
                ),
              )

Why doesn't it go over the edges?Flutter inspector see outside but emulator same problem what can I do pls help what should i do.I tried everything

CodePudding user response:

you are almost there but I think you miss the cliprect concept, when you used outside of stack it's clipping widget, you just put it inside stack.

Center(
          child: SizedBox(
            width: 197,
            height: 117,
            child: Stack(
              clipBehavior: Clip.none,
              fit: StackFit.expand,
              children: [
                ClipRRect(
                  borderRadius: BorderRadius.circular(30),
                  child: Image.asset(
                    "assets/images/test.jpg",
                    fit: BoxFit.cover,
                  ),
                ),
                Positioned(
                  right: -15,
                  top: -15,
                  child: Container(
                    height: 50,
                    width: 50,
                    decoration: BoxDecoration(
                      color: Colors.orange,
                      borderRadius: BorderRadius.circular(15),
                    ),
                  ),
                ),
                Positioned(
                  bottom: 10,
                  left: 12,
                  child: Text("naber lan"),
                )
              ],
            ),
          ),
        )

output:

enter image description here

  • Related