Flutter: Container + ListView scrollable

Question

I have a page with container + listView. Now the listView is scrollable, but I would like the whole page to be scrollable. (so if the user scrolls, the container goes 'away')

Column(
        children: <Widget>[
          Container(
              color: Colors.white.withOpacity(0.95),
              width: 400,
              height: 400,
              child: Text("")),
          ListView(
              children: posts,
            ),
        ],
      ),

Is this possible, and how can it be achieved?

Thanks!

Why don't you use a [`PageView`](https://api.flutter.dev/flutter/widgets/PageView-class.html) — Phani Rithvij, Dec 27 '19 at 10:29

score 13 · Answer 1 · answered Dec 27 '19 at 10:31

You can wrap the whole page with a SingleChildScrollView

here is an example:

SingleChildScrollView( // <- added
    child: Column(
        children: <Widget>[
          Container(
              color: Colors.white.withOpacity(0.95),
              width: 400,
              height: 400,
              child: Text("")),
          ListView(
              shrinkWrap: true, // <- added
              primary: false, // <- added
              children: posts,
            ),
        ],
      ),
);

for more info about see this question

Thanks, when I do that I get the error: A RenderFlex overflowed by 1232 pixels on the bottom. — Karel Debedts, Dec 27 '19 at 12:02

Kalpesh Kundanani · Accepted Answer · 2019-12-28T09:20:53.460

What if you don't use Column and use ListView.builder and according to indexes you show the widget.
For example on 0 index you show the Container.
This way you don't have to use any different widget for scrolling and as per your requirement the container will scroll with the list.
This way there is no chance that you will get any overflow error like you were getting while using Column.
Plus point of ListView.builder is that your posts will be created lazily and that is efficient way of creating ListView in Flutter. No matter how many posts you have your UI will not lag.
This at first may look like a hack but according to your requirement that the container must also be able to get scrolled, this solution makes sense to me because Container can be considered as a first element of the list.

Let me know if it works for you or not.

Following is the working code for your reference:

@override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: posts.length + 1, // +1 because you are showing one extra widget.
      itemBuilder: (BuildContext context, int index) {
        if (index == 0) {
          return Container(
              color: Colors.white.withOpacity(0.95),
              width: 400,
              height: 400,
              child: Text(""));
        }
        int numberOfExtraWidget = 1; // here we have 1 ExtraWidget i.e Container.
        index = index - numberOfExtraWidget; // index of actual post.
        return posts[index]; 
      },
    );
  }

I hope this works for you, in case of any doubt please comment.

score 3 · Answer 3 · answered Dec 27 '19 at 13:19

There are multiple ways you can achieve what you want. The only problem is that if you have large number of posts, listview with children posts, as shrinkWrap is set to true, will take time to calculate its required height, for that it will have to populate all of its children.

First

ListView(
    children: <Widget>[
      Container(
          color: Colors.white.withOpacity(0.95),
          width: 400,
          height: 400,
          child: Text("")),
      ListView(
        physics: NeverScrollableScrollPhysics(),
        primary: false, 
        shrinkWrap: true,
        children: posts,
        ),
      ),
    ],
  ),

Second

SingleChildScrollView(
    child: Column(
      children: <Widget>[
        Container(
            color: Colors.white.withOpacity(0.95),
            width: 400,
            height: 400,
            child: Text("")),
        ListView(
          physics: NeverScrollableScrollPhysics(),
          shrinkWrap: true,
          primary: false,
          children: posts,
        ),
      ],
    ),
  ),

Thanks, with solution one I have this error: Vertical viewport was given unbounded height. With solution 2 I have this error: A RenderFlex overflowed by 1232 pixels on the bottom. — Karel Debedts, Dec 28 '19 at 08:39

score 2 · Answer 4 · answered Dec 27 '19 at 11:20

2

use SingleChildScrollView then Container with hard coded container height, then list view builder, that should fix your issue.

answered Dec 27 '19 at 11:20

kapil

91
1
3
15

Thanks, it works indeed, but is there an option to get a flexible container? – Karel Debedts Dec 27 '19 at 12:05
1

@KarelDebedts u can use mediaquery to set dimensions of container. That will give it some flexibility. But other than that, i don't think thete is a good approach. – kapil Dec 28 '19 at 12:04

score 2 · Answer 5 · answered Dec 28 '19 at 08:42

I tried the following:

SingleChildScrollView(
      child: Container(
        height: 1000,
        width: 400,
        child: ListView(
          children: <Widget>[
          Container(
              color: Colors.white.withOpacity(0.95),
              width: 400,
              height: 400,
              child: Text("")),
          ListView(
              children: posts,
            ),
        ],
      ),
     ),
    ),

This works, but I would like that the container has a dynamic height and width? Is that possible? Thanks!

You don't have to use container of height 1000. See my answer: https://stackoverflow.com/a/59509514/6805835 — Kalpesh Kundanani, Dec 28 '19 at 09:19

Flutter: Container + ListView scrollable

5 Answers5

Linked