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 🙂

Answer 1

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.