CODEWITHSUNDEEP
flutterflutter-layoutflutter-sliver
kelvin
kelvin

Reputation: 61

Building two different lists in flutter custom scroll view

How can I build two lists to be displayed vertically so as one list of item is built and then the second follows in that vertical order.

Upvotes: 6

Views: 4082

Answers (1)

Harsh Bhikadia
Harsh Bhikadia

Reputation: 10875

You can achieve this by using CustomScrollView with SliverList.

Your solution would look something like this:

CustomScrollView(
  slivers: <Widget>[
    //list 1 (using builder)
    SliverList(
        delegate: SliverChildBuilderDelegate(
              (context, i) {
            return ListTile(...); // HERE goes your list item
          },
          childCount: 3,
        ),
    ),
    //list 2 (using list of widgets)
    SliverList(
        delegate: SliverChildListDelegate([
          ListTile(..),
          ListTile(..), //HERE goes your list item
        ]),
    ),
  ],
),

this will build one list after another as you scroll down. in the example above i have used both types of delegates available to build list.

  1. SliverChildBuilderDelegate - needs a builder method which will be called to build widget for each list item. It is same as ListView.builder()
  2. SliverChildListDelegate - needs a list of widget which would be the items of the SliverList. It is same as ListView(children: ...)

Upvotes: 13

Related Questions