How can I show just 5 items of a list in flutter

Question

I want to show a list in flutter and I'm using listView. The thing is I just want to show 5 items, by this I mean that When the user scrolls down I want to remove from the beginning index and add another widget to the end of the list that contains my widgets, but when I do that the ScrollView instead of staying where it is(for example showing the item in the index 3) it goes to the next item(it jumps where the item 4 is).

My data is kinda expensive and I can't keep them I have to remove them from the beginning. I'm really stuck I would really appreciate some help

Wofford

Answer 1

To limit an Iterable(List is an Iterable) to n elements, you can use the .take(int count) method.

// A list of 0 - 999 ( 1,000 elements)
var nums = [for(int i = 0; i < 1000; i++) i];
// Take only the first 5, then print
print(nums.take(5));

The Iterable returned is lazy. It doesn't trim the list or anything. It's just an iterator that will only produce at most count values

Additionally, you can use the .skip(int count) method to skip the first count values in the list.

Combine the 2 for something like this:

// skips 0-4, takes 5,6,7,8,9
print(nums.skip(5).take(5));

Fuse

Answer 2

I am not 100% sure what your problem is. If you want to build widgets as you go, you can use ListView.builder widget. Give it an itemBuilder and an optional itemCount. It will build as you go and delete the unseen widgets.

ListView.builder(
    itemCount: myList.length,
    itemBuilder: (context, index) => Card(
      child: ListTile(
        title: Text(myList[index]),
        ),       
      ),
    ),
  ),

Check out this doc

Coupler

yes you are right, but if i do this it will just keep adding to the list view. imagine a list that contains numbers from 1 to 6. now I want to add number 7 to the list and also remove number 1 so it will be a list of numbers from 2 to 7. The problem is that when I do this the list view that is showing number 4 will show number 5 – Wofford

You can solve that by adding a key. Check out this video:youtu.be/… – Coupler

Answer 3

itemCount: 5, <<this will max your list

if your list less than 5 it will have error, so simply used this:

int limit_transaction = 0;

then in your FutureBuilder: builder: (context, snapshot) {

if (snapshot.hasData) {
 List<LastTransaction> list = snapshot.data;
    if(list.length == 1){
        limit_transaction = 1;
    } else if(list.length == 2){
        limit_transaction = 2;
    } else if(list.length == 3){
        limit_transaction = 3;
    } else if(list.length == 4){
        limit_transaction = 4;
    } else if(list.length == 5){
        limit_transaction = 5;
    }

Last Step in Listview, just parse this:

itemCount: limit_transaction,

Howbeit

Answer 4

Better works:

list1=list.sublist(0,5);

it limits list to first 5 elements.

Moser