How to make a background gradient fill the screen in a SingleChildScrollView? (but not ConstrainedBo-CodePudding

What is the best way to have a background gradient fill the entire screen, all while being in a SingleChildScrollView? I would like the screen to scroll only when necessary (when the items and bottom text overflow the screen). Note the Back button is a FAB.

Note: I have tried ConstrainedBox (but the scroll is weird when there's no overflow in the listview)

What's the best way to 1) fill the background completely, and 2) have scrolling activity only activate when the listview overflows?

My code:

  Widget body() {
    return SingleChildScrollView(
        child: Container(
            decoration: background(),
            child: Column(children: [
              listViewReminderBuilder(),
              SizedBox(height: 10),
              Container(
                  padding: EdgeInsets.all(5),
                  child: bottomText()),
              SizedBox(height: 10),
            ])));
  }

  BoxDecoration Background() {
    return BoxDecoration(
        gradient: LinearGradient(
      begin: Alignment.topRight,
      end: Alignment.bottomLeft,
      colors: [
        topColor,
        bottomColor,
      ],
    ));
  }

This is the result of the above code is shown below. The scroll works as I'd like (only scrolls when there's an overflow of listview items), but obviously the background doesn't fill the screen.

Many solutions online led me to the ConstrainedBox. My code and result is as follows:

  Widget body() {
    _screenHeight = MediaQuery.of(context).size.height;
    return SingleChildScrollView(
        child: Container(
            decoration: background(),
            child: ConstrainedBox(
                constraints: BoxConstraints(minHeight: _screenHeight),
                child: Column(children: [
              listViewReminderBuilder(),
              SizedBox(height: 10),
              Container(
                  padding: EdgeInsets.all(5),
                  child: bottomText()),
              SizedBox(height: 10),
            ]))));
  }

  // background() was the same

The result. In this case, the background nicely fills the screen, but the screen is always scrollable and looks weird if the listview items aren't overflowing.

What's the best way to 1) fill the background completely, and 2) have scrolling activity only activate when the listview overflows?

CodePudding user response：

first of all: wraping ListView with SingleChildScrollView is not good practice.

workaround:

use container only for background. by setting width infinity to fill entire screen. no need to wrap with SingleChildScrollView if you have a ListView. just use Expanded widget.

 Widget body() {
    return Container(
        width: double.infinity,
        // here you can set height if you want. 
        // but since we use Column,by default it will expand the maximum height. 
        decoration: background(),
        child: Column(children: [
         // using Listview will make you widget not overflowing.
         // wrap with expanded to make it fill available screen.
         Expanded(child: listViewReminderBuilder(),),
          SizedBox(height: 10),
          Container(padding: EdgeInsets.all(5), child: Text('Back')),
          SizedBox(height: 10),
        ]));
  }

i just tried on dartpad. and it works fine.