Floating picture outside its container in flutter-CodePudding

floating image `Container( clipBehavior: Clip.none, child: Stack( fit: StackFit.passthrough, children: [ //Stack helps to overlap widgets Positioned(

              top: 80,
              left: 50, //position of the widget
              child: Container(
                clipBehavior: Clip.none,
                // height: 250,
                // width: 250,
                decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: Colors.orange
                        .withOpacity(0.5) //background color with opacity
                    ),
                child: Image.asset("assests/FT300.png"),
              ),
            ),

            Positioned(
              left: -80,
              top: -50,
              child: Container(
                height: 180,
                width: 220,
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  color: Colors.redAccent.withOpacity(0.5),
                ),
              ),
            ),

            Positioned(
              //main content container postition.
              child: Container(
                height: 250,
                alignment: Alignment.center,
                child: Text(
                  "Stacked Containers Together",
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 20,
                  ),
                  textAlign: TextAlign.center,
                ),
              ),
            )
          ],
        ),`

I would like to make the picture floating outside its container as shown in the picture I have tried to use stack widget with "clipbehaviour.none" but still the picture is inside the container. Is there anybody encounter with this or have a solution for it. Thanks

CodePudding user response：

if you need the widget to be part of outside Stack, you need this:

Stack(
  overflow: Overflow.visible,
  children:

CodePudding user response：

As the overflow is deprecated, the first solution to the given snippet is

Stack(
        clipBehavior: Clip.none,
        children:

Full snippet update:

Container(
      clipBehavior: Clip.none,
      color: AppRepoColors().appRedColor(),
      child: Stack(
        clipBehavior: Clip.none,
        children: <Widget>[
          //Stack helps to overlap widgets
          Positioned(

            top: 0,
            left: 50, //position of the widget
            child: Container(
              clipBehavior: Clip.none,
              decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  color: Colors.orange
                      .withOpacity(0.5) //background color with opacity
              ),
              child: Image.asset("assests/FT300.png"),
            ),
          ),

          Positioned(
            left: -80,
            top: -50,
            child: Container(
              height: 180,
              width: 220,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: Colors.redAccent.withOpacity(0.5),
              ),
            ),
          ),

          Positioned(
            //main content container postition.
            child: Container(
              height: 250,
              alignment: Alignment.center,
              child: Text(
                "Stacked Containers Together",
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 20,
                ),
                textAlign: TextAlign.center,
              ),
            ),
          )
        ],
      ),
    ),