Scrollable HomeScreen in Flutter

Question

I wonder why that doesn't work. Maybe one can help me, I think it's just a small mistake. I would like to be able to scroll the whole screen. The container with the "CompanyCard" widget can be scrolled vertically.

return Column(
      children: <Widget>[
        SearchBox(),
        Expanded(
          child: Stack(
            children: <Widget>[
              Container(
                child: ListView.builder(
                  scrollDirection: Axis.horizontal,
                  itemCount: companies.length,
                  itemBuilder: (context, index) => CompanyCard(),
                ),
              ),
            ],
          ),
        ),
        SearchBox(),
        SearchBox(),
        SearchBox(),
      ],
    );

horizontal: Facebook, Google Twitter (already works) vertical: the whole screen (not working)

please try to wrap Column with 'SingleChildScrollView' – KuKu Jun 17 '20 at 11:58 — KuKu, Jun 17 '20 at 11:58
that does not work. The screen no longer shows anything. – Florian Jun 17 '20 at 12:04 — Florian, Jun 17 '20 at 12:04
If my answer is correct, please mark it as answered – Nehal Jun 21 '20 at 04:56 — Nehal, Jun 21 '20 at 04:56

Nehal · Answer 1 · 2020-06-17T13:41:39.520

Wrap SingleChildScrollView to the widgets you like to scroll

    return Column(
      children: <Widget>[
        SearchBox(),
        SingleChildScrollView(
          child: Expanded(
            child: Stack(
              children: <Widget>[
                Container(
                  child: ListView.builder(
                    scrollDirection: Axis.horizontal,
                    itemCount: companies.length,
                    itemBuilder: (context, index) => CompanyCard(),
                  ),
                ),
              ],
            ),
          ),
        ),
        SearchBox(),
        SearchBox(),
        SearchBox(),
      ],
    );

New edit: To make the whole page scrollable, wrap the page in SingleChildScrollView:

Full Code:

 return Container(
              child: SingleChildScrollView(
                child: Expanded(
                  child: Column(
                    children: <Widget>[
                      SearchBox(),
                      SingleChildScrollView(
                        child: Expanded(
                          child: Stack(
                            children: <Widget>[
                              Container(
                                child: ListView.builder(
                                  scrollDirection: Axis.horizontal,
                                  itemCount: companies.length,
                                  itemBuilder: (context, index) =>
                                      CompanyCard(),
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                      SearchBox(),
                      SearchBox(),
                      SearchBox(),
                    ],
                  ),
                ),
              ),
            );

Thanks for your answer. I want to be able to scroll the whole screen. So the search boxes are just a placeholder. The search boxes should disappear under the phone screen. Maybe that helps. — Florian, Jun 17 '20 at 12:07
I edited the code to make whole page scrollable. If you want to make the search box disappear check on Sliver and CustomScrollView — Nehal, Jun 17 '20 at 13:43

score 0 · Answer 2 · answered Jun 17 '20 at 12:02

You need to specify an explicit height to your List View. By default a List View has infinite height / width.

To be able to scroll the entire screen, you need to wrap your root widget inside a SingleChildScrollView and then specify a height for the List View container. Somewhat like this :-

body : SingleChildScrollView(child :... 
 ... Other widgets... 
  Container (
    height :200,
    width :MediaQuery.of(context).size.width, // so that ListView occupies the entire width
child : ListView.builder(...

score 0 · Answer 3 · answered Jun 17 '20 at 12:24

I think ListView in Column needs height. I wrapped ListView with Container and give a some height.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(
        title: new Text("Home page"),
        elevation: 5.0,
      ),
      body: SingleChildScrollView(
        child: Container(
          child: Column(
            children: <Widget>[
              SizedBox(child: Text('asdf')),
              Container(
                height: 500,
                child: ListView.builder(
                  shrinkWrap: true,
                  scrollDirection: Axis.horizontal,
                  itemCount: 3,
                  itemBuilder: (context, index) =>
                      SizedBox(width: 200, child: Text('aaa')),
                ),
              ),
              SizedBox(child: Text('asdf')),
              SizedBox(child: Text('asdf')),
              SizedBox(child: Text('asdf')),
            ],
          ),
        ),
      ),
    );
  }

Scrollable HomeScreen in Flutter

3 Answers3