Flutter a mobilfejlesztésben: mi ez, alapfogalmak és működés

Flutter: a Widget, StatelessWidget és StatefulWidget alapjai

Widget — a UI egy részének deklaratív leírása. A Flutterben minden Widget: egy gombtól az alkalmazásig. A Widget konfiguráció (nem maga a UI). StatelessWidget — egy változatlan Widget. A build() egyszer hívódik meg. Nincs állapota. Statikus tartalomhoz használatos. StatefulWidget — egy változó Widget. Van egy State objektuma, amely változhat. A setState() — újraépítést indít el. State — egy változó objektum, amely egy StatefulWidget-hoz van kötve. Olyan adatokat tartalmaz, amelyek változhatnak.

StatelessWidget vs StatefulWidget

StatelessWidget — a build() egyszer hívódik meg. Fejlécekhez, ikonokhoz, statikus szövegekhez alkalmas. StatefulWidget — a build() minden setState() híváskor meghívódik. Űrlapokhoz, változó listákhoz, időzítőkhöz alkalmas. InheritedWidget — adatok továbbítása lefelé anélkül, hogy explicit módon átadnánk a konstruktorokon keresztül. Theme, MediaQuery, Navigator — InheritedWidget-ok. BuildContext — egy Widget pozíciója a fában. context.of<T>, context.watch<T>, context.select<T,R> — hozzáférés az InheritedWidget-hoz.

// Példa Flutter Widget: StatefulWidget setState-tel
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 — konfiguráció. StatelessWidget — változatlan. StatefulWidget — változó setState()-tel. Az IT Sectr azt javasolja, hogy StatelessWidget-dal kezdje, és csak akkor váltson StatefulWidget-ra, ha állapotra van szüksége.

Fák (Widget Tree, Element Tree, RenderObject Tree)

A Flutter három fát használ a hatékony megjelenítéshez. Widget Tree — konfigurációs fa. A Widget-ek gyakran jönnek létre (minden build), könnyűek. Element Tree — elemfa. Egy elem Widget-enként (ha a típus nem változik). Element — híd a Widget és a RenderObject között. RenderObject Tree — megjelenítési fa. Méreteket, pozíciókat, rajzolást kezel. RenderObject — nehéz, ritkán jön létre. A Flutter összehasonlítja a Widget Tree-t és frissíti az Element Tree-t, ami elindítja a RenderObject Tree frissítését.

Keys és Element Tree

Key — Widget azonosító az Element Tree-ben. ValueKey, ObjectKey, UniqueKey, PageStorageKey. A Key-ek lehetővé teszik a Flutter számára, hogy a régi és új Widget-eket párosítsa az újraépítés során. Key-ek nélkül a Flutter Widget típus és pozíció szerint párosít. GlobalKey — hozzáférés a State-hez egy másik Widget-ből. Használata: összetett űrlapok, animációk, State hozzáférés tesztekben. Az IT Sectr javasolja a Key-ek használatát listákhoz (List.generate) és a GlobalKey kerülését, hacsak nem szükséges.

Expanded — Widget, amely kitölti a rendelkezésre álló helyet a Row/Column/Flex-ben. Flexible — nem kényszeríti a kitöltést (kisebb lehet). MediaQuery — InheritedWidget eszközinformációkkal: képernyőméret, tájolás, platform, szöveg méretezési tényező. Theme/ThemeData — központosított téma. Theme.of(context) — hozzáférés. MaterialApp — gyökér Widget az útválasztás, témák, lokalizáció konfigurálásához. Scaffold — alap elrendezés AppBar, Drawer, BottomNavigationBar elemekkel. AppBar — felső panel.

Navigáció (Navigator, Route)

Navigator — útvonal verem (Routes). Navigator.push — képernyő megnyitása (Future-t ad vissza). Navigator.pop — bezárás (eredménnyel). MaterialPageRoute — animált átmenet (csúsztatás jobbról). Named Routes — szöveges azonosítók. onGenerateRoute — központosított kezelő. Navigator 2.0 (Router + RouteInformationParser + RouterDelegate) — deklaratív navigáció webhez, mélyhivatkozáshoz és összetett forgatókönyvekhez.

Navigator 2.0

Navigator 2.0 — deklaratív navigáció. Router — központi Widget. RouteInformationParser — URL elemzés. RouterDelegate — verem kezelés. GoRouter (csomag) — egyszerűsített burkoló a Navigator 2.0 fölött. Támogatja: elnevezett útvonalak, paraméterek, átirányítás, mélyhivatkozás. Az IT Sectr a GoRouter-t ajánlja a legtöbb projekthez, és a Navigator 2.0-t csak összetett forgatókönyvekhez (web, asztali).

Aszinkron (FutureBuilder, StreamBuilder)

FutureBuilder — Widget, amely a UI-t egy Future alapján építi fel. connectionState: none, waiting, active, done. Használata: HTTP kérések, adatbázis olvasás, időzítők. StreamBuilder — Widget Stream-hez (végtelen adatfolyam). snapshot.data, snapshot.hasError, snapshot.hasData. Használata: WebSocket, Firebase, helyzetfrissítések. Mindkét Widget új adatok érkezésekor újraépül.

Állapotkezelés

Provider — egyszerű DI + állapotkezelés. ChangeNotifierProvider, MultiProvider. Riverpod — a Provider modern helyettesítője: fordításbiztos, független a BuildContext-től. Bloc — Event-Driven architektúra: Cubit (egyszerű események) vs Bloc (összetett). GetX — könnyű állapotkezelés + DI + útválasztás. setState — a legegyszerűbb, helyi állapothoz. Az IT Sectr a Riverpod-ot ajánlja új projektekhez és a Provider-t meglévő projektekhez.

Témák és alkalmazkodás (MediaQuery, ThemeData)

MediaQuery — képernyőméret, tájolás, platform, textScaleFactor. MediaQuery.of(context).size.width. ThemeData — alkalmazás téma: színek, betűtípusok, formák. Theme.of(context).textTheme.bodyLarge. Hot Reload — kód injektálás futó alkalmazásba. Megőrzi az állapotot. Nem támogatja: main() módosítása, globális változók, statikus mezők. Hot Restart — teljes alkalmazás újraindítás (állapotvesztés). Hot Reload — a Flutter fő előnye a fejlesztők számára.

StatelessWidget — statikus tartalomhoz. StatefulWidget — dinamikus tartalomhoz. InheritedWidget — DI-hez. Az IT Sectr alapértelmezésként a StatelessWidget-et ajánlja, és a StatefulWidget-et csak szükség esetén.

Reszponzív elrendezés

LayoutBuilder — alkalmazkodás a szülő méreteihez. OrientationBuilder — alkalmazkodás a tájoláshoz. Expanded vs Flexible — helyelosztás a Row/Column-ban. MediaQuery — töréspontok táblagépekhez és asztali gépekhez. SafeArea — margók a rendszerelemektől (notch, állapotsor). AspectRatio — arányok megtartása. Az IT Sectr a LayoutBuilder-t ajánlja adaptív elrendezésekhez és az OrientationBuilder-t fekvő tájoláshoz.

Tesztelés (Widget, Integration, Unit)

Egységtesztek — üzleti logika, tárolók, modellek tesztelése. dart test — futtatás. Widget tesztek — widget-ek elkülönített tesztelése. WidgetTester — pumpWidget, tap, enterText. Integrációs tesztek — teljes forgatókönyvek valós eszközön/emulátoron. Mockito — függőségek mock-olása. Golden tesztek — képernyőkép összehasonlítás (golden fájlok). Az IT Sectr Widget teszteket ajánl minden képernyőhöz és egységteszteket az üzleti logikához.

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

Animációk (Implicit, Explicit, Hero)

Implicit animációk — AnimatedContainer, AnimatedOpacity, AnimatedPadding, TweenAnimationBuilder. A tulajdonságváltozások automatikusan animálódnak. Explicit animációk — AnimationController Tween-nel. forward() / reverse(). Hero animáció — Hero Widget címkével — átmenet animáció képernyők között. Lépcsőzetes animáció — animációs lánc Interval-lal. Lottie — After Effects animációk integrálása. Rive — interaktív animációk (state machine). Az IT Sectr az AnimatedContainer-t ajánlja az esetek 80%-ában és az AnimationController-t összetett forgatókönyvekhez.

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

Hálózat (http, dio, graphql)

http — egyszerű HTTP kliens (get, post, put, delete). dio — fejlett kliens elfogókkal, időtúllépésekkel, újrapróbálkozással, naplózással. graphql_flutter — GraphQL kliens Flutter-hez. json_serializable — fromJson/toJson generálás annotációkkal. Retrofit Dart — type-safe HTTP kliens, mint a Retrofit. WebSocket — web_socket_channel-en keresztül. Firebase — Cloud Firestore, Realtime Database, Cloud Functions. Az IT Sectr a dio-t ajánlja REST API-hoz és a graphql_flutter-t GraphQL-hez.

Flutter DevTools — eszközkészlet: Inspector (widget fa), Timeline (teljesítmény), Memory, Network, Logging. Profile mode — profilozás hibakeresés nélkül. Performance overlay — FPS, build idők. Flame chart — láng diagram nyomkövetés. DevTools — elengedhetetlen eszköz a Flutter alkalmazások optimalizálásához élesben.

Flutter Web — a Flutter fordítása WASM-ra (WebAssembly). CanvasKit (Skia) vs HTML renderer. CanvasKit — pixel-tökéletes, de nehezebb. HTML renderer — könnyű, de korlátozásokkal. WASM (Flutter 3.22+) — natív teljesítmény. Reszponzív alkalmazkodás LayoutBuilder és MediaQuery segítségével. Az IT Sectr a CanvasKit-t ajánlja asztali webalkalmazásokhoz és a HTML renderer-t tartalmi oldalakhoz.