Flutter — nyckelbegrepp, arkitektur och widgets

Vad är Flutter

Flutter är ett SDK (Software Development Kit) och ramverk för att skapa användargränssnitt, tillkännagivet av Google 2015. Den första stabila versionen Flutter 1.0 släpptes i december 2018. Till skillnad från React Native använder Flutter ingen brygga mellan JavaScript och inbyggd kod — den kompilerar direkt till inbyggda processorinstruktioner.

Nyckelfunktionen hos Flutter är dess egen renderingsmotor. Ramverket förlitar sig inte på UIKit (iOS) eller Androids View-system. Istället ritar Flutter varje pixel oberoende genom Skia (fram till 2024) eller den nya Impeller-motorn. Detta garanterar ett enhetligt utseende på applikationen över alla plattformar och eliminerar anpassningsproblem till olika OS-versioner.

Enligt uppgifter från Statista 2024 ligger Flutter på första plats bland plattformsoberoende ramverk i popularitet: cirka 46% av utvecklarna använder det för mobilutveckling. Ramverket används i projekt som Google Pay, Alibaba, eBay, BMW och Tencent.

Flutters historia och versioner

Den första alfaversionen av Flutter presenterades på Dart Developer Summit 2015 under namnet Sky. 2018 släpptes Flutter 1.0 med stöd endast för iOS och Android. Flutter 2.0 (2021) lade till Web och Desktop. Flutter 3.0 (2022) introducerade stabilt stöd för macOS och Linux. Flutter 3.16 (2023) presenterade Impeller — en ny renderingsmotor baserad på Metal och Vulkan.

Version Flutter 3.22 (2024) inkluderar Impeller som standard på iOS, förbättrat stöd för Material Design 3, Dart 3.4 med makro-utvidgningar och inbyggt stöd för Native Assets för direkt åtkomst till plattformsresurser. Google rapporterar att Impeller minskar bildrutebortfall (jank) med 90% jämfört med Skia.

Programspråket Dart

Dart är ett programmeringsspråk skapat av Google 2011 och används i Flutter. Dart kombinerar strikt typning med möjligheter till JIT-kompilering (för Hot Reload) och AOT-kompilering (för produktionsbyggen). Dart 3.0 (2023) introducerade pattern matching, sealed class och records som stabila funktioner.

Null safety i Dart — en obligatorisk funktion som infördes från version 2.12. Kompilatorn kontrollerar alla nullable-typer i byggfasen och eliminerar NullPointerException vid körning. Datatyper (int, String, bool) är som standard non-nullable, och för nullable-värden används suffixet ? (t.ex. String? name).

Flutter-arkitektur

Flutter-arkitekturen är byggd på en trelagersprincip. Det nedre lagret — motorn (C/C++), ansvarig för rendering, in-/utmatning och åtkomst till plattforms-API:er. Mellanlagret — ramverket (Dart), som implementerar systemet med widgets, gester, animationer och navigering. Det övre lagret — applikationen (Dart), som samlar widgets i ett träd.

Widgets och widget-trädet

I Flutter är allt en widget. Widgets är av två typer: StatelessWidget (oföränderlig, lagrar inte tillstånd) och StatefulWidget (föränderlig, hanterar tillstånd via State). Widget-trädet (Widget Tree) är en hierarkisk struktur där varje barn-widget är nästlad i en förälder. Scaffold, AppBar, Container, Text, Column, Row — de grundläggande byggstenarna.

BuildContext är ett objekt som skickar widgetens position i trädet. MediaQuery.of(context) hämtar skärmstorlekar, Theme.of(context) — det aktuella temat. BuildContext används för navigering (Navigator.of(context)), åtkomst till InheritedWidget och locale-översättning via Localizations.of.

Impeller-motorn

Impeller är en modern Flutter-renderingsmotor, skriven i C++ och använder Metal (iOS/macOS) och Vulkan (Android). Till skillnad från Skia, som ritade om varje bildruta från grunden, kompilerar Impeller shaders i förväg och lagrar dem i cache. Detta eliminerar fördröjningar vid första renderingen av komplexa scener och minskar GPU-belastningen.

Tester av Google Flutter Team visar att Impeller minskar shader-kompileringstiden från 200–500 ms (Skia) till 1–3 ms. På iPhone 13 Pro når Impeller-rendering 120 FPS utan bildrutebortfall. På Android med Vulkan stabila 60 FPS även på mellanklass-enheter (Xiaomi Redmi Note 12).

Exempelapplikation i 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('Hej, Flutter!'),
        ),
      ),
    );
  }
}

Fördelar med Flutter

Enhetlig kodbas — den främsta fördelen med Flutter. Ett projekt i Dart kompileras för iOS, Android, Web, Windows, macOS och Linux. Enligt Googles uppskattningar minskar detta utvecklingstiden med 30–50% jämfört med separata iOS- och Android-projekt. Alibaba minskade versionslanseringstiden med 30% efter övergången till Flutter.

Prestanda hos Flutter är nära inbyggd. AOT-kompilering av Dart till maskinkod för ARM och x86_64 eliminerar tolkningsfördröjningar. Impeller-motorn garanterar 60 FPS även på enheter från 2018 (iPhone XR, Samsung Galaxy S9). Enligt Google renderas 99,5% av bildrutorna i Flutter-applikationer utan förlust.

Hot Reload — teknik för omedelbar koduppdatering. Utvecklaren ändrar källkoden, sparar filen och Flutter bygger om widget-trädet på 300–800 ms utan att förlora applikationens aktuella tillstånd. Detta påskyndar UI-designiterationer: marginaler, färger och animationer kan ändras på sekunder utan att vänta på en fullständig ombyggnad.

Material Design 3 och det egna designspråket Cupertino (iOS-stil) ingår i standardpaketet för Flutter. Material 3-widgets stöder dynamiska färger (Material You), adaptiv layout och övergångsanimationer mellan skärmar. CupertinoPageTransition och CupertinoNavigationBar efterliknar beteendet hos den inbyggda iOS-navigatorn.

Anpassning av widgets kräver inte att man skapar anpassade Views på varje plattform. Det räcker med att åsidosätta build() och returnera en ny widget. Paketen animation (AnimatedContainer, Hero, TweenAnimationBuilder) och gesture (GestureDetector, Dismissible) täcker 95% av UI-animationsscenarierna utan att skriva plattformskod.

Flutter-ekosystem och paket

pub.dev — det officiella paketregistret för Dart och Flutter. I juli 2024 hade över 45 000 paket publicerats i registret. Installation av ett paket görs med kommandot flutter pub add . Pub löser automatiskt beroenden, kontrollerar versionskompatibilitet och genererar pubspec.lock.

Tillståndshantering i Flutter — en av de viktigaste arkitektoniska uppgifterna. Förutom flutter_bloc är populära lösningar: Provider (rekommenderas av Google, använder InheritedWidget), Riverpod (omarbetad version av Provider med kompileringstidssäkerhet) och GetX (allt-i-ett: tillstånd, routing, DI). Provider förblir enklast att komma igång med: ChangeNotifierProvider omsluter modellen och Consumer ritar om widgeten när data ändras.

Testning i Flutter stöds på tre nivåer. Enhetstester (flutter test) kontrollerar funktioner och klasser utan UI. Widget-tester (testWidgets) renderar enskilda widgets i en isolerad miljö. Integrationstester (IntegrationTest) kör hela applikationen på en enhet eller simulator. Flutter 3.22 lade till stöd för patch-tester genom patch-analys och förbättrad kodtäckningsrapport.

Populära paket

dio — HTTP-klient med stöd för interceptorer, timeouter och FormData. Används i 40% av Flutter-projekten på GitHub. Dio stöder avlyssning av förfrågningar för loggning, återförsök och tillägg av auktoriseringstoken. Det näst populäraste biblioteket — retrofit, genererar typade API-klienter.

flutter_bloc — bibliotek för tillståndshantering baserat på BLoC-mönstret (Business Logic Component). BlocProvider skickar tillstånd nedåt i widget-trädet, BlocBuilder ritar om UI vid tillståndsändring och BlocListener utför sidoeffekter (navigering, SnackBar). Cubet — förenklad version av BLoC utan händelser.

go_router — deklarativ navigering för Flutter från Google. Rutter beskrivs i GoRouter-konfigurationen med stöd för nästlade rutter, omdirigeringar och deep links. ShellRoute delar upp navigeringen på flikar i BottomNavigationBar. GoRouter 14.0 stöder type-safe sökvägar och StatefulShellRoute med bevarande av fliktillstånd.