VegetaSaiyan
VegetaSaiyan

Reputation: 213

How to Start itemCount in ListView.builder from where previous list left off?

I have 2 rows of Listview builders (scrollable horizontally) showing interests.

Hoping that the first row will show the first 6 interests, and the next row showing the rest on the list.

How do I make the itemCount in the second as a range from 7 all the way to the end?

Any help is appreciated. The snippet of the code is as follows:

Padding(
                      padding: const EdgeInsets.fromLTRB(6, 6, 0, 0),
                      child: Container(
                        width: MediaQuery.of(context).size.width,
                        height: MediaQuery.of(context).size.height * 0.045,
                        child: ListView.builder(
                            shrinkWrap: true,
                            scrollDirection: Axis.horizontal,
                            padding: const EdgeInsets.all(1),
                            itemCount: 6,
                            itemBuilder: (context, int index) {
                              return Interests2(AvailableInterestChosen(
                                allInterests[index],
                                isChosen: false,
                              ));
                            }),
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.fromLTRB(6, 3, 0, 0),
                      child: Container(
                        width: MediaQuery.of(context).size.width,
                        height: MediaQuery.of(context).size.height * 0.045,
                        child: ListView.builder(
                            shrinkWrap: true,
                            scrollDirection: Axis.horizontal,
                            padding: const EdgeInsets.all(1),
                            **// itemCount: allInterests range from 6 to end of list,**
                            itemBuilder: (context, int index) {
                              return Interests2(AvailableInterestChosen(
                                allInterests[index],
                                isChosen: false,
                              ));
                            }),
                      ),
                    ),
...

The bold part in the 2nd padding is where I'm having trouble building the range.

Upvotes: 0

Views: 195

Answers (3)

Anushka Pubudu
Anushka Pubudu

Reputation: 427

You can call your second list view in listview.builder like that

ListView.builder(
                            shrinkWrap: true,
                            scrollDirection: Axis.horizontal,
                            padding: const EdgeInsets.all(1),
                           
                            itemBuilder: (context, int index) {
                              return Interests2(AvailableInterestChosen(
                                allInterests[6+index],
                                isChosen: false,
                              ));

Upvotes: 1

Jim
Jim

Reputation: 7601

second part:

                Padding(
                  padding: const EdgeInsets.fromLTRB(6, 3, 0, 0),
                  child: Container(
                    width: MediaQuery.of(context).size.width,
                    height: MediaQuery.of(context).size.height * 0.045,
                    child: ListView.builder(
                        shrinkWrap: true,
                        scrollDirection: Axis.horizontal,
                        padding: const EdgeInsets.all(1),
                        **// itemCount: allInterests range from 6 to end of list,**
                        itemBuilder: (context, int index) {
                          int newIndex = index + 6;
                          return Interests2(AvailableInterestChosen(
                            allInterests[newIndex],
                            isChosen: false,
                          ));
                        }),
                        itemCount: allInterests.length - 6
                  ),
                ),

Upvotes: 1

Junwha Hong
Junwha Hong

Reputation: 13

As parameters for second List view, you can use allInterests.size()-6 for item count, and index + 6 for access index to allInterests list.

Upvotes: 1

Related Questions