Question 79680 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter, Nesting scrollable (or list) views

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

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

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


  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search