Flutter stack widgets not scrolling inside column

Question

My content is not scrolling inside Column widget. But when I remove Stack and add some random Text then it scrolls. What can be the issue?

Here is my output

Here is my code:

 Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(),
  body: SingleChildScrollView(
    child: Padding(
      padding: EdgeInsets.only(left: 10.0.w, right: 10.0.w),
      child: Column(
        children: [
          CustomButton(
            height: 40.0.h,
            width: 140.0.w,
            borderRadius: 0.0,
            textColor: Colors.white,
            text: "We Offer",
            onPressed: () => null,
            isEnabled: false,
          ),
          SizedBox(height: 10.0.h),
          Container(
            width: 300.0.w,
            child: Text(
              "Affordable and Effective Legal Help",
              textAlign: TextAlign.center,
              style: GoogleFonts.workSans(
                fontWeight: FontWeight.bold,
                fontSize: 35.0.sp,
                height: 1.2.h,
                color: Color(kDark.value),
              ),
            ),
          ),
          SizedBox(height: 10.0.h),
          ReusableText(
            text: "Our legal consultancy team will be available to support you",
            style: TextStyle(
              color: Color(kDark.value).withOpacity(0.4),
              fontSize: 12.0.sp,
            ),
          ),
          SizedBox(height: 17.0.h),
          Stack(
            clipBehavior: Clip.none,
            alignment: Alignment.center,
            children: [
              Image.asset('assets/images/tstimag.png'),
              Positioned(
                top: 180.0.h,
                child: Container(
                  width: 256.0.w,
                  padding: EdgeInsets.all(10.0.h),
                  decoration: BoxDecoration(
                    border: Border.all(
                      color: Color(kDark.value),
                    ),
                  ),
                  child: Column(
                    children: [
                      SizedBox(height: 20.0.h),
                      Container(
                        width: 160.0.w,
                        child: ReusableText(
                          text: "One time Drafting/ Revising a Contract",
                          style: TextStyle(color: Color(kDark.value), fontWeight: FontWeight.w600, fontSize: 16.sp),
                        ),
                      ),
                      Container(
                        margin: EdgeInsets.only(left: 55.0.w, right: 55.0.w),
                        child: Divider(
                          color: Color(kDark.value).withOpacity(0.4),
                          height: 16.0.h,
                        ),
                      ),
                      SizedBox(height: 17.0.h),
                      SizedBox(
                        height:128.0.h,
                        child: ListView.builder(
                          itemCount: featureList.length,
                          itemBuilder: (context, index) => FeatureIncludedWidget(featuresInclude: featureList[index]),
                        ),
                      )
                    ],
                  ),
                ),
              ),
              Positioned(
                top: 160.0.h,
                child: Container(
                  width: 130.0.w,
                  child: CustomButton(text: "AED 350", onPressed: () {}),
                ),
              ),
            ],
          ),
        ],
      ),
    ),
  ),
);

UPDATED

After giving height to Stack here is my design output.

Note: I have given 200 height to my Stack widget.

Answer 1

You Stack has height equal to the image since it's the only non-positioned child. The positioned ones are technically outside the stack. Wrap the stack with a SizedBox to a size that fits all content should fix it. You would also need alignment: Alignment.topCenter, instead of alignment: Alignment.center,