Flutter inom mobilutveckling: vad det är, nyckelkoncept och hur det fungerar

Flutter: grunder för Widget, StatelessWidget och StatefulWidget

Widget — en deklarativ beskrivning av en del av gränssnittet. Allt i Flutter är en Widget: från en knapp till själva appen. En Widget är konfiguration (inte själva gränssnittet). StatelessWidget — en oföränderlig Widget. build() anropas en gång. Har inget tillstånd. Används för statiskt innehåll. StatefulWidget — en föränderlig Widget. Har ett State-objekt som kan ändras. setState() — utlöser ombyggnad. State — ett föränderligt objekt bundet till en StatefulWidget. Innehåller data som kan ändras.

StatelessWidget vs StatefulWidget

StatelessWidget — build() anropas en gång. Lämplig för rubriker, ikoner, statisk text. StatefulWidget — build() anropas varje gång setState() anropas. Lämplig för formulär, listor med ändringar, timer. InheritedWidget — överföring av data nedåt utan explicit överföring via konstruktorer. Theme, MediaQuery, Navigator — InheritedWidgets. BuildContext — en Widgets position i trädet. context.of<T>, context.watch<T>, context.select<T,R> — åtkomst till InheritedWidget.

// Exempel Flutter Widget: StatefulWidget med setState
class CounterWidget extends StatefulWidget {
  const CounterWidget({Key? key}) : super(key: key);

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

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

  void _increment() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flutter Counter')),
      body: const Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text('You have pushed the button:'),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _increment,
        child: const Icon(Icons.add),
      ),
    );
  }
}

Widget — konfiguration. StatelessWidget — oföränderlig. StatefulWidget — föränderlig med setState(). IT Sectr rekommenderar att börja med StatelessWidget och byta till StatefulWidget endast när tillstånd behövs.

Träd (Widget Tree, Element Tree, RenderObject Tree)

Flutter använder tre träd för effektiv rendering. Widget Tree — konfigurationsträd. Widgets skapas ofta (varje build), lätta. Element Tree — elementträd. Ett element per Widget (om typen inte ändras). Element — bro mellan Widget och RenderObject. RenderObject Tree — renderingsträd. Hanterar storlekar, positioner, ritning. RenderObject — tung, skapas sällan. Flutter jämför Widget Tree och uppdaterar Element Tree, vilket utlöser uppdatering av RenderObject Tree.

Keys och Element Tree

Key — Widget-identifierare i Element Tree. ValueKey, ObjectKey, UniqueKey, PageStorageKey. Keys tillåter Flutter att matcha gamla och nya Widgets under ombyggnad. Utan Keys matchar Flutter efter Widget-typ och position. GlobalKey — åtkomst till State från en annan Widget. Används för: komplexa formulär, animationer, åtkomst till State i tester. IT Sectr rekommenderar att använda Keys för listor (List.generate) och undvika GlobalKey om inte nödvändigt.

Expanded — Widget som fyller tillgängligt utrymme i Row/Column/Flex. Flexible — tvingar inte fyllning (kan vara mindre). MediaQuery — InheritedWidget med enhetsinformation: skärmstorlek, orientering, plattform, textskalfaktor. Theme/ThemeData — centraliserat tema. Theme.of(context) — åtkomst. MaterialApp — rot-Widget för konfiguration av routing, teman, språkinställningar. Scaffold — grundlayout med AppBar, Drawer, BottomNavigationBar. AppBar — övre panel.

Navigering (Navigator, Route)

Navigator — ruttstack (Routes). Navigator.push — öppna skärm (returnerar Future). Navigator.pop — stäng (med resultat). MaterialPageRoute — animerad övergång (bild från höger). Named Routes — strängidentifierare. onGenerateRoute — centraliserad hanterare. Navigator 2.0 (Router + RouteInformationParser + RouterDelegate) — deklarativ navigering för webb, deep linking och komplexa scenarier.

Navigator 2.0

Navigator 2.0 — deklarativ navigering. Router — central Widget. RouteInformationParser — tolkning av URL. RouterDelegate — stackhantering. GoRouter (paket) — förenklad wrapper över Navigator 2.0. Stöder: namngivna rutter, parametrar, omdirigering, deep linking. IT Sectr rekommenderar GoRouter för de flesta projekt och Navigator 2.0 endast för komplexa scenarier (webb, skrivbord).

Asynkron (FutureBuilder, StreamBuilder)

FutureBuilder — Widget som bygger gränssnitt baserat på en Future. connectionState: none, waiting, active, done. Används för: HTTP-förfrågningar, databasläsning, timer. StreamBuilder — Widget för Stream (oändlig dataflöde). snapshot.data, snapshot.hasError, snapshot.hasData. Används för: WebSocket, Firebase, platsuppdateringar. Båda Widgets byggs om vid mottagning av ny data.

Tillståndshantering

Provider — enkel DI + tillståndshantering. ChangeNotifierProvider, MultiProvider. Riverpod — modern ersättning för Provider: kompileringssäker, oberoende av BuildContext. Bloc — Event-Driven arkitektur: Cubit (enkla händelser) vs Bloc (komplexa). GetX — lättviktig tillståndshantering + DI + routing. setState — enklast, för lokalt tillstånd. IT Sectr rekommenderar Riverpod för nya projekt och Provider för befintliga.

Teman och anpassning (MediaQuery, ThemeData)

MediaQuery — skärmstorlek, orientering, plattform, textScaleFactor. MediaQuery.of(context).size.width. ThemeData — apptema: färger, teckensnitt, former. Theme.of(context).textTheme.bodyLarge. Hot Reload — kod injicering i en körande app. Bevarar tillstånd. Stöder inte: ändring av main(), globala variabler, statiska fält. Hot Restart — fullständig omstart av app (tillståndsförlust). Hot Reload — Flutters främsta fördel för utvecklare.

StatelessWidget — för statiskt innehåll. StatefulWidget — för dynamiskt innehåll. InheritedWidget — för DI. IT Sectr rekommenderar som standard StatelessWidget och StatefulWidget endast när det behövs.

Responsiv layout

LayoutBuilder — anpassning till förälderns dimensioner. OrientationBuilder — anpassning till orientering. Expanded vs Flexible — utrymmesfördelning i Row/Column. MediaQuery — brytpunkter för surfplattor och skrivbord. SafeArea — marginaler från systemelement (notch, statusfält). AspectRatio — bibehållande av proportioner. IT Sectr rekommenderar LayoutBuilder för adaptiva layouter och OrientationBuilder för liggande orientering.

Testning (Widget, Integration, Unit)

Enhetstester — testning av affärslogik, datalager, modeller. dart test — körning. Widget-tester — testning av widgets isolerat. WidgetTester — pumpWidget, tap, enterText. Integrationstester — fullständiga scenarier på en riktig enhet/emulator. Mockito — mockning av beroenden. Golden-tester — skärmbildsjämförelse (golden-filer). IT Sectr rekommenderar Widget-tester för varje skärm och enhetstester för affärslogik.

void main() {
  testWidgets('Counter increments on tap', (tester) async {
    await tester.pumpWidget(const MaterialApp(home: CounterWidget()));

    expect(find.text('0'), findsOneWidget);

    await tester.tap(find.byType(FloatingActionButton));
    await tester.pump();

    expect(find.text('1'), findsOneWidget);
  });
}

Animationer (Implicita, Explicita, Hero)

Implicita animationer — AnimatedContainer, AnimatedOpacity, AnimatedPadding, TweenAnimationBuilder. Egenskapsändringar animeras automatiskt. Explicita animationer — AnimationController med Tween. forward() / reverse(). Hero-animation — Hero Widget med en tagg — övergångsanimation mellan skärmar. Staggered animation — animationskedja med Interval. Lottie — integrering av After Effects-animationer. Rive — interaktiva animationer (state machine). IT Sectr rekommenderar AnimatedContainer för 80% av fallen och AnimationController för komplexa scenarier.

class AnimatedBox extends StatefulWidget {
  @override
  State<AnimatedBox> createState() => _AnimatedBoxState();
}

class _AnimatedBoxState extends State<AnimatedBox> {
  bool _expanded = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => setState(() => _expanded = !_expanded),
      child: AnimatedContainer(
        duration: const Duration(milliseconds: 300),
        curve: Curves.easeInOut,
        width: _expanded ? 200 : 100,
        height: _expanded ? 200 : 100,
        color: _expanded ? Colors.blue : Colors.red,
        child: const Center(child: Text('Tap me')),
      ),
    );
  }
}

Nätverk (http, dio, graphql)

http — enkel HTTP-klient (get, post, put, delete). dio — avancerad klient med interceptorer, timeouter, återförsök, loggning. graphql_flutter — GraphQL-klient för Flutter. json_serializable — generering av fromJson/toJson via annoteringar. Retrofit Dart — type-safe HTTP-klient som Retrofit. WebSocket — via web_socket_channel. Firebase — Cloud Firestore, Realtime Database, Cloud Functions. IT Sectr rekommenderar dio för REST API och graphql_flutter för GraphQL.

Flutter DevTools — verktygsset: Inspector (widgetträd), Timeline (prestanda), Memory, Network, Logging. Profile mode — profilering utan felsökning. Performance overlay — FPS, byggtider. Flame chart — flamdiagramspårning. DevTools — viktigt verktyg för optimering av Flutter-applikationer i produktion.

Flutter Web — kompilering av Flutter till WASM (WebAssembly). CanvasKit (Skia) vs HTML renderer. CanvasKit — pixel-perfekt, men tyngre. HTML renderer — lätt, men med begränsningar. WASM (Flutter 3.22+) — native prestanda. Responsiv anpassning via LayoutBuilder och MediaQuery. IT Sectr rekommenderar CanvasKit för webbapplikationer på skrivbordet och HTML renderer för innehållswebbplatser.