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 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:

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();

  // 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';

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.