Flutter Question posted in
The official Flutter documentation can be found here.

How to acheive overlapping design in flutter

Im trying to implement the ui as below. i have tried with stack with two containers , with one positioned.

enter image description here

but the result is like this

enter image description here

what is the correct way to achieve this ?

Tags:

4

Answers


  1. 0

    Give the stack some additional space to prevent the overlapped container from getting clipped:

    enter image description here

    Here’s the code:

     Container(
          width: 300,
          height: 350,
          child:   Stack(
            children: [
              Container(
                width: 300 , 
                height: 300,
                color: Colors.orange,
              ),
              Positioned(
                bottom: 0,
                left: 50,
                  child: Container(
                    width : 200,
                    height: 100,
                    color: Colors.red,
                  ),
                 
              )
            ],
          )
        )

    it’s Math, Stack is represented in 350px of height while:

    • first child needs only 300px

    remaining = 50px

    • second child will needs 100px, will take the remaining 50px and the
      other 50px will be above the first child.
    Login or Signup to reply.
  2. 0

    You can wrap your stack in a sizedbox of height more than your large container.

    SizedBox(
    height: 200,
    child: Stack(
      alignment: Alignment.center,
      children: [
        Container(
          height: 160,
          width: 250,
          color: Colors.yellow,
        ),
        Positioned(
          bottom: -2,
          child: Container(
            width: 80,
            height: 40,
            color: Colors.red,
            alignment: Alignment.center,
            child: const Text("Back"),
          ),
        )
      ],
    ),
  )

    You can refer to the above code to get the desired approach. Hope it helps.

    Login or Signup to reply.
  3. 0

    There is property in stack called clipBehavior by default it is set as Clip.hardEdge meaning it will clip any overflowing part from the widget.

    you can set it as Clip.none and also mind the parent size of Stack. So that it does not overflow over other widgets

    Login or Signup to reply.
  4. 0

    This is how I would do it:

    SizedBox(
  width: 300,
  height: 400,
  child: Stack(
    children: [
      Container(
        margin: const EdgeInsets.only(bottom: 18),
        decoration: BoxDecoration(
          color: Colors.orange[300],
          borderRadius: BorderRadius.circular(20),
        ),
      ),
      Align(
        alignment: Alignment.bottomCenter,
        child: ElevatedButton(
          onPressed: () {},
          style: ElevatedButton.styleFrom(
            backgroundColor: Colors.red[500],
            padding: const EdgeInsets.symmetric(horizontal: 32),
          ),
          child: const Text(
            "Back",
            style: TextStyle(
              color: Colors.white,
            ),
          ),
        ),
      ),
    ],
  ),
);

    Result:

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search