How to make ListView Scrollable in flutter

Question

Newbie here. I have managed to implement a ListView that simply displays images. However the ListView isn't scrollable. I have attempted to wrap it in SingleChildScrollView, have added physics to AlwaysScrollableScrollPhysics and also tried removing Expand widgets from the layout. What am I missing?

LAYOUT

return Scaffold(
  body: SingleChildScrollView(
    child: Column(children: [
      SizedBox(
        height: 6,
      ),
      StreamBuilder(
        stream: ref.onValue,
        builder: (context, AsyncSnapshot snapshot) {
          if (snapshot.hasData &&
              !snapshot.hasError &&
              snapshot.data.snapshot.value != null) {
            lists.clear();
            DataSnapshot dataValues = snapshot.data.snapshot;
            Map<dynamic, dynamic> values = dataValues.value as Map;
            values.forEach((key, values) {
              lists.add(values);
            });

            return new ListView.builder(
              physics: AlwaysScrollableScrollPhysics(),
              shrinkWrap: true,
              itemCount: lists.length,
              itemBuilder: (BuildContext context, int index) {
                return Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    Card(
                      margin: EdgeInsets.fromLTRB(2, 2, 2, 2),
                      elevation: 20,
                      child: GestureDetector(
                        onTap: () {
                          String imageurl = lists[index]["image"];
                          Navigator.push(
                              context,
                              MaterialPageRoute(
                                builder: (context) => FullScreenImageViewer(
                                  imagurl: imageurl,
                                ),
                              ));
                        },
                        child: Padding(
                          padding: EdgeInsets.all(5),
                          child: Container(
                            width: 400,
                            child: Image(
                              image:
                                  NetworkImage(lists[index]["image"]),
                            ),
                          ),
                        ),
                      ),
                    ),
                  ],
                );
              },
            );
          }


          return Container();

        },
      ),
    ]),
  ),
);

Answer 1

There's a property within listView() that tells it which irection the overflow is so as to scroll. Set it to

scrollDirection: Axis.horizontal

Answer 2

You can remove the single child scroll view, i believ the problem here is because you are using a column and the listview is not expanding to the whole screen. If you want to make sure the listview occupy the all the space remaining you can use the Flex and expanded widget.

Flex can work like a column or row depending on which direction you are providing it with. anything that is placed here behave exactly like when they is placed in the column or row except for Expanded, as they fill the remainning space.

I've changed your code a bit here to accomodate the Flex and Expanded widget (you just need to readd your logic and the streambuilder to make it work)

return Scaffold(
  body: Flex(direction: Axis.vertical, children: [
    const SizedBox(
      height: 6,
    ),
    Expanded(
      // Change the children to stream builder if neccesary
      child: ListView.builder(
        shrinkWrap: true,
        itemCount: 5,
        itemBuilder: (BuildContext context, int index) {
          return Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Card(
                margin: const EdgeInsets.all(2),
                elevation: 20,
                child: GestureDetector(
                  onTap: () {
                    // ACTION HERE
                  },
                  child: const Padding(
                    padding: EdgeInsets.all(5),
                    child: Image(
                      image: NetworkImage("https://picsum.photos/200/300"),
                    ),
                  ),
                ),
              ),
            ],
          );
        },
      ),
    )
  ]),
);