À quoi sert le modèle Scoped dans Flutter?

Scoped Model est une bibliothèque simple pour gérer l’état dans Flutter, basée sur le concept d’InheritedWidget. Elle est conçue pour fournir un accès aux données (modèle) et la possibilité de les modifier aux widgets dans l’arbre sans avoir besoin de transmettre explicitement les données via des constructeurs à chaque niveau.

Principaux composants de Scoped Model :

• Model : Classe qui stocke les données et la logique métier. Elle doit étendre Model du paquet scoped_model.
• ScopedModel : Widget qui enveloppe une partie de l’arbre de widgets. Il prend une instance de Model et la rend accessible à lui-même et à ses descendants.
• ScopedModelDescendant : Widget qui permet d’accéder à l’instance de Model depuis le ScopedModel le plus proche au-dessus dans l’arbre et de s’abonner à ses changements.

Avantages de l’utilisation de Scoped Model :

• Simplicité : Facile à comprendre et à utiliser, surtout pour des applications petites et moyennes.
• Basé sur les mécanismes standards de Flutter : Utilise InheritedWidget, ce qui le rend performant.
• Bien documenté : Documentation exhaustive et exemples disponibles.

Exemple d’utilisation :

1. Créer un modèle :

   import 'package:scoped_model/scoped_model.dart';
   
   class CounterModel extends Model {
     int _counter = 0;
   
     int get counter => _counter;
   
     void increment() {
       _counter++;
       notifyListeners(); // Notifie les widgets du changement
     }
   }
   

2. Envelopper une partie de l’arbre dans ScopedModel :

   import 'package:flutter/material.dart';
   import 'package:scoped_model/scoped_model.dart';
   import 'counter_model.dart'; // Import du modèle
   
   void main() {
     runApp(
       // Enveloppe notre application dans ScopedModel
       ScopedModel<CounterModel>(
         model: CounterModel(),
         child: MyApp(),
       ),
     );
   }
   
   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         home: Scaffold(
           appBar: AppBar(title: Text('Exemple Scoped Model')),
           body: Center(
             child: CounterDisplay(),
           ),
           floatingActionButton: IncrementButton(),
         ),
       );
     }
   }
   

3. Accéder au modèle dans ScopedModelDescendant :

   import 'package:flutter/material.dart';
   import 'package:scoped_model/scoped_model.dart';
   import 'counter_model.dart'; // Import du modèle
   
   class CounterDisplay extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       // Accède au modèle et s’abonne à ses changements
       return ScopedModelDescendant<CounterModel>(
         builder: (context, child, model) {
           return Text(
             'Counter : ${model.counter}',
             style: Theme.of(context).textTheme.headline4,
           );
         },
       );
     }
   }
   
   class IncrementButton extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       // Accède au modèle sans s’abonner à ses changements
       return FloatingActionButton(
         onPressed: () {
           ScopedModel.of<CounterModel>(context).increment();
         },
         child: Icon(Icons.add),
       );
     }
   }
   

Scoped Model convient bien aux applications où la gestion de l’état n’est pas trop complexe et où l’on peut se passer de solutions plus puissantes mais plus verbeuses, comme BLoC ou Riverpod. Cependant, pour des applications grandes et complexes avec de nombreux états interconnectés, des approches plus avancées peuvent être nécessaires.