PricingLoginStart free
Mobilutveckling med Flutter · Lektion

Tillståndslösa och tillståndsfulla widgets

Förstå de grundläggande skillnaderna mellan StatelessWidget och StatefulWidget och lär er när och hur var och en används för att bygga dynamiska användargränssnitt.

Lektion 1 av 411 steg

Tillståndslösa och tillståndsfulla widgets är en gratis lektion i Mobilutveckling med Flutter på CoddyKit. Detta är lektion 1 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Mobilutveckling med Flutter, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Mobilutveckling med Flutter innehåller totalt 4 lektioner.

Widgets: byggstenarna

Flutters UI byggs helt och hållet av widgets. Tänk på dem som LEGO-bitar! Allt ni ser på skärmen – text, knappar och till och med layoutbehållare – är en widget.

Widgets beskriver hur appens UI ska se ut utifrån dess aktuella konfiguration och tillstånd. Det finns två huvudtyper av widgets som ni kommer att möta:

  • StatelessWidget
  • StatefulWidget

StatelessWidget: statiskt UI

En StatelessWidget är en widget som inte ändrar utseende eller beteende över tid. När den väl har byggts förblir den oförändrad.

  • Den har inget internt ”state” att hantera.
  • Dess egenskaper är oföränderliga (de kan inte ändras efter skapandet).
  • Den passar perfekt för statiskt innehåll som text, ikoner eller bilder som inte behöver reagera på användarinmatning eller dataändringar.

En enkel StatelessWidget

Här är en enkel StatelessWidget som visar ett välkomstmeddelande. Observera att innehållet är fast.

Kör koden för att se meddelandet ”Hello, CoddyKit!”.

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('Stateless Demo'),
        ),
        body: const Center(
          child: Text(
            'Hello, CoddyKit!',
            style: TextStyle(fontSize: 24),
          ),
        ),
      ),
    );
  }
}

När ska ni använda StatelessWidget?

Använd en StatelessWidget när:

  • Widgetens utseende bara beror på dess egna konfigurationsparametrar (som skickas till konstruktorn).
  • Den inte behöver reagera på användarinteraktioner (till exempel tryck) eller interna dataändringar.
  • Exempel: Text, Icon, Image, AppBar, Padding, Row, Column.

Dessa widgets är effektiva eftersom Flutter inte behöver bygga om dem när deras förälder ändras, såvida deras egenskaper inte ändras uttryckligen.

StatefulWidget: dynamiskt UI

En StatefulWidget är en widget som kan ändra utseende och beteende över tid och reagera på användarinmatning eller dataändringar.

  • Den har ett internt ”state” som kan ändras.
  • När tillståndet ändras byggs widgeten om för att återspegla det nya tillståndet.
  • Den passar perfekt för interaktiva element som kryssrutor, reglage eller dynamiska listor.

Uppdatera UI med setState()

För att göra en StatefulWidget dynamisk ändrar ni dess interna state. När tillståndet ändras måste ni anropa metoden setState().

När ni anropar setState() meddelar ni Flutter att widgetens interna tillstånd har ändrats och att UI:t måste byggas om för att återspegla det nya tillståndet.

Utan setState() kan tillståndet ändras utan att UI:t uppdateras!

Interaktiv StatefulWidget

Vi bygger en enkel räknarapp med en StatefulWidget. Tryck på knappen för att öka talet.

Observera hur setState() används för att uppdatera variabeln _counter och bygga om UI:t.

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('Stateful Demo'),
        ),
        body: const Center(
          child: CounterWidget(),
        ),
      ),
    );
  }
}

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

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

class _CounterWidgetState extends State<CounterWidget> {
  int _counter = 0; // This is the mutable state

  void _incrementCounter() {
    setState(() {
      _counter++; // Update state
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text(
          'Count: $_counter',
          style: const TextStyle(fontSize: 32),
        ),
        const SizedBox(height: 20),
        ElevatedButton(
          onPressed: _incrementCounter,
          child: const Text('Increment'),
        ),
      ],
    );
  }
}

StatefulWidgets livscykel

StatefulWidgets genomgår en livscykel. Viktiga moment är:

  • createState(): Skapar det föränderliga tillståndsobjektet.
  • initState(): Anropas en gång när widgeten läggs till i widgetträdet. Passar bra för engångsinitiering.
  • build(): Anropas varje gång widgeten behöver visa sitt UI, vanligtvis efter setState().
  • dispose(): Anropas när widgeten tas bort från trädet. Passar bra för att frigöra resurser.

Genom att förstå detta blir det lättare att hantera komplexa interaktioner.

Välj rätt widget

Här är en snabb jämförelse som hjälper er att välja:

  • StatelessWidget:
    • Oföränderliga egenskaper.
    • Ändras inte efter skapandet.
    • Inget internt tillstånd.
    • Effektiv för statiskt innehåll.
  • StatefulWidget:
    • Föränderligt tillstånd (hanteras av ett `State`-objekt).
    • Kan ändras dynamiskt.
    • Reagerar på användarinteraktioner och data.
    • Använder setState() för att utlösa ombyggnad.

De flesta widgets börjar som tillståndslösa. Gör dem bara tillståndsfulla om de verkligen behöver ändras dynamiskt.

Utmaning: widgettyp

Ni bygger en Flutter-app. Vilken typ av widget skulle ni främst använda för en enkel ikon som ändrar färg när ni trycker på den?

Besvara frågan i den interaktiva lektionen

Sammanfattning: dynamiskt och statiskt

Bra jobbat! Ni har lärt er den grundläggande skillnaden mellan StatelessWidget och StatefulWidget.

  • StatelessWidgets används för statiska UI-element som inte ändras efter att de har byggts.
  • StatefulWidgets används för dynamiska UI-element som behöver reagera på interaktioner eller dataändringar och använder setState() för att uppdatera sitt utseende.

Att välja rätt widgettyp är avgörande för att bygga effektiva och lättunderhållna Flutter-appar. I nästa lektion går vi igenom grundläggande layoutwidgets!

Gratis att börja

Lär dig Dart med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser
22
Lektioner
88
Börja lära dig gratisVisa hela kursen

Vanliga frågor

Är lektionen ”Tillståndslösa och tillståndsfulla widgets” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Mobilutveckling med Flutter, inklusive ”Tillståndslösa och tillståndsfulla widgets”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Mobilutveckling med Flutter innehåller totalt 4 lektioner.

Vad lär jag mig i ”Tillståndslösa och tillståndsfulla widgets”?

Förstå de grundläggande skillnaderna mellan StatelessWidget och StatefulWidget och lär er när och hur var och en används för att bygga dynamiska användargränssnitt. Ni övar på Mobilutveckling med Flutter med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Mobilutveckling med Flutter?

Du behöver inga förkunskaper. Utbildningen i Mobilutveckling med Flutter på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.

Hur lång tid tar lektionen ”Tillståndslösa och tillståndsfulla widgets”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Mobilutveckling med Flutter-lektionen?

Ja. Varje Mobilutveckling med Flutter-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

  1. Tillståndslösa och tillståndsfulla widgets
  2. Grundläggande layoutwidgets
  3. Interaktiva användargränssnittselement
  4. Skapa rullningsbara listor med ListView
← Tillbaka till Mobilutveckling med Flutter