Having issues laying out Stack widget

Question

I am having issues in laying out the stack widget in flutter, I might have done some awful nesting though, You can run this code in your machine. I am really bad laying out stack widgets.

class TierView extends StatelessWidget {
  const TierView({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          Stack(
            fit: StackFit.loose,
            children: [
              SizedBox(
                height: Get.height * 0.29,
                width: double.infinity,
                child: Stack(
                  fit: StackFit.loose,
                  children: [
                    Image.asset(
                      ImagesConstants.map_two_image,
                    ),
                    Container(
                      height: Get.height * 0.28,
                      color: const Color(0xFF0346A0).withOpacity(.5),
                    ),
                    Column(
                      children: [
                        Spaces.mid,
                        GlobalAppBar(
                          actionImage: ImagesConstants.filterListLight,
                          bgActionColor: const Color(0xFF1D406E),
                          appBarColor: Colors.transparent,
                          title: "Select Location",
                          actionButton: () {},
                          titleColor: Colors.white,
                        ),
                      ],
                    ),
                    Positioned(
                      child: Align(
                        alignment: Alignment.bottomCenter,
                        child: Container(
                          height: 90, 
                          width: Get.width * 0.5, 
                          color: Colors.red,
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Hello there, I am trying to make a single page UI. I want the red container to be in the bottom center and it should go more below than the background image.

This is what I am aiming for.

and this is what my code does. Please help me solve (:

Answer 1

You need to count the full Stack size including the bottom white space.

class TierView extends StatelessWidget {
  const TierView({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: LayoutBuilder(
        builder: (context, constraints) {
          final width = constraints.maxWidth;
          final height = constraints.maxHeight;

          const redContainerHeight = 100.0;
          return Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              SizedBox(
                height: height * 0.4, //with bottom white space
                width: double.infinity,
                child: Stack(
                  clipBehavior: Clip.none,
                  fit: StackFit.loose,
                  children: [
                    // Image.asset(
                    //   ImagesConstants.map_two_image,
                    // ),
                    Positioned(
                      top: 0,
                      right: 0,
                      left: 0,
                      bottom: redContainerHeight,
                      child: Placeholder(),
                    ),
                    Container(
                      height: height * 0.3,
                      width: width,
                      color: const Color(0xFF0346A0).withOpacity(.5),
                    ),
                    Column(
                      children: [],
                    ),
                    Align(
                      alignment: Alignment.bottomCenter,
                      child: Container(
                        height: redContainerHeight,
                        width: width * 0.5,
                        color: Colors.red,
                      ),
                    ),
                  ],
                ),
              ),
            ],
          );
        },
      ),
    );
  }
}