Provider: wat is het, toestandsmanager van Flutter-applicaties

Wat is Provider?

Provider — een pakket voor toestandsbeheer en afhankelijkheidsinjectie in Flutter, gebouwd bovenop InheritedWidget. Provider biedt een object (toestand, service, repository) in de widgetboom en herbouwt automatisch de UI bij gegevenswijziging. In tegenstelling tot direct gebruik van InheritedWidget verwijdert Provider alle boilerplate.

Provider is officieel aanbevolen door Google voor toestandsbeheer in Flutter (Flutter Team, 2019-2023). Volgens Flutter Community Survey 2025 wordt Provider gebruikt in 72% van de Flutter-applicaties.

ChangeNotifier en notifyListeners

ChangeNotifier — ingebouwde Flutter-klasse die het Listener-patroon implementeert. ChangeNotifier stelt abonnees op de hoogte van wijzigingen via de aanroep notifyListeners().

class CounterProvider extends ChangeNotifier {
  int _count = 0;
  int get count => _count;

  void increment() {
    _count++;
    notifyListeners();
  }

  void reset() {
    _count = 0;
    notifyListeners();
  }
}

Regels voor notifyListeners: aanroepen na volledige gegevenswijziging — niet in het midden van de methode, maar aan het einde. Bij meerdere wijzigingen roept u notifyListeners() eenmaal aan na alle wijzigingen.

Consumer en context.watch

Consumer — widget die zich abonneert op ChangeNotifier en herbouwt bij elke aanroep van notifyListeners(). Consumer accepteert een builder-functie met drie parameters: context, model, child.

Consumer<CounterProvider>(
  builder: (context, provider, child) => Column(
    children: [
      child!, // wordt niet herbouwd
      Text('${provider.count}'),
      ElevatedButton(
        onPressed: () => provider.increment(),
        child: Icon(Icons.add),
      ),
    ],
  ),
  child: Text('Teller:'),
)

context.watch — BuildContext-extensiemethode om te abonneren op Provider. context.read — toegang zonder abonnement. context.select — abonnement op een specifiek veld van het model.

MultiProvider en ProxyProvider

MultiProvider — widget voor het registreren van meerdere Providers zonder nesting. MultiProvider accepteert een lijst van providers.

MultiProvider(
  providers: [
    ChangeNotifierProvider(create: (_) => CartProvider()),
    ChangeNotifierProvider(create: (_) => AuthProvider()),
    ProxyProvider<AuthProvider, OrderProvider>(
      update: (_, auth, __) => OrderProvider(auth.userId),
    ),
  ],
  child: MaterialApp(home: HomePage()),
)

ProxyProvider — Provider die afhankelijk is van een andere Provider. StreamProvider en FutureProvider — voor reactieve en asynchrone gegevens.

Provider testen

Provider wordt getest door de widget in te pakken in MultiProvider met testwaarden. Voor de test is geen echte API of database nodig.

import 'package:flutter_test/flutter_test.dart';

void main() {
  testWidgets('Counter increments on button tap',
    (tester) async {
      await tester.pumpWidget(
        ChangeNotifierProvider(
          create: (_) => CounterProvider(),
          child: CounterScreen(),
        ),
      );
      await tester.tap(find.byKey(Key('increment')));
      await tester.pump();
      expect(find.text('1'), findsOneWidget);
    },
  );
}

Provider: prestaties en beperkingen

Prestaties van Provider zijn gebaseerd op InheritedWidget: bij wijziging van Provider worden alle widgets die via context.watch of Consumer zijn geabonneerd, herbouwd. Gebruik context.select, Consumer met child-parameter en const voor statische widgets.