Looking to securely store sensitive data in your Flutter apps? This Flutter Secure Storage Beginner Guide will walk you through the process of implementing secure storage in Flutter using the flutter_secure_storage
package. It’s ideal for developers who want to protect data such as tokens, passwords, or user credentials on both Android and iOS platforms.
What Is Flutter Secure Storage?
The flutter_secure_storage
package provides a platform-specific secure key/value storage. On Android, it uses the EncryptedSharedPreferences or the KeyStore, while on iOS it uses the Keychain. This makes it the go-to solution for handling sensitive information securely.
📘 Learn more about secure storage concepts in mobile apps at OWASP Mobile Top 10.
Step-by-Step Guide
1. Add Dependency
In your pubspec.yaml
:
flutter_secure_storage: ^9.0.0
dependencies:
flutter:
sdk: flutter
flutter_secure_storage: ^9.0.0
dependencies:
flutter:
sdk: flutter
flutter_secure_storage: ^9.0.0
Then run flutter pub get
.
2. Initialize Secure Storage
Create a class named SecureStorageService.dart
:
import 'package:flutter_secure_storage/flutter_secure_storage.dart';
class SecureStorageService {
final FlutterSecureStorage _storage = const FlutterSecureStorage();
Future<void> writeData(String key, String value) async {
await _storage.write(key: key, value: value);
Future<String?> readData(String key) async {
return await _storage.read(key: key);
// <a href="https://aliendro.id/delete-data-locally-in-dart-app-with-full-example/">Delete data</a>
Future<void> deleteData(String key) async {
await _storage.delete(key: key);
Future<void> deleteAll() async {
await _storage.deleteAll();
import 'package:flutter_secure_storage/flutter_secure_storage.dart';
class SecureStorageService {
final FlutterSecureStorage _storage = const FlutterSecureStorage();
// Save data
Future<void> writeData(String key, String value) async {
await _storage.write(key: key, value: value);
}
// Read data
Future<String?> readData(String key) async {
return await _storage.read(key: key);
}
// <a href="https://aliendro.id/delete-data-locally-in-dart-app-with-full-example/">Delete data</a>
Future<void> deleteData(String key) async {
await _storage.delete(key: key);
}
// Delete all
Future<void> deleteAll() async {
await _storage.deleteAll();
}
}
import 'package:flutter_secure_storage/flutter_secure_storage.dart';
class SecureStorageService {
final FlutterSecureStorage _storage = const FlutterSecureStorage();
// Save data
Future<void> writeData(String key, String value) async {
await _storage.write(key: key, value: value);
}
// Read data
Future<String?> readData(String key) async {
return await _storage.read(key: key);
}
// Delete data
Future<void> deleteData(String key) async {
await _storage.delete(key: key);
}
// Delete all
Future<void> deleteAll() async {
await _storage.deleteAll();
}
}
3. Using the Secure Storage in UI
Now use it in your main.dart
:
import 'package:flutter/material.dart';
import 'secure_storage_service.dart';
class MyApp extends <a href="https://aliendro.id/create-ui-with-statelesswidget-in-dart/">StatelessWidget</a> {
const MyApp({super.key});
Widget build(BuildContext context) {
title: 'Secure Storage Demo',
theme: ThemeData(primarySwatch: Colors.blue),
home: const HomeScreen(),
class HomeScreen extends <a href="https://aliendro.id/statefulwidget-vs-statelesswidget-in-dart-guide/">StatefulWidget</a> {
const HomeScreen({super.key});
State<HomeScreen> createState() => _HomeScreenState();
class _HomeScreenState extends State<HomeScreen> {
final SecureStorageService _secureStorage = SecureStorageService();
String _storedValue = '';
Future<void> _saveToken() async {
await _secureStorage.writeData('token', 'my_secure_token_123');
Future<void> _readToken() async {
final value = await _secureStorage.readData('token');
_storedValue = value ?? 'No token found';
Future<void> _deleteToken() async {
await _secureStorage.deleteData('token');
Widget build(BuildContext context) {
appBar: AppBar(title: const Text('Secure Storage Example')),
mainAxisAlignment: MainAxisAlignment.center,
Text('Stored Token: $_storedValue'),
const SizedBox(height: 20),
ElevatedButton(onPressed: _saveToken, child: const Text('Save Token')),
ElevatedButton(onPressed: _readToken, child: const Text('Read Token')),
ElevatedButton(onPressed: _deleteToken, child: const Text('Delete Token')),
import 'package:flutter/material.dart';
import 'secure_storage_service.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends <a href="https://aliendro.id/create-ui-with-statelesswidget-in-dart/">StatelessWidget</a> {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Secure Storage Demo',
theme: ThemeData(primarySwatch: Colors.blue),
home: const HomeScreen(),
);
}
}
class HomeScreen extends <a href="https://aliendro.id/statefulwidget-vs-statelesswidget-in-dart-guide/">StatefulWidget</a> {
const HomeScreen({super.key});
@override
State<HomeScreen> createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
final SecureStorageService _secureStorage = SecureStorageService();
String _storedValue = '';
Future<void> _saveToken() async {
await _secureStorage.writeData('token', 'my_secure_token_123');
}
Future<void> _readToken() async {
final value = await _secureStorage.readData('token');
setState(() {
_storedValue = value ?? 'No token found';
});
}
Future<void> _deleteToken() async {
await _secureStorage.deleteData('token');
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Secure Storage Example')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Stored Token: $_storedValue'),
const SizedBox(height: 20),
ElevatedButton(onPressed: _saveToken, child: const Text('Save Token')),
ElevatedButton(onPressed: _readToken, child: const Text('Read Token')),
ElevatedButton(onPressed: _deleteToken, child: const Text('Delete Token')),
],
),
),
);
}
}
import 'package:flutter/material.dart';
import 'secure_storage_service.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Secure Storage Demo',
theme: ThemeData(primarySwatch: Colors.blue),
home: const HomeScreen(),
);
}
}
class HomeScreen extends StatefulWidget {
const HomeScreen({super.key});
@override
State<HomeScreen> createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
final SecureStorageService _secureStorage = SecureStorageService();
String _storedValue = '';
Future<void> _saveToken() async {
await _secureStorage.writeData('token', 'my_secure_token_123');
}
Future<void> _readToken() async {
final value = await _secureStorage.readData('token');
setState(() {
_storedValue = value ?? 'No token found';
});
}
Future<void> _deleteToken() async {
await _secureStorage.deleteData('token');
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Secure Storage Example')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Stored Token: $_storedValue'),
const SizedBox(height: 20),
ElevatedButton(onPressed: _saveToken, child: const Text('Save Token')),
ElevatedButton(onPressed: _readToken, child: const Text('Read Token')),
ElevatedButton(onPressed: _deleteToken, child: const Text('Delete Token')),
],
),
),
);
}
}
Conclusion
Using flutter_secure_storage
, you can safely manage sensitive data in your Flutter apps with just a few lines of code. This beginner-friendly guide covers all the basics—from installing the package, creating a service layer, and integrating with your UI.
Make sure to never store plain-text sensitive information. Encrypt on your backend when necessary and always keep libraries updated.
Post Views: 25