Flutter — kulcsfogalmak, architektúra és widgetek

Mi az a Flutter

A Flutter egy SDK (Software Development Kit) és keretrendszer felhasználói felületek létrehozásához, amelyet a Google 2015-ben jelentett be. Az első stabil verzió, a Flutter 1.0 2018 decemberében jelent meg. A React Native-tól eltérően a Flutter nem használ hidat a JavaScript és a natív kód között — közvetlenül a processzor natív utasításaira fordít.

A Flutter legfontosabb jellemzője a saját renderelő motor. A keretrendszer nem támaszkodik az UIKit-re (iOS) vagy az Android View rendszerére. Ehelyett a Flutter minden pixelt önállóan rajzol meg a Skia (2024-ig) vagy az új Impeller motor segítségével. Ez garantálja az alkalmazás egységes megjelenését minden platformon, és kiküszöböli a különböző OS-verziókhoz való alkalmazkodás problémáit.

A Statista 2024 adatai szerint a Flutter az első helyen áll a cross-platform keretrendszerek népszerűségi listáján: a fejlesztők körülbelül 46%-a használja mobilfejlesztésre. A keretrendszert a Google Pay, Alibaba, eBay, BMW és Tencent projektjeiben alkalmazzák.

A Flutter története és verziói

Az első Flutter alfa verziót a Dart Developer Summiton mutatták be 2015-ben Sky néven. 2018-ban jelent meg a Flutter 1.0 csak iOS és Android támogatással. A Flutter 2.0 (2021) hozzáadta a Web és Desktop támogatást. A Flutter 3.0 (2022) bevezette a macOS és Linux stabil támogatását. A Flutter 3.16 (2023) bemutatta az Impellert — a Metalra és Vulkanra épülő új renderelő motort.

A Flutter 3.22 verzió (2024) alapértelmezetten tartalmazza az Impellert iOS-en, továbbfejlesztett Material Design 3 támogatást, Dart 3.4-et makróbővítményekkel és beépített Native Assets támogatást a platformerőforrások közvetlen eléréséhez. A Google jelentése szerint az Impeller 90%-kal csökkenti a képkocka-kiesést (jank) a Skiához képest.

A Dart nyelv

A Dart egy programozási nyelv, amelyet a Google hozott létre 2011-ben, és a Flutterben használják. A Dart szigorú típusosságot kombinál a JIT-fordítás (Hot Reloadhoz) és az AOT-fordítás (éles verziókhoz) képességeivel. A Dart 3.0 (2023) bevezette a pattern matching, sealed class és records funkciókat stabil jellemzőkként.

Null safety a Dartban — kötelező funkció a 2.12-es verziótól kezdve. A fordító ellenőrzi az összes nullable típust a build fázisban, kiküszöbölve a NullPointerException-t futásidőben. Az adattípusok (int, String, bool) alapértelmezetten non-nullable-ek, a nullable értékekhez pedig a ? utótagot használjuk (pl. String? name).

Flutter architektúra

A Flutter architektúra háromrétegű elven épül fel. Az alsó réteg — a motor (C/C++), felelős a renderelésért, be-/kimenetért és a platform API-khoz való hozzáférésért. A középső réteg — a keretrendszer (Dart), amely megvalósítja a widgetek, gesztusok, animációk és navigáció rendszerét. A felső réteg — az alkalmazás (Dart), amely widgeteket gyűjt egy fába.

Widgetek és a widgetfa

A Flutterben minden widget. A widgetek két típusúak: StatelessWidget (változatlan, nem tárol állapotot) és StatefulWidget (változó, az állapotot State-en keresztül kezeli). A widgetfa (Widget Tree) egy hierarchikus struktúra, ahol minden gyermek widget egy szülőbe van ágyazva. Scaffold, AppBar, Container, Text, Column, Row — az alapvető építőelemek.

A BuildContext egy objektum, amely átadja a widget pozícióját a fában. A MediaQuery.of(context) lekéri a képernyő méreteit, a Theme.of(context) — az aktuális témát. A BuildContext navigációra (Navigator.of(context)), InheritedWidget elérésére és locale fordításra használható a Localizations.of segítségével.

Az Impeller motor

Az Impeller egy modern Flutter renderelő motor, C++-ban írva, amely Metalt (iOS/macOS) és Vulkant (Android) használ. A Skiától eltérően, amely minden képkockát a nulláról rajzolt újra, az Impeller előre lefordítja a shadereket és eltárolja őket a gyorsítótárban. Ez kiküszöböli a késéseket az összetett jelenetek első renderelésekor és csökkenti a GPU terhelését.

A Google Flutter Team tesztjei azt mutatják, hogy az Impeller 200–500 ms-ról (Skia) 1–3 ms-ra csökkenti a shader fordítási idejét. iPhone 13 Pro-n az Impeller renderelés képkockavesztés nélkül eléri a 120 FPS-t. Androidon Vulkan-nel stabil 60 FPS még középkategóriás eszközökön is (Xiaomi Redmi Note 12).

Példaalkalmazás Flutterben

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('Flutter App')),
        body: const Center(
          child: Text('Helló, Flutter!'),
        ),
      ),
    );
  }
}

A Flutter előnyei

Egységes kódbázis — a Flutter fő előnye. Egy Dart projekt lefordul iOS, Android, Web, Windows, macOS és Linux rendszerekre. A Google becslése szerint ez 30–50%-kal csökkenti a fejlesztési időt a különálló iOS és Android projektekhez képest. Az Alibaba 30%-kal csökkentette a verziók kiadási idejét a Flutterre való áttérés után.

Teljesítmény tekintetében a Flutter közelít a natívhoz. A Dart AOT fordítása ARM és x86_64 gépi kódra kiküszöböli az interpretációs késéseket. Az Impeller motor 60 FPS-t garantál még a 2018-as eszközökön is (iPhone XR, Samsung Galaxy S9). A Google szerint a Flutter alkalmazásokban a képkockák 99,5%-a veszteség nélkül renderelődik.

Hot Reload — a kód azonnali frissítésének technológiája. A fejlesztő módosítja a forráskódot, elmenti a fájlt, és a Flutter 300–800 ms alatt újraépíti a widgetfát az alkalmazás aktuális állapotának elvesztése nélkül. Ez felgyorsítja a UI-tervezési iterációkat: a margók, színek és animációk másodpercek alatt módosíthatók anélkül, hogy meg kellene várni a teljes újraépítést.

Material Design 3 és a saját Cupertino dizájnyelv (iOS stílus) a Flutter alapcsomagjának részét képezik. A Material 3 widgetek támogatják a dinamikus színeket (Material You), az adaptív elrendezést és a képernyők közötti átmeneti animációt. A CupertinoPageTransition és CupertinoNavigationBar a natív iOS navigátor viselkedését utánozza.

A widgetek testreszabása nem igényel egyedi View-k létrehozását minden platformon. Elég felülírni a build()-et és visszaadni egy új widgetet. Az animation (AnimatedContainer, Hero, TweenAnimationBuilder) és gesture (GestureDetector, Dismissible) csomagok a UI-animációs forgatókönyvek 95%-át lefedik platformkód írása nélkül.

Flutter ökoszisztéma és csomagok

A pub.dev a Dart és Flutter hivatalos csomagregisztere. 2024 júliusáig több mint 45 000 csomagot publikáltak a regiszterben. A csomag telepítése a flutter pub add paranccsal történik. A Pub automatikusan feloldja a függőségeket, ellenőrzi a verziókompatibilitást és létrehozza a pubspec.lock fájlt.

Állapotkezelés a Flutterben — az egyik legfontosabb architekturális feladat. A flutter_bloc mellett népszerű megoldások: Provider (a Google által ajánlott, InheritedWidget-et használ), Riverpod (a Provider átdolgozott verziója fordítási idő biztonsággal) és GetX (minden-az-egyben: állapot, útválasztás, DI). A Provider marad a legegyszerűbb a kezdéshez: a ChangeNotifierProvider becsomagolja a modellt, a Consumer pedig újrarajzolja a widgetet az adatok változásakor.

Tesztelés a Flutterben három szinten támogatott. Az egységtesztek (flutter test) funkciókat és osztályokat ellenőriznek UI nélkül. A widget tesztek (testWidgets) egyes widgeteket renderelnek elkülönített környezetben. Az integrációs tesztek (IntegrationTest) a teljes alkalmazást futtatják eszközön vagy szimulátoron. A Flutter 3.22 támogatást adott a patch tesztekhez patch analitika és továbbfejlesztett kódlefedettségi jelentés révén.

Népszerű csomagok

dio — HTTP kliens interceptor, timeout és FormData támogatással. A GitHubon lévő Flutter projektek 40%-ában használják. A Dio támogatja a kérések elfogását naplózáshoz, újrapróbálkozáshoz és hitelesítési tokenek hozzáadásához. A második legnépszerűbb könyvtár — a retrofit, típusos API klienseket generál.

flutter_bloc — állapotkezelő könyvtár a BLoC (Business Logic Component) minta alapján. A BlocProvider állapotokat ad le a widgetfában, a BlocBuilder újrarajzolja a UI-t állapotváltozáskor, a BlocListener pedig mellékhatásokat hajt végre (navigáció, SnackBar). A Cubet — a BLoC egyszerűsített verziója események nélkül.

go_router — deklaratív navigáció Flutterhez a Google-tól. Az útvonalakat a GoRouter konfigurációban írjuk le beágyazott útvonalak, átirányítások és deep linkek támogatásával. A ShellRoute a navigációt BottomNavigationBar lapokra osztja. A GoRouter 14.0 támogatja a type-safe útvonalakat és a StatefulShellRoute-ot a lapok állapotának megőrzésével.