从Firebase缓慢加载数据，导致出现"RangeError(index)". [英] Slow data loading from firebase causing "RangeError (index)"

问题描述

在这里，我尝试将图像链接从Firebase加载到flutter应用程序中，然后将其传递到image.network().数据加载需要花费一些时间来加载数据，因此出现以下错误: RangeError(索引):无效值:有效值范围为空:1 ，但是5秒钟后数据已成功加载并打印在控制台中，但不显示在屏幕上.这是打印数据的代码

Here i am trying to load image link from firebase into flutter app then passing it into image.network(). the data loading is taking time to load data so it is giving me following error: RangeError (index): Invalid value: Valid value range is empty: 1 but after 5 second the data is loaded successfully and printed in console but not displayed on screen. here is code to print data

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加载数据的功能是

and function to load data from firebase is

 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()?

is there any method that can help me to load all data and after that it should go to Widget build()?

推荐答案

数据是从Firebase异步加载的.在您的 return allEyes 运行时，数据库中的 .then()尚未运行.而且您无法返回尚未加载的立即.

Data is loaded from Firebase asynchronously. By the time your return allEyes runs, the .then() from the database hasn't run yet. And you can't return something now that hasn't been loaded yet.

这就是为什么您必须返回 Future< List< eyes>> 的原因，这是保证在将来的某个时刻提供眼睛列表.

That's why you'll have to return a Future<List<eyes>>, which is a promise to have a list of eyes at some point in the future.

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().

Then you can use that in your render method by either using a FutureBuilder or by directly calling setState().

这篇关于从Firebase缓慢加载数据，导致出现"RangeError(index)".的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！