Reputation: 213
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
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
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
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