我可以解决由于来自 firestore 的数据迟到而导致的错误

Question

我正在使用圆形图表，其中 int 值来自 firestorm。在圆形图表中，int 值被隐藏为double，但由于来自火存储的数据延迟到来，它显示错误（在null 上调用了方法toDouble。接收者：null 尝试调用：toDouble() ) 一秒钟我正在使用下面的代码。

用于检索

@override
  void initState() {
    // TODO: implement initState
    super.initState();
    subscription = Firestore.instance.document("users/${widget.userid}").snapshots().listen((datasnapshot) {

      if (datasnapshot.data.containsKey(widget.alllist.title)) {
        setState(() {
          userscoren = datasnapshot.data[widget.alllist.title];
        });
      } else if (!datasnapshot.data.containsKey(widget.alllist.title)) {
        setState(() {
          userscoren = 0;
        });
      }


    });


}

在圆形图表中

 List<CircularStackEntry>_generateChartData(int stage){



    Color dialColor = Colors.green;
    labelcolor = dialColor;
    List<CircularStackEntry>data=[

      new CircularStackEntry([new CircularSegmentEntry(stage.toDouble(), dialColor,)])
    ];
    return data;
  }

在小部件中

@override
  Widget build(BuildContext context) {


    // TODO: implement build
        return  widget.intp==0?
        InkWell(
          child:  Card(
            child: Stack(
              children: <Widget>[
                Padding(padding: EdgeInsets.all(7.0),
                  child: new Container(
                    child: new AnimatedCircularChart(
                      key: _chartKey,
                      size: _chartSize,
                      initialChartData:_generateChartData(userscoren),
                      chartType: CircularChartType.Radial,
                      edgeStyle: SegmentEdgeStyle.round,
                      percentageValues: true,
                      holeRadius: 38.0,
                    ),
                    width: 80.0,
                    height: 80.0,
                    decoration: new BoxDecoration(
                      shape: BoxShape.circle,
                      border: Border.all(color: Colors.blue,width: 1.0,style: BorderStyle.solid,),
                      image: new DecorationImage(
                          fit: BoxFit.fill,
                          image: new NetworkImage(
                              widget.alllist.imageUrl)),
                    ),
                    margin: const EdgeInsets.symmetric(horizontal: 20.0),
//                      child: Text(name),
                  ),),


                Positioned(child:Center(
                    child: Text(widget.alllist.title,style: TextStyle(fontWeight: FontWeight.bold,color: Colors.blueGrey),)),
                  bottom: 1.0,left: 20.0,right: 20.0,top: 85.0,
                ),
//          Padding(padding: EdgeInsets.only(top: 80.0,left: 10.0),
//            child: Text(alllist.title,style: TextStyle(fontWeight: FontWeight.bold,color: Colors.blueGrey),),
//          ),
              ],
            ),
          ),
          onTap: (){
            if(widget.alllist.topictype =="Description&Question"){
              Navigator.of(context).push(new MaterialPageRoute(builder: (context)=>new DisAndQuesShow(alllist: widget.alllist,userid: widget.userid,)));

            }else{
              if(widget.alllist.topictype=="Description"){

                Navigator.of(context).push(new MaterialPageRoute(builder: (context)=>new Discribtion(alllist: widget.alllist,)));
              }

            }
          },
        )

Answer 1

首先避免在主线程上调用网络调用使用Futures。对于你的问题，试试这个。

var userscoren = 0;

Future<Null> checkUserData() async{
subscription = Firestore.instance.document("users/${widget.userid}").snapshots().listen((datasnapshot) {

  if (datasnapshot.data.containsKey(widget.alllist.title)) {
    setState(() {
      userscoren = datasnapshot.data[widget.alllist.title];
    });
  } else if (!datasnapshot.data.containsKey(widget.alllist.title)) {
    setState(() {
      userscoren = 0;
    });
  }
});
}

@override
void initState() {
// TODO: implement initState
super.initState();
checkUserData();
}

正如@F-1 所述，您也可以在FutureBuilder 中使用上述未来功能。

Answer 2

您应该尝试使用 FutureBuilder 类，以便在调用您的 toDouble 方法https://docs.flutter.io/flutter/widgets/FutureBuilder-class.html 时等待数据从而避免返回 null