Waarvoor wordt het Scoped Model gebruikt in Flutter…

Scoped Model is een eenvoudige bibliotheek voor het beheren van de staat in Flutter, gebaseerd op het concept van InheritedWidget. Het is ontworpen om toegang te bieden tot gegevens (model) en de mogelijkheid om deze te wijzigen aan widgets in de boom zonder expliciet gegevens door te geven via constructeurs op elk niveau.

Belangrijkste componenten van Scoped Model:

Model: Klasse die gegevens en bedrijfslogica opslaat. Het moet Model uitbreiden uit de scoped_model package.
ScopedModel: Widget die een deel van de widgetboom omhult. Het accepteert een instantie van Model en maakt deze toegankelijk voor zichzelf en zijn nakomelingen.
ScopedModelDescendant: Widget die toegang geeft tot de instantie van Model van de dichtstbijzijnde ScopedModel erboven in de boom en zich abonneert op de wijzigingen.

Voordelen van het gebruik van Scoped Model:

Eenvoud: Gemakkelijk te begrijpen en te gebruiken, vooral voor kleine en middelgrote applicaties.
Gebaseerd op standaard Flutter-mechanismen: Gebruikt InheritedWidget, wat het efficiënt maakt.
Goed gedocumenteerd: Beschikbare uitgebreide documentatie en voorbeelden.

Voorbeeld van gebruik:

Maak een model:

import 'package:scoped_model/scoped_model.dart';

class CounterModel extends Model {
  int _counter = 0;

  int get counter => _counter;

  void increment() {
    _counter++;
    notifyListeners(); // Informeert widgets over de verandering
  }
}

Omring een deel van de boom met ScopedModel:

import 'package:flutter/material.dart';
import 'package:scoped_model/scoped_model.dart';
import 'counter_model.dart'; // Importeer het model

void main() {
  runApp(
    // Omring onze applicatie met ScopedModel
    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 Voorbeeld')),
        body: Center(
          child: CounterDisplay(),
        ),
        floatingActionButton: IncrementButton(),
      ),
    );
  }
}

Toegang tot het model in ScopedModelDescendant:

import 'package:flutter/material.dart';
import 'package:scoped_model/scoped_model.dart';
import 'counter_model.dart'; // Importeer het model

class CounterDisplay extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Toegang tot het model en abonneren op wijzigingen
    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) {
    // Toegang tot het model zonder op wijzigingen te abonneren
    return FloatingActionButton(
      onPressed: () {
        ScopedModel.of<CounterModel>(context).increment();
      },
      child: Icon(Icons.add),
    );
  }
}

Scoped Model is geschikt voor applicaties waarbij het beheren van de staat niet te complex is en je zonder krachtigere, maar ook meer uitgebreide oplossingen zoals BLoC of Riverpod kunt. Voor grote en complexe applicaties met veel onderling verbonden staten kunnen meer geavanceerde benaderingen nodig zijn.

Waarvoor wordt het Scoped Model gebruikt in Flutter?