Flutter使用PaginateFirestore出现RenderSliver类型不匹配错误如何解决

这个错误本质是Flutter滚动视图组件层级不匹配导致的：你使用的PaginateFirestore默认会生成Sliver类子组件，但它的父级容器（Column+RefreshIndicator的组合）预期接收非Sliver的滚动组件，加上你给PaginateFirestore设置了冲突的滚动属性，才触发了这个报错。

• 删掉外层多余的StreamBuilder，PaginateFirestore本身已经封装了Firestore的分页查询逻辑，你重复定义相同的vendors集合查询完全没有必要，还会增加多余的数据库请求。
• 给Column下的RefreshIndicator套上Expanded组件，让滚动组件拿到正确的可滚动高度，避免Column高度无限的约束问题。
• 删掉PaginateFirestore里的shrinkWrap: true和physics: NeverScrollableScrollPhysics两个属性，RefreshIndicator需要子组件本身支持滚动才能触发下拉刷新逻辑，这两个属性会禁止PaginateFirestore自身的滚动能力。
• 你可以把顶部的标题区域直接移到Column的子节点里，不需要放在PaginateFirestore的header属性里，避免不必要的Sliver嵌套问题。

Widget build(BuildContext context) {
  return Container(
    child: Padding(
      padding: EdgeInsets.all(8),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // 把原来的header移到外面，避免Sliver冲突
          Padding(
            padding: const EdgeInsets.only(left: 8, right: 8, top: 20),
            child: Text(
              'All Nearby Stores',
              style: TextStyle(fontWeight: FontWeight.w900, fontSize: 18),
            ),
          ),
          Padding(
            padding: const EdgeInsets.only(left: 8, right: 8, top: 8, bottom: 20),
            child: Text(
              'Find quality products near you',
              style: TextStyle(fontWeight: FontWeight.w900, fontSize: 12, color: Colors.grey),
            ),
          ),
          // 给RefreshIndicator套Expanded
          Expanded(
            child: RefreshIndicator(
              child: PaginateFirestore(
                bottomLoader: CircularProgressIndicator(
                  valueColor: AlwaysStoppedAnimation<Color>(
                      Theme.of(context).primaryColor),
                ),
                itemBuilderType: PaginateBuilderType.listView,
                itemBuilder: (index, context, document) => Padding(
                  padding: const EdgeInsets.all(4),
                  child: Container(
                    width: MediaQuery.of(context).size.width,
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        SizedBox(
                          width: 120,
                          height: 100,
                          child: Card(
                            child: ClipRRect(
                              borderRadius: BorderRadius.circular(4),
                              child: Image.network(
                                document['imageUrl'],
                                fit: BoxFit.fill,
                              ),
                            ),
                          ),
                        ),
                        SizedBox(
                          width: 10,
                        ),
                        Column(
                          mainAxisSize: MainAxisSize.min,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Container(
                              height: 35,
                              child: Text(
                                document['shopName'],
                                style: TextStyle(
                                  fontSize: 14,
                                  fontWeight: FontWeight.bold,
                                ),
                                maxLines: 2,
                                overflow: TextOverflow.ellipsis,
                              ),
                            ),
                            SizedBox(
                              height: 3,
                            ),
                            Container(
                                width:
                                    MediaQuery.of(context).size.width - 250,
                                child: Text(
                                  document['location'],
                                  overflow: TextOverflow.ellipsis,
                                  style: TextStyle(
                                      fontSize: 14,
                                      fontWeight: FontWeight.bold),
                                )),
                            SizedBox(
                              height: 3,
                            ),
                            Row(
                              children: [
                                Icon(
                                  Icons.star,
                                  size: 12,
                                  color: Colors.grey,
                                ),
                                SizedBox(
                                  width: 4,
                                ),
                                Text(
                                  '3.2',
                                  style: TextStyle(
                                    fontSize: 10,
                                  ),
                                )
                              ],
                            )
                          ],
                        )
                      ],
                    ),
                  ),
                ),
                query: FirebaseFirestore.instance
                    .collection('vendors')
                    .orderBy('shopName'),
                listeners: [
                  refreshChangeListener,
                ],
                footer: Padding(
                  padding: const EdgeInsets.only(top: 30),
                  child: Container(
                    child: Stack(
                      children: [
                        Center(
                          child: Text(
                            "that's al folks",
                            style: TextStyle(color: Colors.grey),
                          ),
                        ),
                        Image.asset(
                          "image/city.png",
                        ),
                        Positioned(
                            right: 10,
                            top: 80,
                            child: Container(
                              width: 100,
                              child: Column(
                                crossAxisAlignment:
                                    CrossAxisAlignment.start,
                                children: [
                                  Text(
                                    'Made By : ',
                                    style: TextStyle(color: Colors.black),
                                  ),
                                  Text(
                                    "IZZILLY TEAM",
                                    style: TextStyle(
                                        fontWeight: FontWeight.bold,
                                        letterSpacing: 2,
                                        color: Colors.grey),
                                  )
                                ],
                              ),
                            ))
                      ],
                    ),
                  ),
                ),
              ),
              onRefresh: ()async{
                refreshChangeListener.refreshed = true;
              },
            ),
          )
        ],
      ),
    ),
  );
}

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