flutterflutter-ui

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 ?


Solution

  • 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