Flutter Provider

Flutter Provider

1. Objectif

2. Présentation

• Flutter Provider est une solution de gestion d’état pour les applications Flutter. Elle permet de gérer facilement l’état de l’application et de le partager entre plusieurs widgets, facilitant ainsi l’accès aux données là où elles sont nécessaires. Vous stockez les données dans un emplacement central appelé provider et y accédez depuis n’importe quel emplacement de votre application. Dès que les données changent, le provider les met à jour, garantissant ainsi la cohérence et l’actualité des données de votre application.
• Flutter Provider est un package de gestion d’état pour les applications Flutter, conçu pour centraliser et synchroniser les données de manière réactive. Il permet de :
• Stocker l’état de l’application dans un fournisseur (Provider) centralisé.
• Partager ces données entre widgets sans couplage direct.
• Mettre à jour automatiquement l’interface utilisateur (UI) lors des changements d’état.


3. Les types de Provider les plus courants

1. Provider (de base)

• Fournit un objet simple (ex: une classe de service ou un objet).
• Cas quotidien : Afficher le nom de l’utilisateur connecté.

// Création
Provider<String>(
  create: (context) => "Alice Dupont",
  child: MonWidget(),
);

// Utilisation
Text(Provider.of<String>(context)); // Affiche "Alice Dupont"

• Ne permet pas d’écouter les changements de l’objet (utilise pour les objets immuables ou services).

2. ChangeNotifierProvider <T>

• Fournit une classe qui étend ChangeNotifier, donc un objet avec un état modifiable que les widgets peuvent écouter.
• Utilisé pour des données modifiables avec notification de changement.
• Cas quotidien : Un panier d’achat (ajout/suppression d’articles).

class Counter with ChangeNotifier {
  int value = 0;
  void increment() {
    value++;
    notifyListeners();
  }
}

ChangeNotifierProvider(
  create: (_) => Counter(),
  child: MyApp(),
)

• Utilisation :

final counter = Provider.of<Counter>(context);
counter.increment();

• Ou avec Consumer :

Consumer<Counter>(
  builder: (context, counter, child) {
    return Text('${counter.value}');
  },
)

3. StreamProvider <T>

• Fournit un stream de données (comme Firebase, WebSocket, etc.).

StreamProvider<int>(
  create: (_) => Stream.periodic(Duration(seconds: 1), (i) => i),
  initialData: 0,
  child: MyApp(),
)

4. FutureProvider <T>

• Fournit une valeur asynchrone (Future).

FutureProvider(
  create: (_) async => fetchUser(),
  initialData: User.empty(),
  child: MyApp(),
)

5. Multifournisseur

• Utilisé pour regrouper plusieurs Provider dans une seule structure :

MultiProvider(
  providers: [
    Provider(create: (_) => MyService()),
    ChangeNotifierProvider(create: (_) => Counter()),
    StreamProvider(create: (_) => myStream(), initialData: 0),
  ],
  child: MyApp(),
)

4. Comment utiliser un package provider Flutter ?

• Pour créer un provider, nous devons l’enregistrer, puis obtenir son instance. Nous pouvons ensuite obtenir cette instance sur n’importe quelle autre page. Voyons cela concrètement avec un exemple de compteur simple utilisant Provider.

1. Étape 1 : Ajouter un provider à pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  provider: ^6.0.0

2. Étape 2 : Créer un modèle de données (counter.dart)

• Avant d’utiliser Provider, importez-le dans votre fichier Dart :

importer  'package:provider/provider.dart' ;




import 'package:flutter/foundation.dart';

class Counter with ChangeNotifier {
  int _count = 0;

  int get count => _count;

  void increment() {
    _count++;
    notifyListeners(); // tells all listening widgets to rebuild
  }
}

3. Étape 3 : Enveloppez votre application ChangeNotifier Provider avec main.dart

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'counter.dart'; // import your data file

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => Counter(),
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Provider Counter',
      home: MyHomePage(),
    );
  }
}

4. Étape 4 : Accéder aux données et les modifier à l’aide de Consumer(ou context.watch)

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // You can also use: final counter = context.watch<Counter>();
    return Scaffold(
      appBar: AppBar(title: Text('Provider Example')),
      body: Center(
        child: Consumer<Counter>(
          builder: (context, counter, child) {
            return Text(
              'Count: ${counter.count}',
              style: TextStyle(fontSize: 30),
            );
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => context.read<Counter>().increment(),
        child: Icon(Icons.add),
      ),
    );
  }
}

5. Utilisation directe de .addListener