flutter - 每次都需要热加载flutter应用程序以便从Firebase实时数据库中获取数据

Question

这是我的代码:

class CategoryHomeScreen extends StatefulWidget {
  @override
  _CategoryHomeScreenState createState() => _CategoryHomeScreenState();
}

class _CategoryHomeScreenState extends State<CategoryHomeScreen> {

  List<CategoriesOnly> categoriesOnlyList =[];
  List<CategoryItems> categoryItemList = [];



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

  }
  Future<void> getCategoriesName() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    var userPin = prefs.getString('pin');

    var CategoryName =  FirebaseDatabase.instance.reference().child('CategoryNames').child(userPin).once()
        .then((DataSnapshot dataSnapshot){
      var key  = dataSnapshot.value.keys;
      for(var i in key)
      {
       // print(dataSnapshot.value[i]['Name']);
        CategoriesOnly categoriesOnly = new CategoriesOnly(
            dataSnapshot.value[i]['Name']
        );
        categoriesOnlyList.add(categoriesOnly);
      }

    });

    var categoryItemDetails =  FirebaseDatabase.instance.reference().child('Categories').child(userPin).once()
        .then((DataSnapshot dataSnapshot){
      var key  = dataSnapshot.value.keys;
      for(var i in key)
      {
        CategoryItems categoryItems = new CategoryItems(
            dataSnapshot.value[i]['CategoryName'],
            dataSnapshot.value[i]['MarketPrice'],
            dataSnapshot.value[i]['Name'],
            dataSnapshot.value[i]['OurPrice'],
            dataSnapshot.value[i]['TotalDiscount'],
            dataSnapshot.value[i]['Weight']

        );
        categoryItemList.add(categoryItems);
      }

    });
  }

  @override
  Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      statusBarColor: Colors.black, //or set color with: Color(0xFF0000FF)
    ));
    return Scaffold(
      backgroundColor: Colors.black,
      body: SafeArea(

        child:
        ListView.builder(
          itemCount: categoriesOnlyList.length,
          itemBuilder: (context, index1) =>
              Column(children: [
                Text(categoriesOnlyList[index1].Name,style: TextStyle(color:Colors.white),),
                Container(
                  height: 200,
                  decoration: BoxDecoration(borderRadius: BorderRadius.circular(8)),
                  child:
                  ListView.builder(itemCount: categoryItemList.length,
                      scrollDirection: Axis.horizontal,
                      itemBuilder: (context, index) {
                       return categoriesOnlyList[index1].Name == categoryItemList[index].CategoryName?
                         Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Container(
                            height: 200,
                            width: 200,
                            decoration: BoxDecoration(borderRadius: BorderRadius.circular(8)),
                            child: Card(
                              color: Colors.white,
                                child: Text(categoryItemList[index]
                                .Name,style: TextStyle(),overflow: TextOverflow.ellipsis,)),
                          ),
                        ):Container(
                       );
                      }),
                ),

              ]),
        )
      ),
    );
  }
}

这是我从Firebase实时数据库加载数据的应用程序。当我安装该应用程序时，它不会显示任何数据，但是当我重新加载(热重载)该应用程序时，它会显示所有数据，而当我退出该应用程序并再次启动它时，我将无法再次看到该数据。但是我希望我的页面显示一些加载小部件，直到它加载数据然后返回页面。或者使用数据简化页面。

Answer 1

可能是因为categoryItemList.length为0。
您可以使用调试器进行检查，或者在长度为0时显示一些内容。

class CategoryHomeScreen extends StatefulWidget {
  @override
  _CategoryHomeScreenState createState() => _CategoryHomeScreenState();
}

class _CategoryHomeScreenState extends State<CategoryHomeScreen> {
  List<CategoriesOnly> categoriesOnlyList = [];
  List<CategoryItems> categoryItemList = [];

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

  Future<void> getCategoriesName() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    var userPin = prefs.getString('pin');

    var CategoryName = FirebaseDatabase.instance
        .reference()
        .child('CategoryNames')
        .child(userPin)
        .once()
        .then((DataSnapshot dataSnapshot) {
      var key = dataSnapshot.value.keys;
      for (var i in key) {
        // print(dataSnapshot.value[i]['Name']);
        CategoriesOnly categoriesOnly =
            new CategoriesOnly(dataSnapshot.value[i]['Name']);
        categoriesOnlyList.add(categoriesOnly);
      }
    });

    var categoryItemDetails = FirebaseDatabase.instance
        .reference()
        .child('Categories')
        .child(userPin)
        .once()
        .then((DataSnapshot dataSnapshot) {
      var key = dataSnapshot.value.keys;
      for (var i in key) {
        CategoryItems categoryItems = new CategoryItems(
            dataSnapshot.value[i]['CategoryName'],
            dataSnapshot.value[i]['MarketPrice'],
            dataSnapshot.value[i]['Name'],
            dataSnapshot.value[i]['OurPrice'],
            dataSnapshot.value[i]['TotalDiscount'],
            dataSnapshot.value[i]['Weight']);
        categoryItemList.add(categoryItems);
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(
      SystemUiOverlayStyle(
      statusBarColor: Colors.black, //or set color with: Color(0xFF0000FF)
      ),
    );

    return Scaffold(
      backgroundColor: Colors.black,
      body: SafeArea(
        child: ListView.builder(
          itemCount: categoriesOnlyList.length, // place breakpoint here
          itemBuilder: (context, index1) {
            if (categoriesOnlyList == null || categoriesOnlyList.length == 0) {
              return CircularProgressIndicator(); // you should see loading animation if list is empty
            }

            return Column(
            children: [
              Text(
                categoriesOnlyList[index1].Name,
                style: TextStyle(color: Colors.white),
              ),
              Container(
                height: 200,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(8),
                ),
                child: ListView.builder(
                  itemCount: categoryItemList.length, // place breakpoint here
                  scrollDirection: Axis.horizontal,
                  itemBuilder: (context, index) {
                    if (categoryItemList == null || categoryItemList.length == 0) {
                      return CircularProgressIndicator(); // you should see loading animation if list is empty
                    }

                    return categoriesOnlyList[index1].Name ==
                            categoryItemList[index].CategoryName
                        ? Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: Container(
                              height: 200,
                              width: 200,
                              decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(8)),
                              child: Card(
                                  color: Colors.white,
                                  child: Text(
                                    categoryItemList[index].Name,
                                    style: TextStyle(),
                                    overflow: TextOverflow.ellipsis,
                                  ),
                                ),
                              ),
                            )
                        : Container();
                  },
                ),
              ),
            ],
          ),
          }
        ),
      ),
    );
  }
}

解决方案是使用FutureBuilder
警告:应用程序将多次运行build方法，这是将不希望被重复调用的任何内容(例如数据库调用或更改系统覆盖)放置在该方法之外的一种好习惯。

SystemChrome.setSystemUIOverlayStyle(
  SystemUiOverlayStyle(
    statusBarColor: Colors.black, // or set color with: Color(0xFF0000FF)
  ),
);