Widget — vad är det, typer och komposition i Flutter

Vad är Widget i Flutter

Widget i Flutter är en oföränderlig (immutable) beskrivning av en del av användargränssnittet. Varje Widget innehåller konfigurationsegenskaper: storlek, färg, position, text, händelsehanterare och underordnade Widgets. Widgets i sig själva renderas inte direkt — de är recept (blueprints) som Flutter Engine använder för att skapa ett RenderObject — ett verkligt grafiskt objekt på skärmen.

Flutters filosofi säger: “Everything is a Widget”. Detta innebär att inte bara synliga element (Text, Image, Button) är Widgets, utan även strukturella block (Padding, Center, Column, Stack), beteendeblock (GestureDetector, AnimatedBuilder) och till och med själva applikationen (MaterialApp, CupertinoApp). Detta tillvägagångssätt säkerställer enhetlighet: vilket skärmelement som helst kan kombineras med vilket annat som helst genom enkel inkapsling.

Enligt data från Google I/O 2024 — Flutter Widgets Deep Dive innehåller en genomsnittlig Flutter-applikation mellan 200 och 1500 Widgets vid en given tidpunkt. Trots detta antal upprätthåller Flutter 60 FPS även på budgetenheter tack vare optimeringar på C++-nivå i Skia/Impeller-motorn. Widgets är lätta objekt (40–80 byte var), så att skapa dem är ingen prestandaflaskhals.

import 'package:flutter/material.dart';

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

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

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

Flutters tre träd: Widget, Element och RenderObject

För att förstå hur Widget fungerar måste du känna till Flutters arkitektur som består av tre sammankopplade träd. Det första — Widget tree — beskriver UI-konfigurationen. Det är ett lätt träd som kan byggas om helt vid varje bildruta (garbage collector tar bort gamla Widgets och skapar nya). Widgets är oföränderliga (immutable): om textfärgen ändras skapas en ny Text Widget med den nya färgen, den gamla kasseras.

Det andra trädet — Element tree — är länken mellan Widget och RenderObject. Element innehåller en referens till Widget (konfiguration) och till RenderObject (rendering). När Widget ändras jämför Flutter den nya Widget med det gamla Elementet och beslutar: uppdatera den befintliga RenderObject (om Widget är av samma typ) eller skapa en ny (om Widget-typen har ändrats). Denna process kallas Reconciliation och är motsvarigheten till React Virtual DOM.

Det tredje trädet — RenderObject tree — ansvarar för den faktiska renderingen på skärmen. RenderObject innehåller konkreta dimensioner, positioner och paint-metoder. Flutter Engine (C++ Skia eller Impeller) går igenom RenderObject tree och renderar varje nod. RenderObject tree är det tyngsta trädet, därför minimerar Flutter dess förändringar genom att återanvända RenderObject vid byte av Widget av samma typ.

StatelessWidget vs StatefulWidget

Flutter delar in Widgets i två grundläggande typer: StatelessWidget och StatefulWidget. StatelessWidget är en widget som inte innehåller föränderligt tillstånd. Utseendet på StatelessWidget bestäms helt av dess konstruktor och kan inte ändras efter rendering. Exempel: Text, Icon, Divider, Padding. Alla egenskaper för StatelessWidget deklareras som final i konstruktorn och är skrivskyddade.

StatefulWidget är en widget med föränderligt tillstånd. Den består av två klasser: själva Widget (oföränderlig konfiguration, precis som StatelessWidget) och State (föränderligt tillstånd). Att separera Widget från State är ett viktigt arkitekturbeslut i Flutter. Widget återskapas vid varje build, men State-objektet förblir levande under widgetens hela livscykel i trädet och bevarar sitt tillstånd.

När setState() anropas markerar Flutter State som “smutsigt” och vid nästa bildruta anropar den build()-metoden för att återbygga underträdet. Viktigt: setState() återskapar inte själva Widget — den utlöser bara build()-anropet i det befintliga State. Detta innebär att StatefulWidget kan uppdatera UI utan att förlora tillståndet för underordnade Widgets, så länge nycklarna (Key) för underordnade element förblir stabila.

// StatelessWidget — utseende ändras aldrig
class GreetingWidget extends StatelessWidget {
  const GreetingWidget({super.key, required this.name});
  final String name;

  @override
  Widget build(BuildContext context) {
    return Text('Hej, $name');
  }
}

// StatefulWidget — räknare med föränderligt tillstånd
class CounterWidget extends StatefulWidget {
  const CounterWidget({super.key});

  @override
  State<CounterWidget> createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int _count = 0;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Räkning: $_count'),
        ElevatedButton(
          onPressed: () => setState(() => _count++),
          child: const Text('Öka'),
        ),
      ],
    );
  }
}

Typer av Widget: layout, painting, interactive

Alla Widgets i Flutter kan delas in i tre huvudkategorier baserat på funktionellt syfte. Layout Widget — ansvarar för placering av underordnade element på skärmen. Row och Column placerar barnen i en rad, Stack lägger en ovanpå en annan, Expanded och Flexible fördelar tillgängligt utrymme. Layout Widgets har ingen egen visuell representation — de hanterar position och storlek på underordnade widgets.

Painting Widget — ansvarar för visuellt utseende. Container kombinerar dekorationer (färg, gradient, skugga, kant) med layout-egenskaper. Padding lägger till mellanrum, DecoratedBox ritar bakgrund, Transform tillämpar transformationer (rotation, skalning). Painting Widgets är byggstenarna för visuell stil och används ofta tillsammans med layout Widgets för att uppnå önskat utseende.

Interactive Widget — bearbetar användarinmatning. GestureDetector upptäcker gester (tap, swipe, pinch), InkWell lägger till Material-rippeleffekt, TextField tar emot textinmatning, Slider och Switch tillhandahåller standardkontroller. Interactive Widgets höjer händelser via callback-funktioner som skickas till konstruktorn eller hanteras via tillståndsleverantörer.

Enligt data från Flutter Widget of the Week (Google, 2025) använder Flutter-communityt aktivt kombinationen av layout + painting + interactive Widgets för att bygga nästan vilket gränssnitt som helst. Till exempel en knapp: InkWell (interactive) + Container (painting) + Text (static) + Padding (layout). Sådan modularitet möjliggör återanvändning av standardblock i olika sammanhang utan kodduplicering.

Widget-komposition och BuildContext

Widget-komposition är processen att bygga UI genom att kapsla in Widgets i varandra. Till skillnad från klassiskt arv (extends), där den underordnade klassen ärver beteendet från föräldern, använder Flutter aggregering: varje Widget innehåller andra Widgets via parametern child (för en) eller children (för flera). Detta tillvägagångssätt ger större flexibilitet och återanvändbarhet.

BuildContext är det näst viktigaste konceptet efter Widget. BuildContext är en deskriptor för Widgets position i elementträdet. Genom BuildContext kan Widget komma åt förfäders Widgets (Theme.of(context), MediaQuery.of(context), Navigator.of(context)). BuildContext skickas till build()-metoden och används för interaktion med föräldra- och underordnade element. Varje Widget har exakt en BuildContext som unikt identifierar dess position i trädet.

Enligt Flutter Architectural Overview (Google, 2025) är BuildContext grunden för InheritedWidget — en mekanism som tillåter data att skickas nedåt i trädet utan explicit överföring via konstruktorer. Theme, MediaQuery, Navigator och Provider använder InheritedWidget under huven. Varje djupt kapslad Widget kan komma åt förfäders data via BuildContext.dependOnInheritedWidgetOfExactType, vilket gör BuildContext till nyckeln till Flutters reaktiva arkitektur.

// Widget-komposition via inkapsling
Scaffold(
  appBar: AppBar(title: const Text('Min App')),
  body: Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        const Text('Välkommen till Flutter',
          style: TextStyle(fontSize: 24)),
        const SizedBox(height: 16),
        ElevatedButton(
          onPressed: () { /* nav */ },
          child: const Text('Kom igång'),
        ),
      ],
    ),
  ),
)

// Åtkomst till teman via BuildContext
Text(
  'Stiliserad Text',
  style: Theme.of(context).textTheme.headlineMedium,
)

Vanliga misstag med Widget

Det första och vanligaste misstaget — använda StatefulWidget där StatelessWidget räcker. Många nybörjare Flutter-utvecklare skapar StatefulWidget för alla widgets, även om tillståndet lagras i en extern leverantör (Provider, Riverpod, BLoC). Detta är överflödigt och försämrar prestandan. Regel: använd StatelessWidget om tillståndet hanteras externt eller om widgeten inte har ett eget föränderligt tillstånd.

Det andra misstaget — skapa Widget inuti build-metoden utan const-konstruktor. Varje Widget som skapas utan const allokeras om vid varje build. Om Widgets inuti build() skapas med const-konstruktor kan Flutter återanvända samma instans, vilket minskar belastningen på garbage collectorn. Lägg till const överallt där det är möjligt — särskilt för Text, Icon, SizedBox, Padding och andra StatelessWidgets.

Det tredje misstaget — felaktig hantering av nycklar (Key). Flutter använder Key för att identifiera Widgets vid ombyggnad av trädet. Om en lista med Widgets byggs om utan Key kan Flutter blanda ihop ordningen på elementen, vilket leder till felaktig animation eller förlust av tillstånd. Lägg alltid till Key (t.ex. ValueKey eller ObjectKey) för element i listor, särskilt när du använder ListView.builder med dynamisk data.