Flutter, Nesting scrollable (or list) views

Question

Can anyone clarify for me what I have shown in the 'image' attached is achievable in flutter? if yes, how? explaining the image is a bit hard.

I am new to flutter and trying to nest some scrollable views inside each other.

at first I tried to achieve this by nesting simple scrollable row and columns inside each other but faced some errors and exceptions (unbound height and width).

I searched and found out it is better to use 'CustomScrollView' for nesting lists in each other. tried it but haven't achieved what I want yet. Any help/hint on how to achieve this would be much appreciated.

Nested Scroll Views

bragi · Accepted Answer · 2022-12-01T23:59:45.720

This is definitely possible, and you could use an approach like below, which is inspired by another question on stack overflow. I recommend reading that for better clarification -- here.

Edit: Wrapping the Row widget in a SingleChildScrollView would make the entire page scrollable.

body: Row(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Expanded(
            child: ListView.builder(
              scrollDirection: Axis.vertical,
              itemCount: X,
              itemBuilder: (BuildContext context, int index) => ...
            ),
          ),
          Expanded(
            child: ListView.builder(
              scrollDirection: Axis.vertical,
              itemCount: Y,
              itemBuilder: (BuildContext context, int index) => ...
            ),
          ),
        ],
      );

If this doesn't help, I'd suggest finding flutter repositories of e.g. Netflix clones or other existing apps known to have scroll views inside a list view.

score 0 · Answer 2 · answered Dec 02 '22 at 23:29

@bragi, thanks for the answer, I followed what you suggested and after some trial and error, I finally got it working. But in terms of efficiency and how the application will respond/render I am not sure if this was the best way to do it:

SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child: Row(
        // mainAxisSize: MainAxisSize.min,
        children: [
          makeColumn(),
          makeColumn(),
          makeColumn(),
          makeColumn(),
          makeColumn(),
        ],
      ),
    ),

Widget makeColumn() {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
  children: [
    Container(
      width: 150,
      height: 150,
      color: Colors.green,
    ),
    SizedBox(
      width: 150,
      height: 500,
      child: SingleChildScrollView(
        scrollDirection: Axis.vertical,
        child: Column(
          children: [
            Container(), ....

For some reason, the Expanded widget did not work so I had to wrap my second column with SizedBox!

Flutter, Nesting scrollable (or list) views

2 Answers2