How to Implement Stack Correctly in Flutter?

Question

Basically I'm new to Flutter and trying to make a design like this -

So I Tried Stack for this but couldn't make it perfect. Here is my code and image

Stack(
   children: [
      Positioned(
         child: Container(
            height: 150,
            width: 150,
            decoration: BoxDecoration(
               borderRadius: BorderRadius.circular(10.0),
               color: Colors.yellow,
               ),
            ),
         ),
      Positioned(
         child: Container(
         height: 250,
         width: 250,
         decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(10.0),
            color: Colors.red,
            ),
         ),
         top: 10,
         left: 5,
         right: 5,
       ),
  ],),

Answer 1

You will need to give proper positione to each and every Positioned widget.

This code will provide you output which you expact. You can checkout interactive code here .

      Stack(
        children: [
          Positioned(
            left: 125,
            top: 50,
            child: Container(
              height: 250,
              width: 250,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10.0),
                color: Colors.black,
              ),
            ),
          ),
          Positioned(
            left: 100,
            top: 60,
            child: Container(
              height: 300,
              width: 300,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10.0),
                color: Colors.red,
              ),
            ),
          ),
          Positioned(
            left: 75,
            top: 75,
            child: Container(
              height: 350,
              width: 350,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10.0),
                color: Colors.yellow,
              ),
            ),
          ),
        ],
      )

Answer 2

Rather then achieve it with Stack widget you can try this with Column widget like below

Column(
    children: [
      Container(
        height: 20,
        width: MediaQuery.of(context).size.width - 150,
        decoration: BoxDecoration(/*as-per-your-requirement*/),
      ),
      Container(
        height: 20,
        width: MediaQuery.of(context).size.width - 100,
        decoration: BoxDecoration(/*as-per-your-requirement*/),
      ),
      Container(
        ///this will be your main layout that user can completely see
        width: MediaQuery.of(context).size.width - 50,
        decoration: BoxDecoration(/*as-per-your-requirement*/),
        child: /*as-per-your-requirement*/,
      ),
    ],
  )

Answer 3

Stack(
    children: [
      Positioned(
          top: -52.h,
          left: -22.w,
          child: Text(
            "$position",
            style: TextStyle(
                fontWeight: FontWeight.w700,
                fontSize: 200.sp,
                color: Color(0x2007B4CF)),
          )),
      Positioned(
        child: SvgPicture.asset(Res.ic_plan_lock),
        top: 20.h,
        right: 20.w,
      ),
      Positioned(
        top: 46.h,
        left: 13.w,
        right: 13.w,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            SvgPicture.asset(Res.ic_plan_secured),
            SizedBox(
              height: 10.h,
            ),
            Text(
              offer.offerName,
              style: TextStyle(
                  fontWeight: FontWeight.w600,
                  fontSize: 14.sp,
                  color: ColorUtil.of(context).primaryDark),
            ),
            SizedBox(
              height: 12.h,
            ),
            Text(
              offer.offerText,
              textAlign: TextAlign.center,
              style: TextStyle(
                  fontWeight: FontWeight.w600,
                  fontSize: 14.sp,
                  color: Colors.black),
            ),
          ],
        ),
      ),
      Positioned(
          bottom: 20.h,
          left: 20.h,
          right: 20.h,
          child: GestureDetector(
            behavior: getDefaultGestureDetectorBehaviour(),
            onTap: () {
              onCtaClicked();
            },
            child: Container(
              height: 31.h,
              width: 159.w,
              alignment: Alignment.center,
              decoration: BoxDecoration(
                  color: Color(0xFF2D2D3D),
                  borderRadius: BorderRadius.circular(10.h)),
              child: Text(
                offer.route,
                style: TextStyle(
                    color: ColorUtil.of(context).colorPrimaryLight,
                    fontSize: 14.sp,
                    fontWeight: FontWeight.w500),
              ),
            ),
          ))
    ],
  ),

Answer 4

Please update your code with the below code. Here, I have fix the height only as device wise width could be changed. I have used Align widget to position the widget to bottom.

Stack(
        children: [
          Align(
            alignment: Alignment.bottomCenter,
            child: Container(
              margin: const EdgeInsets.symmetric(horizontal: 90),
              height: 160,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.only(topLeft: Radius.circular(20), topRight: Radius.circular(20)),
                color: Colors.greenAccent,
              ),
            ),
          ),
          Align(
            alignment: Alignment.bottomCenter,
            child: Container(
              margin: const EdgeInsets.symmetric(horizontal: 50),
              height: 140,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.only(topLeft: Radius.circular(15), topRight: Radius.circular(15)),
                color: Colors.orange,
              ),
            ),
          ),
          Align(
            alignment: Alignment.bottomCenter,
            child: Container(
              margin: const EdgeInsets.symmetric(horizontal: 20, vertical: 0),
              height: 120,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.only(topLeft: Radius.circular(10), topRight: Radius.circular(10)),
                color: Colors.limeAccent,
                boxShadow: [
                  BoxShadow(
                    color: Colors.yellow,
                    offset: Offset(0.0, 1.0), //(x,y)
                    blurRadius: 5.0,
                  ),
                ],
              ),
            ),
          ),
        ],)

It will look like this,