问题描述
我扑朔迷离。我不知道后台发生了什么,因为热重新加载后工作正常。在另一个发生的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,);
}),);
}
}
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。