Flutter GridView无限分页添加CircularProgressIndicator触发RangeError问题

问题出在你访问product[index]的时机不对——你在判断index < product.length之前就直接读取了product[index]，当index等于product.length（也就是要显示加载指示器的那个索引），这个索引已经超出了product列表的有效范围（列表索引是0到product.length-1），所以触发了RangeError。

把读取product元素的代码移到判断条件内部即可解决，修改后的代码如下：

Widget buildCatalog(List<Product> product) => GridView.builder(
    gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
        maxCrossAxisExtent: 300,
        childAspectRatio: MediaQuery.of(context).size.width*1.22 /
            (MediaQuery.of(context).size.height),
        crossAxisSpacing: 10,
        mainAxisSpacing: 10),
    controller: sController,
    itemCount: product.length + 1,
    itemBuilder: (context, index) {
      if (index < product.length) {
        final productItem = product[index];
        final media = productItem.media?.map((e) => e.toJson()).toList();
        final photo = media?[0]['links']['local']['thumbnails']['350'];
        return GestureDetector(
          onTap: () {
          },
          child: Container(
            child: Column(
              children: <Widget>[
                InkWell(
                  child: Container(
                    margin: EdgeInsets.only(top: 5),
                    child: Image.network(photo ?? ''),
                  ),
                ),
                SizedBox(
                  height: 10,
                ),
                Text(
                  '${productItem.name}\n',
                  textAlign: TextAlign.center,
                  maxLines: 2,
                  overflow: TextOverflow.ellipsis,
                  style: TextStyle(fontSize: 14),
                ),
                SizedBox(height: 8),
                Text('${productItem.price} ₸',
                    textAlign: TextAlign.start,
                    style: TextStyle(fontSize: 20, color: Colors.red)),
                SizedBox(height: 5),
                buildButton(index, productItem.id),
              ],
            ),
          ),
        );
      }
      return const Center(child: CircularProgressIndicator(),);
    },
  );

核心修改点：

• 将final media和final photo的定义移到if (index < product.length)代码块内部，确保只有在处理商品项时才去访问product列表的元素
• 用productItem来读取media属性，避免重复访问product[index]

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