0
0
FlutterHow-ToBeginner · 3 min read

How to Use Shared Preferences in Flutter for Simple Data Storage

In Flutter, use the shared_preferences package to save simple data like strings, numbers, and booleans locally. First, add the package to your pubspec.yaml, then use SharedPreferences.getInstance() to access and store data with methods like setString and getString.
📐

Syntax

To use shared preferences in Flutter, first import the package. Then get an instance using SharedPreferences.getInstance(). Use setter methods like setString(key, value) to save data and getter methods like getString(key) to read data.

  • getInstance(): Gets the shared preferences instance asynchronously.
  • setString(key, value): Saves a string value with a key.
  • getString(key): Retrieves the string value for a key or null if not found.
dart
import 'package:shared_preferences/shared_preferences.dart';

Future<void> saveData() async {
  final prefs = await SharedPreferences.getInstance();
  await prefs.setString('key', 'value');
}

Future<String?> loadData() async {
  final prefs = await SharedPreferences.getInstance();
  return prefs.getString('key');
}
💻

Example

This example shows a simple Flutter app that saves a username to shared preferences when a button is pressed and loads it on startup.

dart
import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _username = '';

  @override
  void initState() {
    super.initState();
    _loadUsername();
  }

  Future<void> _loadUsername() async {
    final prefs = await SharedPreferences.getInstance();
    setState(() {
      _username = prefs.getString('username') ?? '';
    });
  }

  Future<void> _saveUsername() async {
    final prefs = await SharedPreferences.getInstance();
    await prefs.setString('username', 'FlutterUser');
    _loadUsername();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Shared Preferences Example')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('Saved username: $_username'),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: _saveUsername,
                child: Text('Save Username'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
Output
App screen with text 'Saved username: ' initially empty, after pressing 'Save Username' button, text updates to 'Saved username: FlutterUser'.
⚠️

Common Pitfalls

  • Not awaiting SharedPreferences.getInstance() causes errors because it returns a Future.
  • Trying to save complex objects instead of simple types (string, int, bool, double, string list) will fail.
  • Forgetting to call setState() after loading data means UI won't update.
  • Not handling null values when reading data can cause crashes.
dart
/* Wrong: Not awaiting getInstance() */
final prefs = SharedPreferences.getInstance(); // This is a Future, not SharedPreferences
prefs.then((prefs) => prefs.setString('key', 'value')); // Correct usage with then

/* Right: Await getInstance() */
final prefs = await SharedPreferences.getInstance();
await prefs.setString('key', 'value');
📊

Quick Reference

Use these methods to work with shared preferences:

MethodDescription
getInstance()Get shared preferences instance asynchronously
setString(key, value)Save a string value
getString(key)Get a saved string or null
setInt(key, value)Save an integer value
getInt(key)Get a saved integer or null
setBool(key, value)Save a boolean value
getBool(key)Get a saved boolean or null
remove(key)Delete a saved value by key
clear()Remove all saved data

Key Takeaways

Always await SharedPreferences.getInstance() before using it.
Shared preferences store only simple data types like strings, ints, and bools.
Call setState() after loading data to update the UI.
Handle null values when reading data to avoid crashes.
Use remove() or clear() to delete saved preferences when needed.