CODEWITHSUNDEEP
flutterflutter-ui
Febin Johnson
Febin Johnson

Reputation: 382

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 ?

Upvotes: 1

Views: 69

Answers (3)

Lostsaka
Lostsaka

Reputation: 308

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

Upvotes: 2

Ultranmus
Ultranmus

Reputation: 470

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

Upvotes: 0

Nidhi Jain
Nidhi Jain

Reputation: 285

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.

Upvotes: 0

Related Questions