Saving data to Local Storage in Flutter
How to use local storage to save data for offline fetching?
Are you a newbie to flutter app development? and you have done exploring UI part of your app and now wishing to access local storage of your mobile phone to store data?
Then, this tutorial has reached you at a perfect time!
Why do we need to store data at mobile local storage?
When we build online apps, we just integrate our app with Firebase or other online databases to manage our data. It loads up the data into our application while launching it only when we have an internet connection enabled. What if we need to build offline apps which should show up data even when there is no internet connection available.
The best way is to write the data into a local file and read it when we launch it.
Hereafter say no to No internet connection error message and just continue to view your offline data! 😉
How to read and write data at the local disk using Flutter?
Now, we are going to read and write data of our Flutter app to a local file. This loads the data from that file while launching the app.
Getting Started!
Open your preferred IDE for writing Dart code. I’m using Visual Studio Code.
Add path_provider package:
Firstly, we need to import the path_provider package, which allows us to access commonly used locations on the device’s filesystem.
Update your pubspec.yaml file:
This plugin supports access to two filesystem locations: 1. Temporary directory, 2. Documents directory.
— The temporary directory is the cache and its content may be erased by the system at any time. So, storing data here is not good for us to get it later.
— The documents directory is the one we to choose now, this is a directory for the app to store files that only it can access.
Find the local path:
This plugin’s getApplicationDocumentsDirectory() method is used to get that folder path where the app places its files and that can be deleted only by that app. In the case of Android, its AppData folder where our app related files will be stored. Let’s write a function for that getting it,
Check this link for the official doc of getApplicationDocumentsDirectory().
Create a reference to the file location:
After knowing where to place our file, let's create a reference to the file location using theFile class from the dart:io library. We are naming our file as data.txt.
Write data to that file:
Now we have successfully created a file data.txt to work with. Hereafter we need to create functions to read and write the data into that file.
First, let’s create writeContent() function.
Calling this function will simply write the string ‘Hello Folks’ into the file data.txt.
Read data from the file:
We are going to create a function for reading the content of the file and name it as readContent().
Calling this function will read the contents of the file data.txt and return this String value. In case of any error in reading the file, it will send ‘Error’.
As of now, we are done with the logic of reading and writing data from and to the file at local storage.
All together!
For our final demo,
— we call writeContent(), which we have already written inside the initState() method of the Stateful widget. initState() is a function that will be called only once after launching the app. This will write the String ‘Hello Folks’ into the file data.txt at local storage.
— Then we read this String from the file and set the returned content to a String variable data, which we will show in our App UI.
— Create a widget and display the value of the variable data.
Complete code
Just copy and paste it in your editor and run to see how it works.
This is just to throw some light for understanding how to access local storage and read/write while working with a Flutter app, you can take this to an extent where you need to show the offline data in your app. Customize the code according to your need. ✌
If you find this tutorial useful, don’t forget to click/tap on the 👏 button as long as you can. :-) Follow to get more interesting tutorials on Flutter.
Would you like to appreciate my work? Buy Me A Cup Of Coffee! 😊
See other tutorials,
Happy Learning! ✔
