InheritedWidget — wat is het, gegevens doorgeven in de boom en hoe het werkt

Wat is InheritedWidget in Flutter?

InheritedWidget — is een widget die zijn gegevens beschikbaar maakt voor alle afstammelingen in de Widget Tree. In tegenstelling tot een gewone widget, die gegevens alleen via de constructor aan onderliggende elementen doorgeeft, stelt InheritedWidget elke widget in de subboom in staat om gegevens te openen zonder een parameterketen. Dit lost het probleem van "prop drilling" op — het doorgeven van gegevens via meerdere tussenliggende widgets die deze gegevens zelf niet gebruiken.

Ingebouwde InheritedWidgets

Flutter bevat verschillende ingebouwde InheritedWidgets: Theme (kleurenschema en stijlen), MediaQuery (schermgrootte, oriëntatie, pixeldichtheid), Localizations (gelokaliseerde tekenreeksen), Directionality (tekstrichting), DefaultTextStyle (standaard tekststijl). Deze widgets worden ingesteld door root-widgets zoals MaterialApp en zijn beschikbaar in de hele app.

Levenscyclus van InheritedWidget

InheritedWidget heeft geen eigen status — het slaat gegevens op die via de constructor zijn doorgegeven. Wanneer de ouder van InheritedWidget met nieuwe gegevens wordt herbouwd, wordt de methode updateShouldNotify aangeroepen om oude en nieuwe gegevens te vergelijken. Als de methode true retourneert, worden alle afhankelijke widgets gemarkeerd voor herbouw. Dit is een eenvoudig maar effectief mechanisme voor reactieve updates.

Hoe werkt het doorgeven van gegevens via InheritedWidget

Het mechanisme van gegevensoverdracht via InheritedWidget is gebaseerd op de Element Tree. Wanneer een widget dependOnInheritedWidgetOfExactType aanroept, registreert het corresponderende element een afhankelijkheid van InheritedElement. Bij wijziging van InheritedWidget stelt InheritedElement alle afhankelijke elementen op de hoogte, die in het volgende frame worden herbouwd.

Afhankelijkheid registreren

De methode dependOnInheritedWidgetOfExactType vindt niet alleen InheritedWidget in de boom — het abonneert het huidige element op meldingen. Als u findAncestorWidgetOfExactType zou gebruiken in plaats van dependOn, zou de widget gegevens ontvangen maar niet herbouwen bij wijziging. Dit is een belangrijk verschil: dependOn is een abonnement, findAncestor is een eenmalige zoekopdracht.

Doorlopen van de InheritedWidget-boom

Wanneer een widget InheritedWidget aanvraagt, stijgt Flutter door de Element Tree van het huidige element naar de wortel, waarbij elk InheritedElement wordt gecontroleerd op typeovereenkomst. Het eerste gevonden InheritedElement wordt geretourneerd. Dit betekent dat de dichtstbijzijnde InheritedWidget in de boom prioriteit heeft — u kunt gegevens op een bepaald niveau overschrijven door InheritedWidget dichter bij de afstammelingen te plaatsen.

class ThemeData {
  final Color primaryColor;
  final TextTheme textTheme;

  const ThemeData({required this.primaryColor, required this.textTheme});
}

class MyTheme extends InheritedWidget {
  final ThemeData data;

  const MyTheme({required this.data, required Widget child}) : super(child: child);

  static MyTheme of(BuildContext context) {
    final widget = context.dependOnInheritedWidgetOfExactType<MyTheme>();
    assert(widget != null, "MyTheme not found in tree");
    return widget!;
  }

  @override
  bool updateShouldNotify(MyTheme oldWidget) => oldWidget.data != data;
}

In dit voorbeeld gebruikt MyTheme de statische methode of om gegevens aan afstammelingen te verstrekken. De methode dependOnInheritedWidgetOfExactType registreert de afhankelijkheid en updateShouldNotify vergelijkt oude en nieuwe gegevens om de noodzaak van herbouw van afhankelijke widgets te bepalen.

Een eigen InheritedWidget maken

Het maken van een eigen InheritedWidget bestaat uit twee stappen: het definiëren van een klasse die overerft van InheritedWidget en het implementeren van een statische methode of voor toegang vanuit afstammelingen. Gegevens worden via de constructor doorgegeven en de methode updateShouldNotify bepaalt wanneer afhankelijke widgets moeten worden herbouwd.

Stap 1: De InheritedWidget-klasse definiëren

De klasse moet overerven van InheritedWidget en gegevens ontvangen via de constructor met de verplichte parameter child. Gegevens kunnen van elk type zijn: primitieven, objecten, functies. De hoofdregel — gegevens moeten onveranderlijk (immutable) zijn om oude en nieuwe waarden betrouwbaar te kunnen vergelijken.

Stap 2: Statische methode of

De statische methode of ontvangt een BuildContext en retourneert de gegevens van InheritedWidget. Intern wordt dependOnInheritedWidgetOfExactType aangeroepen, die de dichtstbijzijnde InheritedWidget van het opgegeven type in de boom zoekt. Als InheritedWidget niet wordt gevonden, gooit de methode een uitzondering of retourneert een standaardwaarde, afhankelijk van de implementatie.

Stap 3: Gebruik in widgets

Om gegevens te openen, roept de widget MyWidget.of(context) aan in de build-methode. Flutter abonneert de widget automatisch op updates. Als gegevens veranderen, wordt de widget in het volgende frame herbouwd. Dit maakt schone, declaratieve code mogelijk zonder overbodige parameters.

class UserPreferences extends InheritedWidget {
  final String languageCode;
  final bool darkMode;

  const UserPreferences({
    required this.languageCode,
    required this.darkMode,
    required Widget child,
  }) : super(child: child);

  static UserPreferences of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType<UserPreferences>()!;
  }

  @override
  bool updateShouldNotify(UserPreferences oldWidget) =>
    oldWidget.languageCode != languageCode || oldWidget.darkMode != darkMode;
}

In dit voorbeeld slaat UserPreferences gebruikersvoorkeuren op. De methode updateShouldNotify vergelijkt elk veld afzonderlijk, wat onnodige herbouwen voorkomt bij het wijzigen van slechts één parameter. Gebruik een vergelijkbare aanpak voor uw eigen InheritedWidgets met meerdere velden.

De updateShouldNotify-methode en het voorkomen van onnodige herbouwen

updateShouldNotify — is de belangrijkste methode van InheritedWidget die bepaalt of afhankelijke widgets op de hoogte moeten worden gesteld van gegevenswijzigingen. Als de methode false retourneert, worden afhankelijke widgets niet herbouwd, zelfs niet als InheritedWidget zelf een nieuwe instantie met dezelfde gegevens heeft ontvangen. Dit is cruciaal voor prestaties.

Correcte implementatie van updateShouldNotify

Vergelijk alleen de velden die daadwerkelijk zijn veranderd en de weergave beïnvloeden. Als InheritedWidget 10 velden bevat, maar slechts één ervan beïnvloedt de UI, controleer dan alleen dat veld. Gebruik voor verzamelingen diepe vergelijking of onveranderlijke gegevensstructuren. Gebruik geen == voor List of Map, omdat deze op referentie worden vergeleken.

• Primitieven — gebruik directe vergelijkingen: oldWidget.value != value.
• Onveranderlijke objecten — gebruik overschreven ==: oldWidget.data != data (als data == overschrijft).
• Verzamelingen — gebruik listEquals, mapEquals uit package:flutter/foundation.dart.

Fouten bij implementatie van updateShouldNotify

De meest voorkomende fout — het retourneren van true zonder vergelijking. Dit leidt tot herbouw van alle afhankelijke widgets bij elke update van de ouder, zelfs als gegevens niet zijn veranderd. De tweede fout — het retourneren van false wanneer gegevens zijn veranderd, wat leidt tot verouderde UI. De derde — een complexe vergelijking die elk frame wordt uitgevoerd en de prestaties vertraagt.

InheritedWidget vs callbacks: wat kiezen?

InheritedWidget en callbacks (het doorgeven van functies via de constructor) lossen verschillende taken op. InheritedWidget is geschikt voor gegevens die nodig zijn voor veel widgets op verschillende niveaus van de boom. Callbacks zijn handig voor eenrichtingsdoorgave van gebeurtenissen van ouder naar specifiek kind of omgekeerd. De keuze hangt af van de architectuur van de app en de frequentie van wijzigingen.

Wanneer InheritedWidget gebruiken

Gebruik InheritedWidget wanneer gegevens nodig zijn voor veel widgets op verschillende nestniveaus: thema van de app, gebruikersvoorkeuren, apparaatinformatie, gegevens van de huidige sessie. InheritedWidget is vooral effectief voor "globale" gegevens die zelden veranderen maar in verschillende delen van de UI nodig zijn.

Wanneer callbacks gebruiken

Callbacks (terugroeptuncties) zijn geschikt voor het doorgeven van gebeurtenissen van een onderliggende widget naar de bovenliggende: knopklik, selectie van een lijstitem, formulier verzenden. Callbacks geven expliciet aan welke acties het kind kan uitvoeren en creëren geen verborgen afhankelijkheden. Voor het doorgeven van gegevens in de boom over een klein aantal niveaus is het ook eenvoudiger om constructorparameters te gebruiken.

InheritedWidget en bibliotheken voor statusbeheer

Provider en Riverpod — populaire bibliotheken voor statusbeheer in Flutter, gebouwd op InheritedWidget. Ze breiden de mogelijkheden ervan uit: voegen ondersteuning voor ChangeNotifier toe, automatische verwijdering bij demontage, luie initialisatie en vereenvoudigde syntaxis via generics.

Provider gebaseerd op InheritedWidget

Provider gebruikt InheritedWidget om een object van elk type in de boom door te geven. ChangeNotifierProvider volgt wijzigingen via ChangeNotifier en roept updateShouldNotify aan bij het aanroepen van notifyListeners. Dit bevrijdt de ontwikkelaar van het handmatig maken van InheritedWidget en het implementeren van updateShouldNotify.

Vergelijking met directe InheritedWidget

Directe InheritedWidget geeft meer controle en vereist geen externe afhankelijkheden. Provider biedt kant-en-klare infrastructuur: Consumer, Selector, MultiProvider, ProxyProvider. De keuze hangt af van de complexiteit van de app. Voor eenvoudige projecten is directe InheritedWidget voldoende, voor grote projecten verminderen Provider of Riverpod de sjablooncode.

// Directe InheritedWidget
class UserProvider extends InheritedWidget {
  final UserData userData;
  const UserProvider({required this.userData, required Widget child}) : super(child: child);
  static UserData of(BuildContext context) => context.dependOnInheritedWidgetOfExactType<UserProvider>()!.userData;
  @override
  bool updateShouldNotify(UserProvider old) => old.userData != userData;
}

// Provider-equivalent
return ChangeNotifierProvider<UserData>(
  create: (_) => UserData(),
  child: MyApp(),
);

Beide benaderingen in het voorbeeld lossen dezelfde taak op — het doorgeven van UserData in de boom. Provider vermindert de hoeveelheid code maar verbergt de mechanica van InheritedWidget. Directe InheritedWidget biedt volledige controle en begrip van wat er gebeurt, wat vooral belangrijk is bij het leren van Flutter en het debuggen van complexe herbouwproblemen.