How to make the whole screen scrollable with ListView.separated

Question

I have tried using SingleChildScrollView, with setting the child Column with a MainAxisSize.min but was not able to find a WORKING answer. Here is how my widget tree looks like:

Scaffold
 Stack
   Column
    Row
    SizedBox
    FutureBuilder
     SizedBox
      SingleChildScrollView
       ListView.separated (physics: NeverScrollableScrollPhysics())
   Container

These are the resources I have looked at:

• https://www.reddit.com/r/Flutter/comments/e93ujx/how_to_make_whole_screen_scrollable_with/
• Flutter ListView Builder scroll whole screen
• https://medium.com/@rubensdemelo/flutter-forms-improving-ui-ux-with-singlechildscrollview-7b91aa981475

Full Code

Scaffold(
        backgroundColor: Color(0xFF1C1C1C),
        body: Stack(
          children: [
            Column(
              children: [
                getHeading(),
                SizedBox( height: MediaQuery.of(context).size.height * (10/730) ),
                FutureBuilder(
                  future: getContent(),
                  builder: (context, snapshot) {
                    if(snapshot.hasData) {
                      List feedList = snapshot.data;
                      return SizedBox(
                        width: MediaQuery.of(context).size.width * 0.9,
                        height: MediaQuery.of(context).size.height * 0.925,
                        child: SingleChildScrollView(
                          child: ListView.separated(
                            physics: NeverScrollableScrollPhysics(),
                              shrinkWrap: true,
                              itemBuilder: (context, index) {
                                // code for builder
                              },
                              separatorBuilder: (context, index) {
                                return SizedBox( height: MediaQuery.of(context).size.height * (32/730) );
                              },
                              itemCount: feedList.length
                          ),
                        ),
                      );
                    }
                    else {
                      return ErrorScreens().pageNotFound(context, 100, 1, 24);
                    }
                  }
                )
              ],
            ),
            Center(
              child: Padding(
                padding: EdgeInsets.only(top: MediaQuery.of(context).size.height * 0.8),
                child: BottomNav().primaryBottomNav(MediaQuery.of(context).size.width * 0.92, 90, context),
              ),
            )
          ],
        ),
      )

EDIT: I think some of you didn't understand what I am trying to do. So I have two icons at the top of my screen which act as a heading, and below that is a ListView so when a user scrolls that ListView, I want the entire screen to scroll while this happens.

Answer 1

To scroll the whole screen you need to put your column widget inside SingleChildScrollView. So it's going to be something like below..

Scaffold
 Stack
   SingleChildScrollView
    Column
     Row
     SizedBox
     FutureBuilder
      SizedBox
        ListView.separated (physics: NeverScrollableScrollPhysics(), shrinkWrap:true)
   Container