Flutter - can I make a SingleChildScrollView fill the available space?

Question

I have a Flutter app which I'm building for Android. The structure goes broadly like this:

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("")),
      body: SingleChildScrollView(
        child: Container(
          decoration: const BoxDecoration(
            gradient: ...
          ),
          child: ...
        ),
      )
    );
  }

The goal here is to have the gradient background fill all the screen below the app bar, and if the content is larger than that space then to make it scrollable.

If I omit the SingleChildScrollView , the Container fills the space. But of course if it overflows then there is no scrolling. With the code as above, the scroll view does its thing on small screens but on large screens the gradient background doesn't fill the whole available area.

If I change it around like this:

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("")),
      body: Container(
        decoration: const BoxDecoration(
          gradient: ...
        ),
        child: Column(children: [
          SingleChildScrollView(
            child: ...
          ),
          Expanded(child:Container())
        ]),
      )
    );
  }

then the gradient fills the background but the scroll view doesn't do the right thing - the content overflows the screen but can't be scrolled. How do I get it to do both?

Answer 1

The reason you're facing this issue is that your container is inside the SingleChildScrollView Widget and is getting scrolled along the SingleChildScrollView Widget. And Removing the SingleChildScrollView will result in renderflex overflow error

The Expanded keyword will throw incorrect use of ParentDataWidget

Also, you have added SingleChildScrollView widget inside the column you have to swap these well

Here is an example that I have given which will help you achieve it.

  Widget build(BuildContext context) {
    return Scaffold(
        body: Container(
    // Add The Container gradient here
      width: double.infinity,
      height: MediaQuery.of(context).size.height,
      child: SingleChildScrollView(
          child: Column(
            children: [
              Container(
                height: 100,
                width: 50,
                color: Colors.red,
              ),
              Container(
                height: 100,
                width: 50,
                color: Colors.blue,
              ),
              Container(
                height: 1000,
                width: 50,
                color: Colors.yellow,
              ),
              Container(
                height: 1000,
                width: 50,
                color: Colors.orange,
              ),
            ],
          )),
    ));
  }