Flutter中List.generate出现RangeError索引越界问题求助

我在Flutter中使用List.generate基于storyList生成组件，该列表仅包含2个对象，但运行时抛出RangeError，提示索引5不在0..1的有效范围内。

相关代码 #

数据源代码

List storyList = [
      {
        "name": "Novac",
        "imageUrl": "https://randomuser.me/api/portraits/men/31.jpg",
        "isOnline": true,
        "hasStory": true,
      },
      {
        "name": "Derick",
        "imageUrl": "https://randomuser.me/api/portraits/men/81.jpg",
        "isOnline": false,
        "hasStory": false,
      },];

组件代码

Row(
                children: List.generate(storyList.length, (index) {
                  return Padding(
                      padding: EdgeInsets.symmetric(horizontal: 5),
                      child: Column(
                        children: [
                          SizedBox(
                              width: 80,
                              height: 80,
                              child: Stack(
                                children: [
                                  Container(
                                      decoration: BoxDecoration(
                                        shape: BoxShape.circle,
                                        gradient: LinearGradient(
                                          colors: [
                                            // Color(0xffcc306C),
                                            Color.fromARGB(255, 255, 0, 225),
                                            Color.fromARGB(255, 255, 48, 48),
                                            Color.fromARGB(255, 255, 217, 67)
                                          ],
                                          begin: Alignment.topRight,
                                          end: Alignment.bottomLeft,
                                          tileMode: TileMode.clamp,
                                        ),
                                        // border: Border.all(
                                        //     // color: Color(0xffcc306C),
                                        //     width: 5)
                                      ),
                                      child: Padding(
                                        padding: EdgeInsets.all(3.0),
                                        child: Container(
                                          width: 75,
                                          height: 75,
                                          decoration: BoxDecoration(
                                              border: Border.all(
                                                  color: Colors.black,
                                                  width: 4),
                                              shape: BoxShape.circle,
                                              image: DecorationImage(
                                                  image: NetworkImage(
                                                    storyList[index]
                                                        ['imageUrl'],
                                                  ),
                                                  fit: BoxFit.cover)),
                                        ),
                                      )),
                                ],
                              )),
                          SizedBox(
                            height: 5,
                          ),
                          SizedBox(
                              width: 75,
                              child: Align(
                                  child: Text(storyList[index]['name'],
                                      overflow: TextOverflow.ellipsis,
                                      style: GoogleFonts.roboto(
                                          color: Colors.white,
                                          fontSize: 12,
                                          fontWeight: FontWeight.w600))))
                        ],
                      ));
                }),
              )
            ],
          ))

报错信息 #

EXCEPTION CAUGHT BY WIDGETS : The following RangeError was thrown building HomePage(dirty):
RangeError (index): Invalid value: Not in inclusive range 0..1: 5

解决方法 #

• 排查硬编码索引：检查所有访问storyList的代码，确认没有直接写storyList[5]这类硬编码索引的操作，所有索引访问必须基于列表当前长度。
• 规范状态管理：如果storyList是状态变量，确保更新时调用setState，且更新逻辑安全。比如异步加载数据时，先校验数据有效性再赋值，避免出现临时的异常长度。
• 添加类型约束：将List storyList改为List<Map<String, dynamic>> storyList，编译时就能捕获类型错误，防止其他代码往列表中添加不符合结构的元素。
• 添加安全访问逻辑：在索引访问处增加范围判断，或者使用安全方法：

  // 方式1：添加范围判断
  if (index >= 0 && index < storyList.length) {
    // 原有渲染逻辑
  } else {
    return const SizedBox.shrink(); // 占位组件
  }
  
  // 方式2：使用elementAtOrNull（需要导入dart:collection）
  final item = storyList.elementAtOrNull(index);
  if (item != null) {
    // 使用item渲染
  } else {
    return const SizedBox.shrink();
  }
  

内容的提问来源于stack exchange，提问作者Adnan Qureshi