Flutter中Algolia搜索数据已获取但无法显示的问题求助

我正在开发一款Flutter移动端应用，通过Algolia搜索Firestore集合中的数据。已完成Algolia初始化，调用搜索方法时控制台能打印正确返回数据，但应用始终显示“数据加载中...”，无法展示搜索结果列表。

Algolia初始化类 #

import 'package:algolia/algolia.dart';

class AlgoliaInit {
  static const Algolia algolia = Algolia.init(
    applicationId: "ID",
    apiKey: "APIKEY"
  );
}

Algolia搜索方法 #

// *-*-*-*-*-*-*-* Algolia *-*-*-*-*-*-*-* //
final Algolia algoliaApp = AlgoliaInitialisation.algolia;

// *-*-*-*-*-*-*-* 搜索方法 *-*-*-*-*-*-*-* //
Future<List<AlgoliaObjectSnapshot>> researchAlgoliaMethod(String searchValue) async {
  AlgoliaQuery query = algoliaApp.instance.index("collection").query(searchValue);
  AlgoliaQuerySnapshot querySnapshot = await query.getObjects();
  List<AlgoliaObjectSnapshot> resultats = querySnapshot.hits;
  print(resultats);
  return resultats;
}

数据展示代码（StreamBuilder部分） #

使用StreamBuilder包裹列表，但始终触发!snapshot.hasData分支：

StreamBuilder<List<AlgoliaObjectSnapshot>>(
  stream: Stream.fromFuture(researchAlgoliaMethod(searchValue)),
  builder: (context, snapshot) {
    switch (_source.keys.toList()[0]) {
      case ConnectivityResult.wifi: case ConnectivityResult.mobile:
        if(!snapshot.hasData) {
          return FadeIn(
            child: Center(
              child: Text(
                "The data is being loaded...",
                textAlign: TextAlign.center,
                style: TextStyle(
                  color: colorTweenAnimation.value,
                  fontSize: MediaQuery.of(context).size.height * 0.0237
                ),
              ),
            ),
          );
        } else {
          if(snapshot.data!.isEmpty) {
            return FadeIn(
              child: Center(
                child: Text(
                  "No furniture with the keyword $searchValue was found.",
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    color: Theme.of(context).shadowColor,
                    fontSize: MediaQuery.of(context).size.height * 0.0237
                  ),
                ),
              ),
            );
          } else {
            List<AlgoliaObjectSnapshot> currentResearch = snapshot.requireData;
            return ListView.builder(
              itemCount: currentResearch.length,
              itemBuilder: (context, index) {
                return Column(
                  children: [
                    SizedBox(
                      height: MediaQuery.of(context).size.height * 0.0237,
                    ),
                    FadeIn(
                      child: GestureDetector(
                        onTap: () {
                          Get.toNamed("Route1", arguments: GetDataDocuments(docID: currentResearch[index].objectID.toString()));
                        },
                        child: Container(
                          height: MediaQuery.of(context).size.height * 0.102,
                          width: double.maxFinite,
                          padding: EdgeInsets.symmetric(
                            horizontal: MediaQuery.of(context).size.width * 0.096
                          ),
                          decoration: BoxDecoration(
                            color: Theme.of(context).shadowColor,
                            borderRadius: BorderRadius.circular(MediaQuery.of(context).devicePixelRatio / 0.16),
                            boxShadow: [
                              BoxShadow(
                                offset: Offset(
                                  0,
                                  MediaQuery.of(context).size.height * 0.006
                                ),
                                color: Colors.black.withOpacity(0.15),
                                blurRadius: 4,
                                blurStyle: BlurStyle.normal
                              ),
                            ]
                          ),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Text(
                                currentResearch[index].data['field'],
                                style: TextStyle(
                                  fontSize: MediaQuery.of(context).size.height * 0.0237,
                                  color: Theme.of(context).primaryColor
                                ),
                              ),
                              Icon(
                                FontAwesomeIcons.chevronRight,
                                color: Theme.of(context).primaryColor,
                                size: MediaQuery.of(context).size.height * 0.026
                              )
                            ],
                          ),
                        ),
                      ),
                    )
                  ],
                );
              },
            );
          }
        }
      case ConnectivityResult.none:
      return FadeIn(
        child: Center(
          child: Icon(
            Icons.mobiledata_off_rounded,
            color: colorTweenAnimation.value,
            size: MediaQuery.of(context).size.height * 0.09,
          ),
        )
      );
    }
    return Container();
  }
)

控制台返回数据示例 #

flutter: [{path: collectionName/QNXq--1gKJr---GyEJVL, field_name: Test, objectID: QNXq--1gKJr---GyEJVL, _highlightResult: {path: {value: collectionName/QNXq--1gKJr---GyEJVL, matchLevel: none, matchedWords: []}, field_name: {value: <em>Test</em>, matchLevel: full, fullyHighlighted: true, matchedWords: [test]}}}]

问题排查与修复 #

核心问题1：StreamBuilder不匹配单次请求场景 #

你的搜索操作是单次Future请求，而非持续数据流。用Stream.fromFuture包装后，Stream在Future执行完毕就会结束，而StreamBuilder的状态判断仅检查snapshot.hasData，没有处理connectionState的完成状态，导致无法正确识别已返回的数据。

修复方案：改用FutureBuilder

FutureBuilder<List<AlgoliaObjectSnapshot>>(
  future: researchAlgoliaMethod(searchValue),
  builder: (context, snapshot) {
    switch (_source.keys.toList()[0]) {
      case ConnectivityResult.wifi: case ConnectivityResult.mobile:
        // 处理加载状态
        if (snapshot.connectionState == ConnectionState.waiting) {
          return FadeIn(
            child: Center(
              child: Text(
                "The data is being loaded...",
                textAlign: TextAlign.center,
                style: TextStyle(
                  color: colorTweenAnimation.value,
                  fontSize: MediaQuery.of(context).size.height * 0.0237
                ),
              ),
            ),
          );
        }
        // 处理错误
        else if (snapshot.hasError) {
          return Center(child: Text("搜索出错，请重试"));
        }
        // 处理空数据
        else if (!snapshot.hasData || snapshot.data!.isEmpty) {
          return FadeIn(
            child: Center(
              child: Text(
                "No furniture with the keyword $searchValue was found.",
                textAlign: TextAlign.center,
                style: TextStyle(
                  color: Theme.of(context).shadowColor,
                  fontSize: MediaQuery.of(context).size.height * 0.0237
                ),
              ),
            ),
          );
        }
        // 展示搜索结果
        else {
          List<AlgoliaObjectSnapshot> currentResearch = snapshot.requireData;
          return ListView.builder(
            itemCount: currentResearch.length,
            itemBuilder: (context, index) {
              // 保持原列表项渲染逻辑不变
              return Column(
                children: [
                  SizedBox(
                    height: MediaQuery.of(context).size.height * 0.0237,
                  ),
                  FadeIn(
                    child: GestureDetector(
                      onTap: () {
                        Get.toNamed("Route1", arguments: GetDataDocuments(docID: currentResearch[index].objectID.toString()));
                      },
                      child: Container(
                        height: MediaQuery.of(context).size.height * 0.102,
                        width: double.maxFinite,
                        padding: EdgeInsets.symmetric(
                          horizontal: MediaQuery.of(context).size.width * 0.096
                        ),
                        decoration: BoxDecoration(
                          color: Theme.of(context).shadowColor,
                          borderRadius: BorderRadius.circular(MediaQuery.of(context).devicePixelRatio / 0.16),
                          boxShadow: [
                            BoxShadow(
                              offset: Offset(
                                0,
                                MediaQuery.of(context).size.height * 0.006
                              ),
                              color: Colors.black.withOpacity(0.15),
                              blurRadius: 4,
                              blurStyle: BlurStyle.normal
                            ),
                          ]
                        ),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Text(
                              currentResearch[index].data['field'],
                              style: TextStyle(
                                fontSize: MediaQuery.of(context).size.height * 0.0237,
                                color: Theme.of(context).primaryColor
                              ),
                            ),
                            Icon(
                              FontAwesomeIcons.chevronRight,
                              color: Theme.of(context).primaryColor,
                              size: MediaQuery.of(context).size.height * 0.026
                            )
                          ],
                        ),
                      ),
                    ),
                  )
                ],
              );
            },
          );
        }
      case ConnectivityResult.none:
        return FadeIn(
          child: Center(
            child: Icon(
              Icons.mobiledata_off_rounded,
              color: colorTweenAnimation.value,
              size: MediaQuery.of(context).size.height * 0.09,
            ),
          )
        );
    }
    return Container();
  }
)

核心问题2：网络状态判断逻辑干扰 #

在builder函数中直接通过_source.keys.toList()[0]切换分支，若_source状态动态变化，可能导致UI渲染逻辑混乱，干扰数据状态的判断。

修复建议：
将网络状态判断移到FutureBuilder外层，比如在组件初始化时获取网络状态并保存，避免在builder中动态切换分支。

额外优化点 #

• 避免在builder中直接调用researchAlgoliaMethod，建议在searchValue变化时通过setState或GetX触发请求，防止不必要的重复调用。
• 给Algolia请求添加超时和异常捕获，提升应用稳定性。

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