Flutter Widgetek — mi ez, widgetfa és build

Mik azok a Flutter Widgetek?

Flutter Widgetek – az összes UI elem a Flutter keretrendszerben, megváltoztathatatlan (immutable) Dart osztályokként implementálva. A widget egy UI elem konfigurációja: mérete, színe, pozíciója, eseménykezelése. Az Androidtól (XML + View) vagy iOS-től (Storyboard + UIView) eltérően a Flutter nem használ natív komponenseket – mindent a Skia (Android/iOS/Linux) vagy Impeller (iOS/macOS) motor rajzol a Canvas-ra. Ez azonos megjelenést biztosít minden platformon, platformeltérések nélkül. A Flutter két widget készlettel érkezik: Material Widgets (Google Material Design 3 design Android/Web esetén) és Cupertino Widgets (Apple HIG design iOS/macOS esetén). A fejlesztő mindkét készletet kombinálhatja egy alkalmazásban. Minden widget rendelkezik egy build() metódussal, amely egy gyermek widgetet vagy azok kompozícióját adja vissza – így épül fel a widgetfa.

A Flutter három fája

A Flutter három fával működik: Widget Tree (konfiguráció, a fejlesztő hozza létre), Element Tree (a widget pozícióhoz rendelése a fában, a keretrendszer kezeli), Render Tree (objektumok, amelyek a layout-ot számítják és a paint-et végzik). A Widget létrehozza az Element-et, amely létrehozza a RenderObject-et. Az Element újrahasznosításra kerül konfigurációváltáskor (rebuild) – ez a Flutter optimalizációs mechanizmusa: ha a widget típusa és a key egyezik, az Element nem jön létre újra, csak az új konfiguráció frissül. A három fa megértése kulcs a Flutter alkalmazások teljesítményének optimalizálásához.

StatelessWidget: változatlan widgetek

StatelessWidget – olyan widget, amely nem tárol belső állapotot. A paramétereket a konstruktoron keresztül fogadja, és a build után változtatás nélkül jeleníti meg. A StatelessWidget ideális statikus elemekhez: címsorok, ikonok, avatárok, rögzített adatokat tartalmazó listák. A build() metódus egyszer kerül meghívásra a létrehozáskor és a szülő widget változásakor. Mivel a StatelessWidget-nek nincs állapota, nem igényel külön State objektumot – a build() közvetlenül a widget osztályban van definiálva.

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 – egy StatelessWidget, amely a name és avatarUrl paramétereket a konstruktoron keresztül fogadja. A CircleAvatar megjeleníti az avatárt, a Text a nevet. A widget nem változtathatja meg ezeket az értékeket a létrehozás után. A const konstruktor (const ProfileHeader) használata lehetővé teszi a Flutter számára, hogy újrahasznosítsa a widget példányát a szülő rebuild-je során – ez egy mikrooptimalizálás, amely minden StatelessWidget esetében ajánlott.

StatefulWidget: állapottal rendelkező widgetek

StatefulWidget – változó állapotú widget, amely egy külön State objektumban tárolódik. Maga a StatefulWidget megváltoztathatatlan (immutable), akárcsak a StatelessWidget. A változó rész a State-ben van elkülönítve: State – egy objektum, amely egyszer jön létre és túléli a widget többszörös rebuild-jeit. Amikor az állapot változik (setState()), a Flutter meghívja a State build() metódusát, frissítve az UI-t. A StatefulWidget interaktív elemekhez használatos: számlálók, szövegmezők, jelölőnégyzetek, animációk, időzítők.

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'),
    );
  }
}

A LikeButton – egy StatefulWidget a _LikeButtonState State osztállyal. A liked és count mezők a State-ben tárolt állapotok, amelyek nem állnak vissza rebuild-kor. A setState() értesíti a Flutter-t az UI újraépítésének szükségességéről. A Flutter nem hozza létre újra a State-et minden szülő rebuild-nél – csak konfigurációváltáskor (key vagy widget típus). Az IT Sectr-nél a StatelessWidget-et megjelenítésre, a StatefulWidget-et interaktív komponensekhez használjuk, követve a StatefulWidget minimalizálásának elvét a mutáció határáig.

Widgetfa: Widget-től RenderObject-ig

Widget Tree – az alkalmazás UI-ját leíró widgetek hierarchikus szerkezete. A Flutter a Widget Tree-t Element Tree-vé alakítja: minden Widget létrehoz egy Element-et, amely nyomon követi a pozíciót a fában és a kapcsolatot a RenderObject-tel. A Render Tree végrehajtja a layout-ot (méretek és pozíciók meghatározása) és a paint-et (rajzolás). Az Element a kulcsfontosságú optimalizációs réteg: ha a widget típusa és a key nem változott a rebuild során, az Element újrahasznosításra kerül, frissítve a konfigurációt a RenderObject újbóli létrehozása nélkül. Ez biztosítja a Flutter teljesítményét magas képkockasebesség mellett (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 Widgetek')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Icon(Icons.flutter_dash, size: 80),
            const SizedBox(height: 16),
            const Text(
              'Helló, Flutter!',
              style: TextStyle(fontSize: 24),
            ),
          ],
        ),
      ),
    );
  }
}

A HomeScreen widgetfája: Scaffold → AppBar + Center → Column → [Icon, SizedBox, Text]. Scaffold – a Material Design fő layout widgetje. A Center középre igazítja a gyermek Column-t. A Column függőlegesen rendezi el a gyermekeket középre igazítással (mainAxisAlignment.center). A Flutter a layout-ot felülről lefelé számítja (a constraint-ek a szülőtől kerülnek átadásra), a méreteket pedig alulról felfelé (sizedByParent vagy sizing from children).

BuildContext: build kontextus és hozzáférés a fához

BuildContext – a widget pozíciójának leírója az Element Tree-ben. Minden build() metódus kap egy BuildContext-et, amelyen keresztül a widget hozzáférhet a következőkhöz:MediaQuery (képernyőméret, tájolás, pixelsűrűség, biztonságos terület), Theme (MaterialThemeData vagy CupertinoThemeData), Navigator (navigációs verem), ScaffoldMessenger (SnackBar), InheritedWidget (adatok továbbítása lefelé a fában). A BuildContext nem tárolható el a build() befejezése után, és nem használható szinkron kontextuson kívül – ez olyan hibákhoz vezet, mint a „Scaffold.of() called with a context that does not contain a Scaffold”. A context tárolása helyett használja a Builder widgetet vagy az InheritedWidget mintát az adatok eléréséhez.

Key: a widget azonosítása a fában

Key – minden widget konstruktorának opcionális paramétere (super.key). A Key segít a Flutter-nek a widget azonosításában a lista elemeinek sorrendjének/számának változásakor. Key nélkül a Flutter típus és pozíció alapján hasonlítja össze a widgeteket; amikor elemet adunk hozzá a lista közepéhez key nélkül, a Flutter a rossz widgethez használja újra az Element-et, ami állapot (StatefulWidget) és animációs hibákat okoz. Listákhoz használjon ValueKey-t (egyedi azonosító), ObjectKey-t (adatobjektum alapján), UniqueKey-t (garantáltan egyedi minden rebuild-nél – kényszerített újbóli létrehozáshoz).

Flutter widget katalógus: Material, Cupertino, Layout

A Flutter SDK (stabil verzió 3.3+, Dart 3+) 200+ beépített widgetet tartalmaz, kategóriákra bontva: 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) és Accessibility (Semantics, MergeSemantics, ExcludeSemantics). A Layout widgetek minden Flutter UI alapját képezik: Row vízszintes sorozatokhoz, Column függőlegesekhez, Stack átfedő elemekhez, Container BoxDecoration-nal díszítéshez.