How can I load my firestore database data quickly into my flutter application?

I am working on a recipe application on flutter. I have firestore database where my recipes data is stored.

Take a look at the database: .

This is how I am getting data from the database:

  @override
  void initState() {
    super.initState();
    getRecipeData();
  }

  Future<void> getRecipeData() async {
    WidgetsBinding.instance.addPostFrameCallback((_) async {
      showDialog(
        context: context,
        barrierDismissible: false,
        builder: (BuildContext context) {
          dialogContext = context;
          return ProgressBar(
            message: "Loading..",
          );
        },
      );
    });
    int count = await RecipeModel().getRecipeCount();
    int recipeID = 101;
    for (int i = 0; i < count; i++, recipeID++) {
      if (await RecipeModel().checkIfRecipeDocExists(recipeID.toString()) ==
          true) {
        recipeIDs.add(recipeID.toString());
        recipeDescription.add((await RecipeModel()
            .getRecipeData(recipeID.toString(), 'recipe_description'))!);
        recipeName.add((await RecipeModel()
            .getRecipeData(recipeID.toString(), 'recipe_name'))!);
        recipeURL.add((await RecipeModel()
            .getRecipeData(recipeID.toString(), 'recipeImageURL'))!);
        recipeRating.add((await RecipeModel()
            .getRecipeData(recipeID.toString(), 'recipe_rating'))!);
        recipeTime.add((await RecipeModel()
            .getRecipeData(recipeID.toString(), 'recipe_time'))!);
        recipeIngredients.add((await RecipeModel()
            .getRecipeData(recipeID.toString(), 'recipe_ingredients'))!);
      }
    }
    for (int i = 0; i < recipeIDs.length; i++) {
      recipes.add(
        Recipes(
            recipeID: recipeIDs[i],
            recipeName: recipeName[i],
            recipeDescription: recipeDescription[i],
            recipeIngredients: [recipeIngredients[i]],
            recipeRating: recipeRating[i],
            recipeTime: recipeTime[i],
            recipeURL: recipeURL[i]),
      );
    }

    Navigator.pop(dialogContext!);
  }

This is my recipeModel class:

class RecipeModel {

  Future<String?> getRecipeData(String recipeID, String key) async {
    try {
      CollectionReference recipes =
          FirebaseFirestore.instance.collection('recipes');
      final snapshot = await recipes.doc(recipeID).get();
      final data = snapshot.data() as Map<String, dynamic>;
      return data[key].toString();
    } catch (e) {
      return 'Error fetching user';
    }
  }

  Future<int> getRecipeCount() async {
    int count = await FirebaseFirestore.instance
        .collection('recipes')
        .get()
        .then((value) => value.size);
    return count;
  }

  Future<bool> checkIfRecipeDocExists(String recipeID) async {
    try {
      var collectionReference =
          FirebaseFirestore.instance.collection('recipes');
      var doc = await collectionReference.doc(recipeID).get();
      return doc.exists;
    } catch (e) {
      rethrow;
    }
  }
}

I don't know Why it take around 10-15seconds to just load the data in the application? Is there anyother way I can use to load the data? Right now I have just a test data later this data will be increased to 500+ recipes so that please suggest me according to that. Thankyou.

I am thinking to shift my database from firestore to mongoDB since I have no knowledge about it so I prefer to take help from the community.

as mentioned by Loc, fetching each recipe in its own query is probably the cause of the slow performance.

I'd get all the recipes by just fetching the entire collection once and then handle the data transfer from there on.

So something like this:

QuerySnapshot<Map<String, dynamic>> recipesSnapshot = firestore.collection('recipes').get();

for(QueryDocumentSnapshot doc in recipesSnapshot.docs){

// now do stuff with the data like recipes.add(Recipe.fromMap(doc.data! as Map);

}

This should reduce the runtime.

To answer your commented question you can do something like this:

    for(QueryDocumentSnapshot doc in recipesSnapshot.docs){
recipes.add(Recipes(
            recipeID: doc.id,
            recipeName: doc.get('recipe_name'),
            recipeDescription: doc.get('recipe_description'),
...
      );
    }

So just doc.get(FIREBASE_FIELD)

Alternatively you could use doc.data() as Map to get the whole doc as a Map and then access its content like any other map.

If you want to be fancy and have to load recipes in different parts of your app you could also add a function like this to your recipe class (I did not check if this works, but it should):

Recipe.fromQueryDocumentSnapshot(QueryDocumentSnapshot snap)
      : recipeID = snap.id,
        recipeName = snap.get('recipe_name'),
        ...
;

Then you could do it like this:

for(QueryDocumentSnapshot doc in recipesSnapshot.docs){
    recipes.add(Recipe.fromQueryDocumentSnapshot(doc));
        }