How can I cache Firebase real-time database data in Flutter to avoid showing loading screen on every page?

I am new to Flutter and I'm using FutureBuilder when I fetch data in firebase real-time database.
Evey time I navigate/visit a page that use FutureBuilder, it shows a loading screen while it's fetching the data.

Now my problem is I don't want to ruin my user's experience to show a loading screen everytime they navigate to a page that contain FutureBuilder.

I'm trying to think on how and where should I put my cache and store a boolean variable named "isFetched".
But I still don't know on how to do it. Should I use a State Management or is there any solution that could fix this problem? Thank you in advance!

To best solve the problem you describe,
I would suggest refactoring your code to use the IndexedStack for your page navigation.

The way this works is that all of the page widgets are built once and kept in memory (in the widget tree), but only one is on top and visible at a time.
When you navigate to another page it is not rebuilding the page widget, but simply swapping that widget to be the front page - so there is no reload, and no delay.

References that will help you to do this :

• https://api.flutter.dev/flutter/widgets/IndexedStack-class.html
• https://medium.com/@amirahmadipouya/indexedstack-with-bottomnavigationbar-4054f1b00a06

Firebase Cloud Firestore makes all of this for you. If You can't use this, other solution is much more complicated as syncing information can be very tricky.

Imagine the user has 2 devices, both saving the same data, which version should the server keep, the newest created data, or the data the server received first?

SQLite is good for structured data, but you could save your data as a JSON string using System Preferences and just push that JSON to the server, it's a lot simpler if can do it this way.

Again, this really not a simple answer to give and varies from project to project.