Flutter - ListView.builder - can we add a variable to use as "counter" beside "index&-CodePudding

My question might seem badly formulated but I just couldn't find a clearer way to put it. Here's the situation :

I have a list of info contained in a list called "carnetList" (see code below).
I am supposed to display only the info for which the parameter "thematic" is false. This works fine. However, I need to number the info that I am displaying. I used "index" for that "List n°1 etc...". But since it skips some elements (thematic == true), then I get "List n°1... then List n°4 etc...".

Is there a way to add another "counter" ? that I could use instead of "index" which would actually correspond to the number of elements displayed ?

Here's the code :

ListView.builder(
            cacheExtent: 2000,
            padding: const EdgeInsets.all(20),
            itemCount: uD.userInfo.carnetList.length,
            itemBuilder: (context, index) {
              return uD.userInfo.carnetList[index].thematic == false
                  ? CarnetListCard2(
                      index: index,  **// This is where I used Index to display "List n $index" in the widget.** 
                      taille: uD.userInfo.carnetList[index].carnetWordId.length,
                      titre: uD.userInfo.carnetList[index].titre,
                      dateCreation: uD.userInfo.carnetList[index].creation,
                      dateModification:
                          uD.userInfo.carnetList[index].modification,
                      test: uD.userInfo.carnetList[index].test,
                      dateTest: uD.userInfo.carnetList[index].testDate,)                             
                  : Container();
            },
          ),

CodePudding user response：

you're close, but you do not want to filter the list during the item build. If you make sure your list is filtered before passing it to the listview you'll get the result you want. the simplest way to do this:

final list = D.userInfo.carnetList.where((carnet) => !carnet.thematic).toList();

return ListView.builder(
 itemCount: list.length,
 itemBuilder: (context, index) {
   final carnet = list[index];
   final number = index   1;
   ...
 }
)

or if you don't want to work with a seperate list

ListView(
  children: D.userInfo.carnetList.where((carnet) => !carnet.thematic).map((item) {
   return ... // your widget
 }).toList();
);

CodePudding user response：

You also can use a counter and whenever the condition is true, you increase it.

It will work as the index of the items that are actually good for me.

int _itemsCounter = 0;

ListView.builder(
            cacheExtent: 2000,
            padding: const EdgeInsets.all(20),
            itemCount: uD.userInfo.carnetList.length,
            itemBuilder: (context, index) {
              if (uD.userInfo.carnetList[index].thematic == false) _itemsCounter  ;

              return uD.userInfo.carnetList[index].thematic == false
                  ? CarnetListCard2(
                      index: index,  **// This is where I used Index to display "List n $index" in the widget.** 
                      taille: uD.userInfo.carnetList[index].carnetWordId.length,
                      titre: uD.userInfo.carnetList[index].titre,
                      dateCreation: uD.userInfo.carnetList[index].creation,
                      dateModification:
                          uD.userInfo.carnetList[index].modification,
                      test: uD.userInfo.carnetList[index].test,
                      dateTest: uD.userInfo.carnetList[index].testDate,)                             
                  : Container();
            },
          ),

Just make sure when you use the _itemsCounter as index, subtract 1 out of it.

So if 3 items fulfill the condition, this counter will be 3, but the indexes of elements are 0, 1, 2