Flutter-方法“ |”被调用为null热加载后，它可以正常工作

如何解决Flutter-方法“ |”被调用为null热加载后，它可以正常工作

我扑朔迷离。我不知道后台发生了什么，因为热重新加载后工作正常。在另一个发生的dart文件中，firebase不会在热重载后立即提供初始化数据。

class CityServices {
      getCites() {
        return Firestore.instance.collection('cities').getDocuments();
      }
    }

class _HomeScreenState extends State<HomeScreen> {
  bool citiesFlag = false;
  var cities;
  int citiesCount;
  String actualCity;

也许错误在这里。

  @override
  void initState() {
    super.initState();
    CityServices().getCites().then((QuerySnapshot) {
      if (QuerySnapshot.documents.isNotEmpty) {
        citiesFlag = true;
        cities = QuerySnapshot.documents;
        citiesCount = QuerySnapshot.documents.length;
      }
    });
  }


  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        backgroundColor: MyColors.vintageGreen,appBar: AppBar(
          backgroundColor: MyColors.background,title: Center(
            child: Text(
              'Válasszon települést...',style: GoogleFonts.barlowCondensed(
                  color: MyColors.appbarText,fontSize: 26.0,fontWeight: FontWeight.w500),),body: Center(
          child: Container(
            child: GridView.count(
              crossAxisCount: 2,children: List.generate(citiesCount,(index) {
                return Card(
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.all(Radius.circular(10)),child: InkWell(
                    onTap: () {
                      actualCity = cities[index]['city_name'];
                      Navigator.push(
                        context,MaterialPageRoute(
                            builder: (context) =>
                                CityView(cityName: actualCity)),);
                    },child: Column(
                      mainAxisSize: MainAxisSize.min,children: <Widget>[
                        ListTile(
                          title: Center(
                              child: Text(
                            cities[index]['city_name'],style: TextStyle(
                                fontWeight: FontWeight.w500,fontSize: 18.0),)),subtitle: Center(child: Text('22 bejegyzés')),Flexible(
                          child: ClipRRect(
                            borderRadius: BorderRadius.all(Radius.circular(5)),child: Padding(
                              padding: EdgeInsets.only(bottom: 15.0),child: Image(
                                image: Assetimage(
                                  cities[index]['img_path'],)
                      ],color: MyColors.background,);
              }),);
  }
}

也许这是错误的？应该在dart文件顶部吗？

class HomeScreen extends StatefulWidget {
  static const String id = 'home';
  @override
  _HomeScreenState createState() => new _HomeScreenState();
}

解决方法

让我解释一下该问题及其发生原因，然后提出一些解决方案。

在initState内，您正在调用CityServices().getCites().then...的{​​{1}}。
但是，当第一次构建窗口小部件时，您从Firestore期望的数据尚未准备好，因此对于async和null来说都可以获得cities。

短期解决方案：
确保没有空检查，等待数据时显示指示器。

citiesCount

此外，您还可以将body: Center( child: (cities == null) ? CircularProgressIndicator() : Container(... 重构为类似的内容

initState

长期解决方案：
使用void getCities() async { var snapshot CityServices().getCites(); setState(() { citiesFlag = true; cities = snapshot.documents; citiesCount = snapshot.documents.length; }); } @override void initState() { getCities(); super.initState(); } 模式并使数据加载与UI分离。
有关实现方法，请参见flutter_bloc。