Flutter Widgets — vad är det, widgetträd och build

Vad är Flutter Widgets?

Flutter Widgets – alla UI-element i Flutter-ramverket, implementerade som oföränderliga (immutable) Dart-klasser. En widget är en konfiguration av ett UI-element: dess storlek, färg, position, händelsehantering. Till skillnad från Android (XML + View) eller iOS (Storyboard + UIView) använder Flutter inte inbyggda komponenter – allt ritas av motorn Skia (Android/iOS/Linux) eller Impeller (iOS/macOS) på Canvas. Detta säkerställer identiskt utseende på alla plattformar utan plattformsskillnader. Flutter levereras med två uppsättningar widgetar: Material Widgets (Google Material Design 3-design för Android/Web) och Cupertino Widgets (Apple HIG-design för iOS/macOS). Utvecklaren kan kombinera båda uppsättningarna i en applikation. Varje widget har en build()-metod som returnerar en barnwidget eller en komposition av dem – så byggs widgetträdet.

Flutters tre träd

Flutter arbetar med tre träd: Widget Tree (konfiguration, skapad av utvecklaren), Element Tree (matchning av widget med position i trädet, hanteras av ramverket), Render Tree (objekt som beräknar layout och utför paint). Widget skapar Element, som skapar RenderObject. Element återanvänds vid konfigurationsändring (rebuild) – detta är Flutters optimeringsmekanism: om widgettypen och key matchar, skapas inte Element på nytt, utan den nya konfigurationen uppdateras. Att förstå de tre träden är nyckeln till att optimera prestandan för Flutter-applikationer.

StatelessWidget: oföränderliga widgetar

StatelessWidget – en widget som inte lagrar internt tillstånd. Den tar emot parametrar via konstruktorn och visar dem utan möjlighet till ändring efter bygget. StatelessWidget är idealisk för statiska element: rubriker, ikoner, avatarer, listor med fast data. Metoden build() anropas en gång vid skapande och vid ändring av förälderwidgeten. Eftersom StatelessWidget inte har något tillstånd kräver den inget separat State-objekt – build() definieras direkt i widgetklassen.

import 'package:flutter/material.dart';

class ProfileHeader extends StatelessWidget {
  final String name;
  final String avatarUrl;

  const ProfileHeader({super.key, required this.name, required this.avatarUrl});

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        CircleAvatar(
          radius: 24,
          backgroundImage: NetworkImage(avatarUrl),
        ),
        const SizedBox(width: 12),
        Text(
          name,
          style: const TextStyle(
            fontSize: 18,
            fontWeight: FontWeight.bold,
          ),
        ),
      ],
    );
  }
}

ProfileHeader – en StatelessWidget som tar emot name och avatarUrl via konstruktorn. CircleAvatar visar avataren, Text visar namnet. Widgeten kan inte ändra dessa värden efter skapandet. Att använda const-konstruktorn (const ProfileHeader) gör att Flutter kan återanvända widgetinstansen vid förälderns rebuild – detta är en mikrooptimering som rekommenderas för alla StatelessWidgets.

StatefulWidget: widgetar med tillstånd

StatefulWidget – en widget med föränderligt tillstånd, lagrat i ett separat State-objekt. Själva StatefulWidget är oföränderlig (immutable), precis som StatelessWidget. Den föränderliga delen finns i State: State – ett objekt som skapas en gång och överlever widgetens flera rebuilds. När tillståndet ändras (setState()) anropar Flutter State: s build() och uppdaterar UI. StatefulWidget används för interaktiva element: räknare, textfält, kryssrutor, animationer, timers.

import 'package:flutter/material.dart';

class LikeButton extends StatefulWidget {
  const LikeButton({super.key});

  @override
  State<LikeButton> createState() => _LikeButtonState();
}

class _LikeButtonState extends State<LikeButton> {
  bool liked = false;
  int count = 42;

  void _toggleLike() {
    setState(() {
      liked = !liked;
      count += liked ? 1 : -1;
    });
  }

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: _toggleLike,
      child: Text(liked ? '♥ $count' : '♡ $count'),
    );
  }
}

LikeButton – en StatefulWidget med State-klassen _LikeButtonState. Fälten liked och count är tillstånd som lagras i State och återställs inte vid rebuild. setState() meddelar Flutter att UI måste byggas om. Flutter skapar inte om State vid varje förälders rebuild – endast vid konfigurationsändring (key eller widgettyp). På IT Sectr använder vi StatelessWidget för visning och StatefulWidget för interaktiva komponenter, enligt principen att minimera StatefulWidget till mutationsgränserna.

Widgetträd: från Widget till RenderObject

Widget Tree – den hierarkiska strukturen av widgetar som beskriver applikationens UI. Flutter omvandlar Widget Tree till Element Tree: varje Widget skapar ett Element som spårar positionen i trädet och kopplingen till RenderObject. Render Tree utför layout (bestämning av storlekar och positioner) och paint (ritning). Element är det viktigaste optimeringsskiktet: om widgettypen och key inte har ändrats vid rebuild, återanvänds Element och uppdaterar konfigurationen utan att skapa en ny RenderObject. Detta säkerställer Flutters prestanda vid hög bildhastighet (60/120 FPS).

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flutter Widgets')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Icon(Icons.flutter_dash, size: 80),
            const SizedBox(height: 16),
            const Text(
              'Hej, Flutter!',
              style: TextStyle(fontSize: 24),
            ),
          ],
        ),
      ),
    );
  }
}

Widgetträdet för HomeScreen: Scaffold → AppBar + Center → Column → [Icon, SizedBox, Text]. Scaffold – den huvudsakliga layoutwidgeten i Material Design. Center centrerar barnet Column. Column arrangerar barnen vertikalt med centrerad justering (mainAxisAlignment.center). Flutter beräknar layout uppifrån och ner (constraints skickas från föräldern) och storlekar nerifrån och upp (sizedByParent eller sizing from children).

BuildContext: byggkontext och åtkomst till trädet

BuildContext – en beskrivning av widgetens position i Element Tree. Varje build()-metod får en BuildContext genom vilken widgeten kan få åtkomst till:MediaQuery (skärmstorlek, orientering, pixeltäthet, säker zon), Theme (MaterialThemeData eller CupertinoThemeData), Navigator (navigationsstack), ScaffoldMessenger (SnackBar), InheritedWidget (vidarebefordran av data nedåt i trädet). BuildContext bör inte lagras efter att build() slutförts eller användas utanför synkron kontext – detta leder till fel som "Scaffold.of() called with a context that does not contain a Scaffold". Istället för att lagra context, använd Builder-widgeten eller InheritedWidget-mönstret för åtkomst till data.

Key: identifiering av widget i trädet

Key – en valfri parameter i konstruktorn för varje widget (super.key). Key hjälper Flutter att identifiera widgeten vid ändring av ordning/antal element i en lista. Utan key jämför Flutter widgetar efter typ och position; när ett element läggs till i mitten av listan utan key återanvänder Flutter Element för fel widget, vilket orsakar tillstånds- (StatefulWidget) och animationsbuggar. Använd ValueKey (unik identifierare) för listor, ObjectKey (baserat på dataobjekt), UniqueKey (garanterat unik vid varje rebuild – för tvingad återskapning).

Flutter-widgetkatalog: Material, Cupertino, Layout

Flutter SDK (stabil version 3.3+, Dart 3+) innehåller 200+ inbyggda widgetar, indelade i kategorier: Layout (Row, Column, Stack, Container, Expanded, Flexible, Wrap, GridView, ListView, CustomScrollView), Material Design (Scaffold, AppBar, Card, Drawer, BottomNavigationBar, FloatingActionButton, TabBar, Chip, DataTable), Cupertino (CupertinoPageScaffold, CupertinoNavigationBar, CupertinoButton, CupertinoTabBar), Painting & Effects (Opacity, DecoratedBox, ClipRect, Transform, BackdropFilter, ShaderMask), Async (FutureBuilder, StreamBuilder) och Accessibility (Semantics, MergeSemantics, ExcludeSemantics). Layout-widgetar är grunden för alla Flutter UI: Row för horisontella sekvenser, Column för vertikala, Stack för överlappande element, Container med BoxDecoration för dekoration.