flutterlistviewdarthorizontal-scrollingflutter-widget

List of horizontal list in Flutter


I have followed this tutorial and fully implemented a horizontally scrolling list. Now, what I would like to do is to create a vertical list where each row is a horizontal list.

I tried different approaches, but I keep thinking that it should be possible to simply set the horizontal list as a child of the vertical, but it doesn't work.

My code is:

Widget build(BuildContext context) {
return new Scaffold(
  
  body: Container(
      margin: EdgeInsets.symmetric(vertical: 20.0),
      height: 160.0,
      child: ListView(
        children: <Widget>[
          Text("First line"),
          HorizontalList(),
          Text("Second line"),
          HorizontalList()
        ],
      )
  ),

  drawer: new MyNavigationDrawer(),
);

}

I also tried putting the various horizontal lists inside ListTiles but the result is the same.


Solution

  • I guess what you want is a list within a another list Here is the adaptation of the sample program that you have followed The build method is like:

     Widget build(BuildContext context) {
        Widget horizontalList1 = new Container(
          margin: EdgeInsets.symmetric(vertical: 20.0),
          height: 200.0,
          child: new ListView(
          scrollDirection: Axis.horizontal,
          children: <Widget>[
            Container(width: 160.0, color: Colors.red,),
            Container(width: 160.0, color: Colors.orange,),
            Container(width: 160.0, color: Colors.pink,),
            Container(width: 160.0, color: Colors.yellow,),
          ],
        )
        );
        Widget horizontalList2 = new Container(
            margin: EdgeInsets.symmetric(vertical: 20.0),
            height: 200.0,
            child: new ListView(
          scrollDirection: Axis.horizontal,
          children: <Widget>[
            Container(width: 160.0, color: Colors.blue,),
            Container(width: 160.0, color: Colors.green,),
            Container(width: 160.0, color: Colors.cyan,),
            Container(width: 160.0, color: Colors.black,),
          ],
        )
        );
        return new Scaffold(
          appBar: new AppBar(
            title: new Text(widget.title),
          ),
          body: new Center(
            child: new Container(
              child: ListView(
                scrollDirection: Axis.vertical,
                children: <Widget>[
                  horizontalList1,
                  horizontalList2,
                ],
              ),
            ),
          ), // This trailing comma makes auto-formatting nicer for build methods.
        );
    

    The result is like:

    enter image description here

    Hope it helps