How to acheive overlapping design in flutter

Question

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

but the result is like this

what is the correct way to achieve this ?

Answer 1

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: