Flutter — kernbegrippen, architectuur en widgets

Wat is Flutter

Flutter is een SDK (Software Development Kit) en framework voor het maken van gebruikersinterfaces, aangekondigd door Google in 2015. De eerste stabiele versie Flutter 1.0 werd uitgebracht in december 2018. In tegenstelling tot React Native gebruikt Flutter geen brug tussen JavaScript en native code — het compileert direct naar native processorinstructies.

Het belangrijkste kenmerk van Flutter is zijn eigen rendering-engine. Het framework vertrouwt niet op UIKit (iOS) of het Android View-systeem. In plaats daarvan tekent Flutter elke pixel onafhankelijk via Skia (tot 2024) of de nieuwe Impeller-engine. Dit garandeert een consistente look van de applicatie op alle platformen en elimineert aanpassingsproblemen aan verschillende OS-versies.

Volgens Statista 2024 staat Flutter op de eerste plaats qua populariteit onder cross-platform frameworks: ongeveer 46% van de ontwikkelaars gebruikt het voor mobiele ontwikkeling. Het framework wordt gebruikt in projecten van Google Pay, Alibaba, eBay, BMW en Tencent.

Geschiedenis en versies van Flutter

De eerste alpha-versie van Flutter werd gepresenteerd op de Dart Developer Summit in 2015 onder de naam Sky. In 2018 werd Flutter 1.0 uitgebracht met alleen ondersteuning voor iOS en Android. Flutter 2.0 (2021) voegde Web en Desktop toe. Flutter 3.0 (2022) introduceerde stabiele ondersteuning voor macOS en Linux. Flutter 3.16 (2023) presenteerde Impeller — een nieuwe rendering-engine gebaseerd op Metal en Vulkan.

Versie Flutter 3.22 (2024) bevat Impeller standaard op iOS, verbeterde ondersteuning voor Material Design 3, Dart 3.4 met macro-uitbreidingen en ingebouwde ondersteuning voor Native Assets voor directe toegang tot platformbronnen. Google meldt dat Impeller frameverlies (jank) met 90% vermindert in vergelijking met Skia.

De programmeertaal Dart

Dart is een programmeertaal gemaakt door Google in 2011 en gebruikt in Flutter. Dart combineert strikte typering met mogelijkheden voor JIT-compilatie (voor Hot Reload) en AOT-compilatie (voor productieversies). Dart 3.0 (2023) introduceerde pattern matching, sealed class en records als stabiele functies.

Null safety in Dart — een verplichte functie ingevoerd vanaf versie 2.12. De compiler controleert alle nullable-types tijdens de buildfase, waardoor NullPointerException in runtime wordt geëlimineerd. Gegevenstypes (int, String, bool) zijn standaard non-nullable, voor nullable-waarden wordt de ?-suffix gebruikt (bijv. String? name).

Flutter-architectuur

Flutter-architectuur is gebouwd op een drielagenprincipe. De onderste laag — de engine (C/C++), verantwoordelijk voor rendering, input/output en toegang tot platform-API's. De middelste laag — het framework (Dart), dat het systeem van widgets, gebaren, animaties en navigatie implementeert. De bovenste laag — de applicatie (Dart), die widgets in een boomstructuur verzamelt.

Widgets en de widgetboom

In Flutter is alles een widget. Widgets zijn er in twee typen: StatelessWidget (onveranderlijk, slaat geen status op) en StatefulWidget (veranderlijk, beheert status via State). De widgetboom (Widget Tree) is een hiërarchische structuur waarin elke child-widget is genest in een parent. Scaffold, AppBar, Container, Text, Column, Row — de basisbouwstenen.

BuildContext is een object dat de positie van een widget in de boom doorgeeft. MediaQuery.of(context) verkrijgt schermafmetingen, Theme.of(context) — het huidige thema. BuildContext wordt gebruikt voor navigatie (Navigator.of(context)), toegang tot InheritedWidget en locale-vertaling via Localizations.of.

De Impeller-engine

Impeller is een moderne Flutter rendering-engine, geschreven in C++ en gebruikt Metal (iOS/macOS) en Vulkan (Android). In tegenstelling tot Skia, dat elk frame opnieuw tekende, compileert Impeller shaders vooraf en slaat ze op in cache. Dit elimineert vertragingen bij de eerste weergave van complexe scènes en vermindert de GPU-belasting.

Tests van Google Flutter Team tonen aan dat Impeller de shader-compilatietijd reduceert van 200–500 ms (Skia) naar 1–3 ms. Op iPhone 13 Pro behaalt Impeller-rendering 120 FPS zonder frameverlies. Op Android met Vulkan stabiele 60 FPS, zelfs op middenklasse apparaten (Xiaomi Redmi Note 12).

Voorbeeldapplicatie in Flutter

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Flutter App')),
        body: const Center(
          child: Text('Hallo, Flutter!'),
        ),
      ),
    );
  }
}

Voordelen van Flutter

Eén codebase — het belangrijkste voordeel van Flutter. Eén project in Dart compileert voor iOS, Android, Web, Windows, macOS en Linux. Volgens schattingen van Google vermindert dit de ontwikkeltijd met 30–50% in vergelijking met aparte iOS- en Android-projecten. Alibaba verminderde de releasetijd met 30% na de overstap naar Flutter.

Prestaties van Flutter zijn bijna native. AOT-compilatie van Dart naar machinecode voor ARM en x86_64 elimineert interpretatievertragingen. De Impeller-engine garandeert 60 FPS, zelfs op apparaten uit 2018 (iPhone XR, Samsung Galaxy S9). Volgens Google wordt 99,5% van de frames in Flutter-applicaties zonder verlies gerenderd.

Hot Reload — technologie voor directe code-updates. De ontwikkelaar wijzigt de broncode, slaat het bestand op en Flutter herbouwt de widgetboom in 300–800 ms zonder verlies van de huidige applicatiestatus. Dit versnelt UI-design iteraties: marges, kleuren en animaties kunnen in seconden worden aangepast zonder te wachten op een volledige herbouw.

Material Design 3 en de eigen ontwerptaal Cupertino (iOS-stijl) zijn opgenomen in de standaard Flutter-bundel. Material 3 widgets ondersteunen dynamische kleuren (Material You), adaptieve lay-out en overgangsanimaties tussen schermen. CupertinoPageTransition en CupertinoNavigationBar bootsen het gedrag van de native iOS-navigator na.

Aanpassing van widgets vereist geen aangepaste Views op elk platform. Het volstaat om build() te overschrijven en een nieuwe widget terug te geven. De pakketten animation (AnimatedContainer, Hero, TweenAnimationBuilder) en gesture (GestureDetector, Dismissible) dekken 95% van de UI-animatiescenario's zonder platformcode te schrijven.

Flutter-ecosysteem en pakketten

pub.dev — de officiële pakketregister voor Dart en Flutter. In juli 2024 waren er meer dan 45.000 pakketten gepubliceerd in het register. Installatie van een pakket gebeurt met het commando flutter pub add . Pub lost automatisch afhankelijkheden op, controleert versiecompatibiliteit en genereert pubspec.lock.

Statusbeheer in Flutter — een van de belangrijkste architecturale taken. Naast flutter_bloc zijn populaire oplossingen: Provider (aanbevolen door Google, gebruikt InheritedWidget), Riverpod (herziene versie van Provider met compile-time veiligheid) en GetX (alles-in-één: status, routing, DI). Provider blijft het eenvoudigst om te starten: ChangeNotifierProvider wikkelt het model in en Consumer hertekent de widget bij gegevenswijziging.

Testen in Flutter wordt op drie niveaus ondersteund. Unit tests (flutter test) controleren functies en klassen zonder UI. Widget tests (testWidgets) renderen individuele widgets in een geïsoleerde omgeving. Integratietests (IntegrationTest) draaien de volledige applicatie op een apparaat of simulator. Flutter 3.22 voegde ondersteuning voor patch-tests toe via patch-analyse en verbeterde codedekkingsrapportage.

Populaire pakketten

dio — HTTP-client met ondersteuning voor interceptors, time-outs en FormData. Wordt gebruikt in 40% van de Flutter-projecten op GitHub. Dio ondersteunt het onderscheppen van verzoeken voor logging, herpogingen en het toevoegen van autorisatietokens. De tweede populairste bibliotheek — retrofit, genereert getypeerde API-cliënten.

flutter_bloc — bibliotheek voor statusbeheer op basis van het BLoC (Business Logic Component)-patroon. BlocProvider geeft statussen door aan de widgetboom, BlocBuilder hertekent UI bij statuswijziging en BlocListener voert bijeffecten uit (navigatie, SnackBar). Cubet — vereenvoudigde versie van BLoC zonder events.

go_router — declaratieve navigatie voor Flutter van Google. Routes worden beschreven in GoRouter-configuratie met ondersteuning voor geneste routes, redirects en deep links. ShellRoute verdeelt navigatie over BottomNavigationBar-tabbladen. GoRouter 14.0 ondersteunt type-safe paden en StatefulShellRoute met behoud van tabstatus.