Why only the content in ListView.builder() is not scrolling?

Question

I have a screen with Text widgets and ListView, and when I try to scroll inside the ListView, it doesn't allow me to scroll.

My body is SingleChildScrollView but that doesn't provide scrollView for the ListView.builder. I tried to wrap the ListView.build inside Expanded, but didn't work out.

class HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: new AppBar(
          title: Text("MyBar"),
          centerTitle: true,
        ),
        body: SingleChildScrollView(child: Column(
          children: <Widget>[
            Text(
                "Information"),
            Container(
                child: ListView.builder(
                    scrollDirection: Axis.vertical,
                    shrinkWrap: true,
                    itemCount: widget.match.players.length,
                    itemBuilder: (context, index) {
                      return Column(
                        children: <Widget>[
                          Card(
                              child: ListTile(
                            leading: CircleAvatar(
                              radius: 30.0,
                              foregroundColor: 
                                Theme.of(context).primaryColor,
                              backgroundColor: Colors.grey,
                              backgroundImage: 
                          CachedNetworkImageProvider("url"),
                            ),
                            title: new Row(
                                mainAxisAlignment:
                                    MainAxisAlignment.spaceBetween,
                                children: <Widget>[
                                  new Text("Some text",
                                    style: new TextStyle(
                                        fontWeight: FontWeight.bold),
                                  ),
                                  new Text(
                                    "Some text",
                                    style: new TextStyle(
                                        fontWeight: FontWeight.bold),
                                  ),
                                ]),

                          ))
                        ],
                      );
                    }))
          ],
        )));}
  } 

Anyone has an idea how I can make the listView.builder() scrollable.

Answer 1

You need to make the ListView.builder not scrollable so the SingleChildScrollView can scroll. You could achieve that by setting one of these two properties to the ListView.builder:

physics: NeverScrollableScrollPhysics()

or

primary: false

But using the ListView.builder the way you're using it, it will create all the items at once. If you want to use the ListView.builder efficiently to create the items only when they're scrolled onto the screen, you could remove the SingleChildScrollView and just use ListView.builder like this:

ListView.builder(
  itemCount: widget.match.players.length + 1,
  itemBuilder: (context, index) {
    if (index == 0) {
      return Text("Information");
    }
    int listIndex = index - 1;
    // then you could use: widget.match.players[listIndex];
    return Column(...);
  }
)