List of horizontal list in Flutter

Question

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.

Answer 1

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:

Hope it helps