flutter layout in singlechildscrollview

Question

I have the below layout and want to push CustomPaints at the end of the page for any screen size, how to achieve that? I tried Spacer but got an error and tried Flexible but I don't know how to use them properly.

  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: Column(
          children: [
            const HeaderShape(),
            const SizedBox(
              height: 50,
            ),
            body,
            SizedBox(
              height: 150,
              child: Stack(
                children: [
                  CustomPaint(
                    painter: const FooterPainter1(),
                    child: Container(),
                  ),
                  CustomPaint(
                    painter: const FooterPainter2(),
                    child: Container(),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

Answer 1

You can not use spacer in a column widget, if you did not wrap your column widget with a container/sizedBox with a definite height.

Flexible widget will wrap your widget to take the available space of the parent widget, but will NOT force the child to fit the space.

Expanded will share the available space of the parent widget, and force the child widget to change its width/height to fill the available space.

So, wraping you column with a sizedbox with height and using spacer widget will help you to achieve what you are looking for. Check the code below:

SingleChildScrollView(
        child: SizedBox(
          height: MediaQuery.of(context).size.height -kToolbarHeight - MediaQuery.of(context).padding.top -MediaQuery.of(context).padding.bottom,
          child: Column(
            children: [
              Container(child: Text('My Header')),
              const SizedBox(
                height: 50,
              ),
              Container(child: Text('My Body')),
              Spacer(),
              Container(child: Text('My Footer')),
            ],
          ),
        ),
      )

If you are not using appbar in your page, just remove kToolbarHeight and MediaQuery.of(context).padding.top from your SizedBox height parameter.