Flutter SingleChildScrollView section doesn't scroll

Issue

I have this simple scaffold where I have 3 containers and I want the first container to remain fixed and scroll happens only for the second container and beyond. But for some reason, using the code below, I am not able to scroll at all and I get overflow by xxx pixels on the bottom error.

    Scaffold(
      body: Container(
        margin: EdgeInsets.only(
          top: MediaQuery.of(context).padding.top,
        ),
        child: Column(
          children: [
            Container(
              height: 300,
              width: 400,
              color: Colors.black,
            ),
            SingleChildScrollView(
              child: Column(
                children: [
                  Container(
                    width: ScreenUtil().setWidth(578),
                    height: ScreenUtil().setWidth(578),
                    color: Colors.red,
                    margin: EdgeInsets.all(30),
                  ),
                  Container(
                    width: ScreenUtil().setWidth(578),
                    height: ScreenUtil().setWidth(578),
                    color: Colors.red,
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );

Wrapping the first column with SingleChildScrollView works fine (below code), but that allows scrolling for the whole page which is not what I want. What am I missing?

   Scaffold(
      body: Container(
        margin: EdgeInsets.only(
          top: MediaQuery.of(context).padding.top,
        ),
        child: SingleChildScrollView(
          child: Column(
            children: [
              Container(
                height: 300,
                width: 400,
                color: Colors.black,
              ),
              Container(
                width: ScreenUtil().setWidth(578),
                height: ScreenUtil().setWidth(578),
                color: Colors.red,
                margin: EdgeInsets.all(30),
              ),
              Container(
                width: ScreenUtil().setWidth(578),
                height: ScreenUtil().setWidth(578),
                color: Colors.red,
              ),
            ],
          ),
        ),
      ),
    );

Solution

Wrap SingleChildScrollView in a container and set its size

Answered By - Arthur Alland