CODEWITHSUNDEEP
flutterlistviewdarthorizontal-scrollingflutter-widget
Andrea Grippi
Andrea Grippi

Reputation: 1609

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.

Upvotes: 41

Views: 91063

Answers (3)

MUHINDO
MUHINDO

Reputation: 1241

here is the horizontal list builder in flutter

          Expanded(
        child: ListView.builder(
          shrinkWrap: true,
          itemBuilder: (ctx,index){
            return Card(
              child: ListTile(
                  title: Text('Motivation $index'),
                  subtitle: Text('this is a description of the motivation')),
            );
          },
        ),
      ),

Upvotes: 0

Dhaval Shah
Dhaval Shah

Reputation: 1028

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

Upvotes: 75

CopsOnRoad
CopsOnRoad

Reputation: 268384

Screenshot:

enter image description here

Let's say, this is your horizontal ListView:

ListView _horizontalList(int n) {
  return ListView(
    scrollDirection: Axis.horizontal,
    children: List.generate(
      n,
      (i) => Container(
        width: 50,
        color: Colors.accents[i % 16],
        alignment: Alignment.center,
        child: Text('$i'),
      ),
    ),
  );
}

You can put the it either in a ListView or a Column.

  • In a ListView:

    Wrap your horizontal list in a SizedBox and provide a fixed height.

    ListView(
  children: [
    SizedBox(
      height: 50,
      child: _horizontalList(8),
    ),
    SizedBox(
      height: 50,
      child: _horizontalList(12),
    ),
    SizedBox(
      height: 50,
      child: _horizontalList(16),
    ),
  ],
)

  • In a Column:

    You also have advantage of using Expanded/Flexible widgets.

    Column(
  children: [
    SizedBox(
      height: 50,
      child: _horizontalList(8),
    ),
    Expanded(
      child: _horizontalList(12),
    ),
    Flexible(
      child: _horizontalList(16),
    ),
  ],
)

Upvotes: 9

Related Questions