Home > Back-end >  How to make a single vertical scrollable list where each item is a horizontal scrollable list?
How to make a single vertical scrollable list where each item is a horizontal scrollable list?

Time:12-01

I am trying to create a single vertical scrollable list where each item is a horizontal scrollable list.

  • The single vertical list should grow its height as big as possible.
  • Each horizontal list should have a fixed height.

How can I do something like this without external packages?

CodePudding user response:

You could create your horizontal list by putting a listview (or its variant like listview.builder or listview.separated) in a sized box with a fixed height and setting the scroll direction as Axis.horizontal.

You could have multiple horizontal lists like above in a column and wrap your column with a single child scroll view.

    body: SingleChildScrollView(child: Column(children: [
          SizedBox(
              height: 100,
              child: ListView(scrollDirection: Axis.horizontal, children: [
                MyWidget1(),
                MyWidget2(),
                MyWidget3(),
              ])),
          SizedBox(
              height: 100,
              child: ListView(scrollDirection: Axis.horizontal, children: [
                MyWidget1(),
                MyWidget2(),
                MyWidget3(),
              ])),
          SizedBox(
              height: 100,
              child: ListView(scrollDirection: Axis.horizontal, children: [
                MyWidget1(),
                MyWidget2(),
                MyWidget3(),
              ])),
        ])),
      ),
  • Related