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

CodePudding user response：

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.

CodePudding user response：

@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!