Search code examples
flutterstackcontainersclip

Flutter place an object from a stack on top of container outside that stack

enter image description here

Long story short I have a stack, in which I have an image that is position out of the stack.

body: Column(
        children: [
          Stack(
            clipBehavior: Clip.none,
            alignment: Alignment.center,
            children: [
              _positionedImage(),
            ],
          ),
          _bodyContainer(),
        ],

container:

Widget _bodyContainer() {
    return Container(
      width: MediaQuery.of(context).size.width,
      height: 200,
      decoration:  BoxDecoration(
        color: itsyBackground,
        borderRadius: BorderRadius.only(topLeft: Radius.circular(20), topRight: Radius.circular(20)),
        boxShadow: [BoxShadow(offset: Offset(0, 0), color: Colors.green, spreadRadius: 1, blurRadius: 1),],
      ),

        );
  }

How can I make so that picture is on top of the container?

Solution

  • the approach that you used is wrong here.. You don't need a column here. You can simply render a stack an the bottom most widget should be placed first in the stack children.

    https://medium.com/flutter-community/a-deep-dive-into-stack-in-flutter-3264619b3a77

    An Example:

    Stack(
        clipBehavior: Clip.none,
        alignment: Alignment.center,
        children: [
          Container(
            width: MediaQuery.of(context).size.width,
            height: 200,
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(20),
                  topRight: Radius.circular(20)),
              boxShadow: [
                BoxShadow(
                    offset: Offset(0, 0),
                    color: Colors.green,
                    spreadRadius: 1,
                    blurRadius: 1),
              ],
            ),
          ),
          Positioned(
            top: -10,
            child: Image.network(
              'https://static.toiimg.com/thumb/msid-31346158,width-748,height- 
      499,resizemode=4,imgsize-114461/.jpg',
              width: 100,
            ),
          ),
        ],
      ),