Sobes.tech
Junior

Wofür wird das Scoped Model in Flutter verwendet?

sobes.tech KI

Antwort von AI

Scoped Model ist eine einfache Bibliothek zur Zustandsverwaltung in Flutter, basierend auf dem Konzept des InheritedWidget. Sie soll den Zugriff auf Daten (Model) und die Möglichkeit, diese zu ändern, für Widgets im Baum bereitstellen, ohne die Daten explizit durch Konstruktoren auf jeder Ebene weiterzugeben.

Hauptkomponenten von Scoped Model:

  • Model: Klasse, die Daten und Geschäftslogik speichert. Sie sollte Model aus dem Paket scoped_model erweitern.
  • ScopedModel: Widget, das einen Teil des Widget-Baums umgibt. Es nimmt eine Instanz von Model und macht sie für sich und seine Nachkommen zugänglich.
  • ScopedModelDescendant: Widget, das Zugriff auf die Instanz von Model vom nächstgelegenen ScopedModel im Baum ermöglicht und sich auf dessen Änderungen abonniert.

Vorteile der Verwendung von Scoped Model:

  • Einfachheit: Leicht verständlich und zu verwenden, besonders für kleine und mittlere Anwendungen.
  • Basierend auf standardmäßigen Flutter-Mechanismen: Nutzt InheritedWidget, was es effizient macht.
  • Gut dokumentiert: Umfassende Dokumentation und Beispiele verfügbar.

Anwendungsbeispiel:

  1. Modell erstellen:

    import 'package:scoped_model/scoped_model.dart';
    
    class CounterModel extends Model {
      int _counter = 0;
    
      int get counter => _counter;
    
      void increment() {
        _counter++;
        notifyListeners(); // Benachrichtigt Widgets über Änderungen
      }
    }
    
  2. Einen Teil des Baums in ScopedModel einbetten:

    import 'package:flutter/material.dart';
    import 'package:scoped_model/scoped_model.dart';
    import 'counter_model.dart'; // Modell importieren
    
    void main() {
      runApp(
        // Unsere Anwendung in ScopedModel einbetten
        ScopedModel<CounterModel>(
          model: CounterModel(),
          child: MyApp(),
        ),
      );
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: Scaffold(
            appBar: AppBar(title: Text('Scoped Model Beispiel')),
            body: Center(
              child: CounterDisplay(),
            ),
            floatingActionButton: IncrementButton(),
          ),
        );
      }
    }
    
  3. Zugriff auf das Modell in ScopedModelDescendant:

    import 'package:flutter/material.dart';
    import 'package:scoped_model/scoped_model.dart';
    import 'counter_model.dart'; // Modell importieren
    
    class CounterDisplay extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        // Zugriff auf das Modell und Abonnement seiner Änderungen
        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) {
        // Zugriff auf das Modell ohne Abonnement auf Änderungen
        return FloatingActionButton(
          onPressed: () {
            ScopedModel.of<CounterModel>(context).increment();
          },
          child: Icon(Icons.add),
        );
      }
    }
    

Scoped Model eignet sich gut für Anwendungen, bei denen die Zustandsverwaltung nicht zu komplex ist und auf leistungsstärkere, aber auch ausführlichere Lösungen wie BLoC oder Riverpod verzichtet werden kann. Für große und komplexe Anwendungen mit vielen miteinander verbundenen Zuständen können jedoch fortgeschrittene Ansätze erforderlich sein.