Apprivoiser Shared Preferences en Flutter sans prise de tête

Bon, on ne va pas se mentir : utiliser Shared Preferences, c’est un peu comme planquer un mot doux sous le clavier de l’utilisateur… mais en plus geek et plus fiable.
Tu veux retenir le score de ton quiz ciné ou mémoriser le dernier film sélectionné ? Pas besoin de sortir l’artillerie lourde, c’est deux lignes et une bière (optionnelle).
Allez, on plonge, promis, zéro embrouille et juste assez de blagues de cinéphile pour survivre à la review de code !

Mais d’abord… c’est quoi Shared Preferences ?

Imagine Shared Preferences comme un petit post-it collé sur ton frigo : tu y notes des infos rapides que tu ne veux pas oublier — comme « regarde Star Wars avant Le Parrain » (hérésie si tu inverses !).

Dans une appli Flutter, Shared Preferences te sert exactement à ça : retenir de petites données locales clé-valeur. Typiquement, on s’en sert pour stocker un thème clair/sombre, savoir si tu es déjà connecté, ou – dans notre cas – quel film culte tu avais sélectionné dans une liste déroulante.

Installer Shared Preferences sans se perdre

Étape 1 : Monter le projet

Direction le terminal :

flutter create cine_prefs
cd cine_prefs

Étape 2 : Ajouter la dépendance

Dans ton pubspec.yaml :

dependencies:
   flutter:
      sdk: flutter
   shared_preferences: ^2.2.2

Puis la commande magique :

flutter pub get

Étape 3 : Importer le package

Au tout début de ton fichier Dart :

import 'package:shared_preferences/shared_preferences.dart';

Écrire, lire et effacer… comme dans Netflix mais local

Imaginons que ton appli propose une liste déroulante de films cultes : Star Wars, Le Seigneur des Anneaux, Pulp Fiction etc. Tu veux retenir le dernier film que l’utilisateur a choisi (parce qu’il ne faut pas manquer l’occasion de revoir Pulp Fiction).

Sauvegarder le film choisi

Future<void> saveSelectedMovie(String movie) async {
   final prefs = await SharedPreferences.getInstance();
   await prefs.setString('selected_movie', movie);
}

Récupérer le film préféré

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

Supprimer le choix (amour de courte durée)

Future<void> clearSelectedMovie() async {
   final prefs = await SharedPreferences.getInstance();
   await prefs.remove('selected_movie');
}

Démo Flutter avec liste déroulante de films cultes

Voici une petite appli simple qui affiche une liste de films et qui sauvegarde ton choix grâce à Shared Preferences.

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

void main() {
   runApp(const MyApp());
}

class MyApp extends StatelessWidget {
   const MyApp({super.key});

   @override
   Widget build(BuildContext context) {
      return MaterialApp(
         home: MovieDropdownPage(),
      );
   }
}

class MovieDropdownPage extends StatefulWidget {
   @override
   _MovieDropdownPageState createState() => _MovieDropdownPageState();
}

class _MovieDropdownPageState extends State<MovieDropdownPage> {
   final List<String> movies = [
      "Star Wars",
      "Le Parrain",
      "Pulp Fiction",
      "Le Seigneur des Anneaux",
      "Inception"
   ];

   String? selectedMovie;

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

   Future<void> _loadSelectedMovie() async {
      final prefs = await SharedPreferences.getInstance();
      setState(() {
         selectedMovie = prefs.getString('selected_movie') ?? movies.first;
      });
   }

   Future<void> _saveSelectedMovie(String movie) async {
      final prefs = await SharedPreferences.getInstance();
      await prefs.setString('selected_movie', movie);
      setState(() {
         selectedMovie = movie;
      });
   }

   Future<void> _clearSelectedMovie() async {
      final prefs = await SharedPreferences.getInstance();
      await prefs.remove('selected_movie');
      setState(() {
         selectedMovie = null;
      });
   }

   @override
   Widget build(BuildContext context) {
      return Scaffold(
         appBar: AppBar(title: const Text("Films cultes & prefs")),
         body: Padding(
            padding: const EdgeInsets.all(16.0),
            child: Column(
               mainAxisAlignment: MainAxisAlignment.center,
               children: [
                  DropdownButton<String>(
                  value: selectedMovie,
                  hint: const Text("Choisis ton film culte 🎬"),
                  items: movies.map((movie) {
                     return DropdownMenuItem(
                        value: movie,
                        child: Text(movie),
                     );
                  }).toList(),
                  onChanged: (value) {
                     if (value != null) {
                        _saveSelectedMovie(value);
                     }
                  },
               ),
               const SizedBox(height: 20),
               Text(
                  selectedMovie == null
                     ? "Aucun film choisi... hérétique ! 😱"
                     : "Ton choix préféré : $selectedMovie 🍿",
                  ),
                  const SizedBox(height: 20),
                  ElevatedButton(
                     onPressed: _clearSelectedMovie,
                     child: const Text("Effacer mon choix"),
                  ),
               ],
            ),
         ),
      );
   }
}

Comment ça fonctionne en coulisses ?

Derrière le rideau, Flutter ne s’amuse pas à tout réinventer :

  • Android : il stocke les préférences dans un fichier XML (oui, comme les vieux fichiers de configuration).
  • iOS/macOS : il utilise NSUserDefaults.
  • Web : il planque tout ça dans le localStorage.

Bref, un simple carnet de notes mais natif, et super rapide.

Limites (et pièges à éviter)

  • Pas une base de données : c’est fait pour du petit stockage (ton dernier film choisi, pas ton top 200 IMDb).
  • Pas sécurisé : évite d’y coller des mots de passe ou des clés secrètes. Pour ça, préfère flutter_secure_storage.
  • Simple map clé-valeur : pas de relations, pas de magie. Juste des « post-it numériques ».
  • Toujours prévoir les absents : ton getString peut retourner null. Donc, mets un plan B (genre un film par défaut).


Claude BUENO

J’aide les équipes à développer leurs pratiques agiles et collaboratives. Je blogue depuis 2008 sur la transformation numérique, le développement d'applications web et mobile et les pratiques pour les réaliser dans les meilleures conditions. Sujets de prédilection : agilité, coaching, digital, management, marketing, développement web et mobile

Vous aimerez aussi...

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *