Flutter – Read, Write and Override File Locally to Disk

In many cases, we need to save files locally so that we can read and write them while the device is offline. For example, we might need to persist data across the app. To save files to disk on mobile or desktop apps, we need to add package path_provider to our project. There are Four Steps to Read and Write files to a local disk.

• Step 1: Find the local Path
• Step 2: Create an Address to the File’s Location
• Step 3: Write data to File.
• Step 4: Read data from the File.

A sample video is given below to get an idea about what we are going to do in this article. The video below shows that data entered by the user persists even after closing the app from the background.

Let’s Build UI to Show Saved Credentials

Creating HomePage class by extending stateful widget to build below UI.

Let’s Build UI to Save User Input To Local Disk

Creating CredPage class by extending stateless widget to build below UI.

Lets Code to Store Inputted Data by User

Create Class to write code to Store and Read Text from local disk:

As, discussed above in this article, to save files to disk on mobile or desktop apps, we need to add package path_provider to our project.

Step 1: Inside pubspec.yaml add path_provider: ^2.1.1

dependencies:
  flutter:
    sdk: flutter
  path_provider: ^2.1.1

Step 2: Run flutter pub get in terminal

flutter pub get

Step 3: Find Local Path to store your file

Using path_provider we can find path on local storage to Write and Read our application files. We can use getApplicationDocumentsDirectory() to get path of the local storage where our application can store files locally, it is not necessarily visible to user through device file manager. Else, getExternalStorageDirectory() can be used, It returns directory on External Local Storage (SD card on Android) which might be available or not in user’s device.

 Future<String> get _directoryPath async {
    Directory? directory = await getApplicationDocumentsDirectory();
    return directory.path;
  }

Step 4: Create Address to File’s Location

Here we will Create File , (for example: username.txt) so that we can write and read in that file in future.

  Future<File> getFile(String fileNameWithExtension) async {
    final path = await _directoryPath;
    return File("$path/$fileNameWithExtension");
  }

Step 5: Write Data to Text file

Now, we have file where we can write, override and read.

writeTextFile(String fileNameWithExtension, String content) async {
    File file = await getFile(fileNameWithExtension);
    file.writeAsString(content);
 }

Step 6: Read Data From Text File

Now, you have data on your disk, you can read it.

 readTextFile(String fileNameWithExtension) async {
    final file = await getFile(fileNameWithExtension);
    final fileContent = await file.readAsString();
    return fileContent;
  }

Step 7: Create class ReadWrite and code all the above functions in one class

(class can have any name as per your preference)

Let’s Merge UI and Backend Code

Step 1: Storing Data from CredPage

Create object of the ReadWrite class in CredPage class, and implement the function writeTextFile. store is the object of ReadWrite class through which we can access functions inside ReadWrite class. Text from TextEditingController will get stored in file with name username.txt (or whatever you provide here)

Step 2: To read the saved Credentials in HomePage, create object of ReadWrite class and implement readTextFile.

Future<void> getCred() async {
  /* read  is object of ReadWrite class through which we will access stored data in file*/
  ReadWrite read = ReadWrite();
  readName = await read.readTextFile('username.txt');
  readPass = await read.readTextFile('userPass.txt');
}

To Rewrite/Override just save the data again to that referenced file location, In the below output it is shown that saved data is overridden and data stored by user is persisted.

Output:

the_extremity

Follow

Improve