Flutter - Read, Write and Override File Locally to Disk
Last Updated :
24 Apr, 2025
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.
Dart
import 'package:flutter/material.dart';
import 'package:readwritegfg/credpage.dart';
import 'package:readwritegfg/readwrite.dart';
class HomePage extends StatefulWidget {
const HomePage({super.key});
@override
State<HomePage> createState() => _HomePageState();
}
String username = "Username saved by user will be visible here";
String userPass = "Password saved by user will be visible here";
String readName = "";
String readPass = "";
Future<void> getCred() async {
ReadWrite read = ReadWrite();
readName = await read.readTextFile('username.txt');
readPass = await read.readTextFile('userPass.txt');
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
appBar: AppBar(
backgroundColor: Colors.lightBlue,
title: const Text(
"Saved Credentials",
style: TextStyle(fontSize: 40),
),
centerTitle: true,
),
body: Padding(
padding: const EdgeInsets.all(8),
child: Column(
children: [
Text(
"Username",
style: TextStyle(fontSize: 30, color: Colors.green.shade900),
),
Text(
username,
style: TextStyle(fontSize: 30, color: Colors.orange.shade900),
),
const SizedBox(
height: 50,
),
Text(
"Password",
style: TextStyle(fontSize: 30, color: Colors.green.shade900),
),
Text(
userPass,
style: TextStyle(fontSize: 30, color: Colors.orange.shade900),
),
const SizedBox(
height: 50,
),
ElevatedButton(
onPressed: () async {
await getCred();
setState(() {
if (readName.isNotEmpty && readPass.isNotEmpty) {
username = readName;
userPass = readPass;
}
});
},
style: ElevatedButton.styleFrom(backgroundColor: Colors.blue),
child: const Text(
"Click here to See Credentials",
style: TextStyle(color: Colors.white, fontSize: 20),
),
),
SizedBox(
height: 50,
),
ElevatedButton(
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(builder: (context) => const CredPage()));
},
style: ElevatedButton.styleFrom(backgroundColor: Colors.blue),
child: const Text(
"Click here to Change Credentials",
style: TextStyle(color: Colors.white, fontSize: 20),
),
)
],
),
),
));
}
}
Let's Build UI to Save User Input To Local Disk
Creating CredPage class by extending stateless widget to build below UI.
Dart
import 'package:flutter/material.dart';
import 'package:readwritegfg/readwrite.dart';
class CredPage extends StatelessWidget {
const CredPage({super.key});
@override
Widget build(BuildContext context) {
TextEditingController getUserName = TextEditingController();
TextEditingController getUserPassword = TextEditingController();
return SafeArea(
child: Scaffold(
appBar: AppBar(
backgroundColor: Colors.lightBlue,
title: const Text(
"Credentials",
style: TextStyle(fontSize: 40),
),
centerTitle: true,
),
body: Padding(
padding: const EdgeInsets.all(8),
child: Column(
children: [
Text(
"Username",
style: TextStyle(fontSize: 30, color: Colors.green.shade900),
),
TextField(
controller: getUserName,
decoration: const InputDecoration(hintText: "Username"),
style: TextStyle(fontSize: 30, color: Colors.orange.shade900),
),
const SizedBox(
height: 50,
),
Text(
"Password",
style: TextStyle(fontSize: 30, color: Colors.green.shade900),
),
TextField(
controller: getUserPassword,
decoration: const InputDecoration(hintText: "Password"),
style: TextStyle(fontSize: 30, color: Colors.orange.shade900),
),
const SizedBox(
height: 50,
),
ElevatedButton(
onPressed: ()async {
final store = ReadWrite();
await store.writeTextFile('username.txt', getUserName.text);
await store.writeTextFile('userPass.txt', getUserPassword.text);
},
style: ElevatedButton.styleFrom(backgroundColor: Colors.blue),
child: const Text(
"Click here to Save Credentials",
style: TextStyle(color: Colors.white, fontSize: 20),
),
)
],
),
),
));
}
}
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)
Dart
import 'dart:io';
import 'package:path_provider/path_provider.dart';
class ReadWrite {
Future<String> get _directoryPath async {
Directory? directory = await getApplicationDocumentsDirectory();
return directory.path;
}
Future<File> getFile(String fileNameWithExtension) async {
final path = await _directoryPath;
return File("$path/$fileNameWithExtension");
}
writeTextFile(String fileNameWithExtension, String content) async {
File file = await getFile(fileNameWithExtension);
file.writeAsString(content);
}
readTextFile(String fileNameWithExtension) async {
final file = await getFile(fileNameWithExtension);
final fileContent = await file.readAsString();
return fileContent;
}
}
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)
Dart
import 'package:flutter/material.dart';
import 'package:readwritegfg/readwrite.dart';
class CredPage extends StatelessWidget {
const CredPage({super.key});
@override
Widget build(BuildContext context) {
TextEditingController getUserName = TextEditingController();
TextEditingController getUserPassword = TextEditingController();
return SafeArea(
child: Scaffold(
appBar: AppBar(
backgroundColor: Colors.lightBlue,
title: const Text(
"Credentials",
style: TextStyle(fontSize: 40),
),
centerTitle: true,
),
body: Padding(
padding: const EdgeInsets.all(8),
child: Column(
children: [
Text(
"Username",
style: TextStyle(fontSize: 30, color: Colors.green.shade900),
),
TextField(
controller: getUserName,
decoration: const InputDecoration(hintText: "Username"),
style: TextStyle(fontSize: 30, color: Colors.orange.shade900),
),
const SizedBox(
height: 50,
),
Text(
"Password",
style: TextStyle(fontSize: 30, color: Colors.green.shade900),
),
TextField(
controller: getUserPassword,
decoration: const InputDecoration(hintText: "Password"),
style: TextStyle(fontSize: 30, color: Colors.orange.shade900),
),
const SizedBox(
height: 50,
),
ElevatedButton(
onPressed: ()async {
/* store is the object of ReadWrite class
through which we can access functions inside ReadWrite
hence, store.writeTextFile('username.txt',getUsername.text)
Text from TextEditingController will get stored in file with name username.txt (or whatever you provide here) */
final store = ReadWrite();
await store.writeTextFile('username.txt', getUserName.text);
await store.writeTextFile('userPass.txt', getUserPassword.text);
},
style: ElevatedButton.styleFrom(backgroundColor: Colors.blue),
child: const Text(
"Click here to Save Credentials",
style: TextStyle(color: Colors.white, fontSize: 20),
),
)
],
),
),
));
}
}
ElevatedButton(
onPressed: ()async {
/* store is the object of ReadWrite class
through which we can access functions inside ReadWrite
hence, store.writeTextFile('username.txt',getUsername.text)
Text from TextEditingController will get stored in file with name username.txt (or whatever you provide here) */
final store = ReadWrite();
await store.writeTextFile('username.txt', getUserName.text);
await store.writeTextFile('userPass.txt', getUserPassword.text);
},
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');
}
Dart
import 'package:flutter/material.dart';
import 'package:readwritegfg/credpage.dart';
import 'package:readwritegfg/readwrite.dart';
class HomePage extends StatefulWidget {
const HomePage({super.key});
@override
State<HomePage> createState() => _HomePageState();
}
String username = "Username saved by user will be visible here";
String userPass = "Password saved by user will be visible here";
String readName = "";
String readPass = "";
Future<void> getCred() async {
ReadWrite read = ReadWrite();
readName = await read.readTextFile('username.txt');
readPass = await read.readTextFile('userPass.txt');
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
appBar: AppBar(
backgroundColor: Colors.lightBlue,
title: const Text(
"Saved Credentials",
style: TextStyle(fontSize: 40),
),
centerTitle: true,
),
body: Padding(
padding: const EdgeInsets.all(8),
child: Column(
children: [
Text(
"Username",
style: TextStyle(fontSize: 30, color: Colors.green.shade900),
),
Text(
username,
style: TextStyle(fontSize: 30, color: Colors.orange.shade900),
),
const SizedBox(
height: 50,
),
Text(
"Password",
style: TextStyle(fontSize: 30, color: Colors.green.shade900),
),
Text(
userPass,
style: TextStyle(fontSize: 30, color: Colors.orange.shade900),
),
const SizedBox(
height: 50,
),
ElevatedButton(
onPressed: () async {
await getCred();
setState(() {
if (readName.isNotEmpty && readPass.isNotEmpty) {
username = readName;
userPass = readPass;
}
});
},
style: ElevatedButton.styleFrom(backgroundColor: Colors.blue),
child: const Text(
"Click here to See Credentials",
style: TextStyle(color: Colors.white, fontSize: 20),
),
),
SizedBox(
height: 50,
),
ElevatedButton(
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(builder: (context) => const CredPage()));
},
style: ElevatedButton.styleFrom(backgroundColor: Colors.blue),
child: const Text(
"Click here to Change Credentials",
style: TextStyle(color: Colors.white, fontSize: 20),
),
)
],
),
),
));
}
}
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:
Similar Reads
Flutter - Read and Write Data on Firebase
Firebase helps developers to manage their mobile apps easily. It is a service provided by Google. Firebase has various functionalities available to help developers manage and grow their mobile apps. In this article, we will learn how to write and read data into/from Firebase. Follow the 3-step proce
4 min read
Flutter - Pick and Open Files From Storage
Sometimes in an app, we need to pick and open a file from the phone's storage, in this article, we will achieve the same using file_picker and open_file flutter packages. 1. Create an App: Create a new flutter app by running the below command on your terminal: flutter create your_app_name Now open y
5 min read
How to Create a NFC Reader and Writer Flutter Application
NFC that stands for Near Field Communication, is a very short range wireless technology that allows us share small amount of data between devices. Through this technology we can share data between an NFC tag and an android device or between two android devices. A maximum of 4 cm distance is required
6 min read
Flutter - Select Single and Multiple Files From Device
We will explore how to select single, or multiple files from our device with different conditions. Sometimes it happens that we want to select only a single type of file or with a fixed extension. If you are looking for the same just read the article till the end. Step By Step Implementation 1. Crea
6 min read
How to Select Video from Camera and Gallery in Flutter?
We can add video from the gallery as well as from the camera using the image_picker package in Flutter. For this, you’ll need to use your real device or web version. Follow the below steps to display the images from the gallery: Step By Step Implementation Step 1: Create a New Project in Android Stu
4 min read
Flutter - Display Text Over the Image
In this article, we will implement How the set the text on over the Image in Flutter. A sample image is given below to get an idea about what we are going to do in this article. Â Approach In Data structure everyone knows the stack linear data structure, Stack is nothing just placing an item one over
3 min read
Remote Config in Flutter and Firebase
In Current app development, it is essential to offer smooth updates without asking users to download a new version from the Play Store to improve user experience. Remote Config in Flutter with the power of Firebase allows developers to update app content and features dynamically without releasing a
8 min read
How to Build a Simple Login App with Flutter?
To prevent unauthorized access to personal information, it is a good practice to authenticate users before granting access to websites, mobile applications, and computer applications after they can register and then log in. In this article, we are going to explain how to build a Design Login page us
8 min read
Flutter - Load Images with image.file
In this article, we will learn how to show file images in Flutter. There is an image widget available in Flutter. In that, you may have to use Image.network, Image.asset, Image.memory. But have you used Image.file? Maybe you have used it. If not then Let's learn about this. Sometimes we have to show
4 min read
How to Add Firebase into Flutter in a New Way?
Recently Firebase give another option for adding Firebase to Flutter and It is only made for Flutter, As of now we add firebase using the android option for flutter but now we can add using the flutter option that is recently updated by Flutter. Here you can find how to add firebase as an Android in
2 min read