Flutter ListView.Builder inside SingleChildScrollView not scrollable

Question

I've just began Flutter. I made a HeaderComponent which shows the title "Home" at the top and I used the BubbleBottomNavbar plugin which is displayed at the bottom. For the moment, I'm using a list of strings as a mock but will later get a lists of news from an API an loop to display as cards.

I tried to create as many components as I can and wrap them to reuse the same "MainContainer" everywhere. This one will show the HeaderComponent and a list of widgets it will receive in parameters as content.

I want to it to be a scrollable view by default. All its widgets in content are well displayed but I keep seeing the "bottom overflowed ..." warning. I tried many components and different way to fix this using Flex component, Expandable, ... but I still can't scroll and keep this warning

This is my App Render :

Here are my build methods :

MainComponent.dart :

PostsComponent.dart :

Thank you for the help you'll provide me

Height of the container shouldn't be MediaQuery.of(context).size.height. That would include the height of the appbar and the bottom navigation bar. U can remove the extra space directly (by using 0.8x of the height or something) or like shown [here](https://stackoverflow.com/questions/50075945/how-to-get-appbar-height-in-flutter) — rkdupr0n, Jul 15 '20 at 15:58
add mediaQuery.size.height - appBar.preferredSize.height - mediaQuery.padding.top — Jitesh Mohite, Jul 15 '20 at 16:01
I just removed both width and height property to the parent container in MainContainer.dart, I noticed they weren't even useful and weren't changing anything — , Jul 15 '20 at 16:04
stacking 2 scrollable widgets into each other is a bad idea (when they both use the same axis, in this case vertical). Just use a `Listview` in a `Column` or use a `Column` in a `SingleChildScrollView` or you use Slivers, like `SliverList`. — scrimau, Jul 15 '20 at 16:04
I don't see why you have a container, a column, a singlechildscrollview and a listview! ListView itself is scrollable by default so you could have just used that. — Hossein Yousefi, Jul 15 '20 at 16:09

scrimau · Accepted Answer · 2020-07-15T19:46:54.103

You probably want to have a fixed header and a scrollable list of posts beneath it. To achieve this, you want to structure the build method of your page like this:

Widget build(BuildContext context){
  return Column(children: <Widget>[
      HeaderComponent(title:"Home", hasBackButton:false),
      ListView.builder(
        ...
      ),
    ],
  )
}

Stacking 2 widgets, that are scrollable on the same axis, into each other, often results in bugs ("unlimited dimension", "overflow", etc.), because there is no clear scroll behaviour for where these 2 components overlap.

To implement a Sliver behaviour, use, well, Slivers, like SliverList.

Jagandeep Brar · Answer 2 · 2020-07-15T16:17:27.643

May I ask why you have created a custom header and are not using an AppBar? You can create a custom PreferredSizedWidget that you could pass to your scaffold if you need an excessively customized design (but you can do all elements of your design in the prebuilt AppBar).

It is recommended in the Flutter documentations for SingleChildScrollView to only use it if necessary, and instead use a ListView instead.

When you have a list of children and do not require cross-axis shrink-wrapping behavior, for example a scrolling list that is always the width of the screen, consider ListView, which is vastly more efficient that a SingleChildScrollView containing a ListBody or Column with many children.

If you made your header an AppBar, you could then use ListView.builder(...) as the body of the scaffold.

But if you are insistent on using SingleChildScrollView for this use case, use a ListBody with your externally built widgets passed in as children. If you want to do in-line generation of the list elements, you can use List.generate to generate the list in-line within ListBody.

Keep the Column on the outside, with the first child element of the Column your header, then the SingleChildScrollView with ListBody as its child with your list elements as the children.

Widget build(BuildContext context) => Column(
 children: <Widget>[
   Header(),
   SingleChildScrollView(
     child: ListBody(
       children: List.generate(...),
     ),
   )
 ],
);

EDIT: Or as the other user recommended, you could nest a ListView within the Column and eliminate the SingleChildScrollView entirely, which is more ideal and much more performant.

score 0 · Answer 3 · answered Aug 16 '21 at 18:01

Hye, As I have struggled with finding the answer. But finally I solved it.

For those who wants their DataTable to scroll vertical as well as horizontal.

Expanded(
    child: ListView(children: [
      Column(
        children: [
           SingleChildScrollView(
                 scrollDirection: Axis.horizontal,
                 child: DataTable(
                          columns: [
                              DataColumn(label: Text('Storage Location')),
                              DataColumn(label: Text('Piece No ')),
                            ],
                          rows:
                              DataRow(
                                 cells: <DataCell>[
                                            DataCell(Text(element["LGORT"])),
                                            DataCell(Text(element["PCNO"])),
                                                  ],
                                     ),
                               ),
                            ),
                     ],
            ),
       ]),
    )
);

score -1 · Answer 4 · edited Aug 08 '21 at 02:11

-1

You should make the ListView.builder inside a container, so the builder know where to take its Size(Height,Width from).

Widget build(BuildContext context){
  return Container(
     // You can add its height height here or you can leave it empty
     height : YourHeightValue,
     child: ListView.builder(
       ...
     ),
  )
}

edited Aug 08 '21 at 02:11

Tolga Kartal

617
4
12

answered Aug 06 '21 at 19:13

Mouaad SK

1

Flutter ListView.Builder inside SingleChildScrollView not scrollable

4 Answers4