从 Firebase 加载数据缓慢导致“RangeError（索引）”答案

【问题标题】：Slow data loading from firebase causing "RangeError (index)"从 Firebase 加载数据缓慢导致“RangeError（索引）”
【发布时间】：2020-09-30 20:39:21
【问题描述】：

在这里，我尝试将图像链接从 firebase 加载到 Flutter 应用程序中，然后将其传递到 image.network() 中。数据加载需要时间来加载数据，所以它给了我以下错误：RangeError (index): Invalid value: Valid value range is empty: 1 但 5 秒后数据成功加载并打印在控制台中但未显示在屏幕上。这是打印数据的代码

class _DataFetching extends State<MyHomePage> {

  List<eyes> allCriminals=eyes.allcriminals();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(

        title: Text("fetch"),
      ),
      body: Center(

        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[

            new Image.network(allCriminals[1].link
            ),

           ]// This trailing comma makes auto-formatting nicer for build methods.
    )));

  }
}

从firebase加载数据的功能是

 static  List<eyes> allcriminals() {
    var allEyes = new List<eyes>();
    Future<Query>  queryUsers() async{
      return await FirebaseDatabase.instance
          .reference()
          .child('Facial Parts/Eyes');
    }
    queryUsers().then((query) {
      query.once().then((snapshot) {
        var result =  snapshot.value.values as Iterable;
        for (var item in result) {
          print(result);
           allEyes.add(new eyes(criminal_id: item["criminal_id"],
              eye_size: item["eyesize"],
              link: item["link"]));

        print(item['link']);
        }

      });
    });
    return allEyes;
  }

有什么方法可以帮助我加载所有数据，然后它应该转到 Widget build()？

【问题讨论】：

您似乎没有正确地等待结果。由于 queryUsers 是一个未来，而您并不在等待它，它会返回一个空的 allEyes 数组。您是否尝试在 queryUsers() 之前使用 await 并查看它是否解决了您的问题？

标签： flutter dart firebase-realtime-database

【解决方案1】：

数据是从 Firebase 异步加载的。当您的return allEyes 运行时，数据库中的.then() 尚未运行。而且您不能返回尚未加载的现在。

这就是为什么您必须返回Future<List<eyes>> 的原因，这是一个承诺在未来某个时候拥有一个眼睛列表。

static Future<List<eyes>> allcriminals() {
  var query = FirebaseDatabase.instance.reference().child('Facial Parts/Eyes');

  return query.once().then((snapshot) {
    var allEyes = new List<eyes>();
    var result = snapshot.value.values as Iterable;
    for (var item in result) {
       allEyes.add(new eyes(criminal_id: item["criminal_id"],
          eye_size: item["eyesize"],
          link: item["link"]));
    }
    return allEyes;
  });
}

然后您可以在您的渲染方法中使用它，方法是使用FutureBuilder 或直接调用setState()。

【讨论】：