How to deal with Flutter Local Storage gives a File Exception an async operation is currently pending

Question

I have the function below where i call another async function "getAnimeById( )".

Whenever I hot restart my app, i get the file exception and the set that is loaded has duplicates.

Future<void> fetchRecommendations() async {
    //grab data from local disk
    LocalStorage storage = LocalStorage("recommended_data");

    await storage.ready;

    //clear the set to avoid showing anime that arent in the list anymore
    _recommendedSet.clear();

    Map tempMap;

    //try to fetch data, if not available create it
    try {
      tempMap = await storage.getItem("recommendedMap");
    } catch (error) {
      tempMap = {};
    }

    for (var element in tempMap.keys) {
      if (!animeData.containsKey(element)) {
        await getAnimeById(element);
      }
      final tempAnime = animeData[element]!;

      checkIndex += 1;

      _recommendedSet.add(tempAnime);
    }

    notifyListeners();
  }

Future<void> getAnimeById(String id) async {

....

LocalStorage storage = LocalStorage("episode_data");

      await storage.ready;

      Map<String, dynamic> episodeMap = {};

      // if the episode data does not exist we continue with an empty map
      try {
        episodeMap = storage.getItem("episodeMap");
      } catch (error) {
        episodeMap = {};
      }

.....




try {
        await storage
            .setItem("episodeMap", episodeMap)    //This is the line that throws the error
            .then((value) => storage.dispose());
      } catch (error) {
        print(error);
      }



}

The above code works fine after the home screen is pushed again on the navigator stack. It only happens when the app is started fresh.

I also found that the error happens only for certain indexes in the loop in the first function.

Answer 1

The error "a file exception an async operation is currently pending" occurs when an asynchronous operation is still in progress when another operation is called. In this case, it seems that the setItem operation in the getAnimeById function is still in progress when the fetchRecommendations function is called.

To fix this, you can try using await instead of chaining then in the setItem operation, like this:

await storage.setItem("episodeMap", episodeMap);
storage.dispose();

This ensures that the setItem operation is completed before disposing of the storage object.

Alternatively, you can also try using the await keyword when calling the getAnimeById function inside the loop in the fetchRecommendations function. This will ensure that each call to getAnimeById is completed before moving on to the next element in the loop.

for (var element in tempMap.keys) {
  if (!animeData.containsKey(element)) {
    await getAnimeById(element);
  }
  final tempAnime = animeData[element]!;
  checkIndex += 1;
  _recommendedSet.add(tempAnime);
}

By doing this, you can ensure that all asynchronous operations are completed before moving on to the next operation, and thus prevent the "async operation is currently pending" error.

To know more, join our Flutter Certification today.