free geoip
20

Flutter Secure Storage Beginner Guide for Mobile Apps

Looking to securely store sensitive data in your Flutter apps? This Flutter Secure Storage Beginner Guide will walk you through…

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.

Flutter Secure Storage Beginner Guide

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:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
dependencies:
flutter:
sdk: flutter
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:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
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); } // <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:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
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 <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.

rysasahrial

Leave a Reply

Your email address will not be published. Required fields are marked *