I know this is a common issue when we are not using the itemCount to list view. but here is my code

ListView.separated(
            physics: const BouncingScrollPhysics(),
            shrinkWrap: true,
            itemBuilder: (BuildContext context, int index) {
              print('num : ${episode[index]!.episodeNum.toString()}');
              final data = episode[index];
              if (type == adminPanel) {
                return Stack(
                  children: [
                    EpisodeBar(
                      episode: index   1,
                      caption: data!.caption,
                      time: data.time,
                      colorTheme: AppThemeColors.colorList[index],
                      duration: data.time,
                      link: data.link,
                    ),
                    Column(
                      children: [
                        EditButton(data: data, courseID: crsId),
                        const SizedBox(height: 20),
                        DeleteButton(eps: _eps, data: data, courseID: crsId),
                      ],
                    )
                  ],
                );
              }
              log('${snapshot.data!.length}');
              return EpisodeBar(
                episode: data!.episodeNum.toString(),
                caption: data.caption,
                time: data.time,
                colorTheme: AppThemeColors.colorList[index],
                duration: data.time,
                link: data.link,
              );
            },
            itemCount:snapshot.data!.length,
            separatorBuilder: (BuildContext context, int index) {
              if (type == adminPanel) {
                return const Divider(
                  thickness: 1,
                  height: 40,
                );
              }
              return const SizedBox(height: 20);
            },
          );

here is what's happening

I did use the item count, and everything was working properly, until the 40th list. and when I added the new data as 41, it shows this error, I couldn't find any mistake on this code. and why did exactly this stop working on 41??

CodePudding user response：

Here should be the problem:

final data = episode[index];

There's a chance that the episode array haven't the following index position.

Try to verify if they have the same element quantity.

To verify, and only verify, try this before build the ListView:

if (episode.length != snapshot.data!.length) {
    log('episode length is different from snapshot length');
    
    log('episode: ${episode.length}');
    log('snapshot: ${snapshot.data!.length}');

    return Container();
}

CodePudding user response：

Such errors are usually caused by indexing values before they are rendered!(My thought)

So to solve this, do this:

ListView.separated(
            physics: const BouncingScrollPhysics(),
            shrinkWrap: true,
            itemBuilder: (BuildContext context, int index) {
              //print('num : ${episode[index]!.episodeNum.toString()}'); // simply remove this
              final data = episode[index]; 
              if (type == adminPanel) {
                return Stack(
                  children: [
                    EpisodeBar(
                      episode: index   1,
                      caption: data!.caption,
                      time: data.time,
                      colorTheme: AppThemeColors.colorList[index],
                      duration: data.time,
                      link: data.link,
                    ),
                    Column(
                      children: [
                        EditButton(data: data, courseID: crsId),
                        const SizedBox(height: 20),
                        DeleteButton(eps: _eps, data: data, courseID: crsId),
                      ],
                    )
                  ],
                );
              }
              log('${snapshot.data!.length}');
              return EpisodeBar(
                episode: data!.episodeNum.toString(),
                caption: data.caption,
                time: data.time,
                colorTheme: AppThemeColors.colorList[index],
                duration: data.time,
                link: data.link,
              );
            },
            itemCount:snapshot.data!.length,
            separatorBuilder: (BuildContext context, int index) {
              if (type == adminPanel) {
                return const Divider(
                  thickness: 1,
                  height: 40,
                );
              }
              return const SizedBox(height: 20);
            },
          );