Необходимо каждый раз загружать приложение Flutter Hot Reload, чтобы получать данные из базы данных 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

Предупреждение: приложение будет запускать метод сборки несколько раз, рекомендуется размещать все, что вы не хотите вызывать повторно (например, вызовы базы данных или изменение системных наложений) вне метода.

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