Flutter — concepte cheie, arhitectură și widgeturi

Ce este Flutter

Flutter este un SDK (Software Development Kit) și framework pentru crearea de interfețe de utilizator, anunțat de Google în 2015. Prima versiune stabilă Flutter 1.0 a fost lansată în decembrie 2018. Spre deosebire de React Native, Flutter nu folosește o punte între JavaScript și codul nativ — se compilează direct în instrucțiuni native ale procesorului.

Caracteristica cheie a Flutter este propriul motor de randare. Framework-ul nu se bazează pe UIKit (iOS) sau sistemul View Android. În schimb, Flutter desenează fiecare pixel independent prin Skia (până în 2024) sau noul motor Impeller. Aceasta garantează același aspect al aplicației pe toate platformele și elimină problemele de adaptare la diferite versiuni de OS.

Conform datelor Statista 2024, Flutter ocupă primul loc printre framework-urile cross-platform ca popularitate: aproximativ 46% dintre dezvoltatori îl folosesc pentru dezvoltare mobilă. Framework-ul este utilizat în proiecte Google Pay, Alibaba, eBay, BMW și Tencent.

Istoria și versiunile Flutter

Prima versiune alpha a Flutter a fost prezentată la Dart Developer Summit în 2015 sub numele Sky. În 2018 a fost lansat Flutter 1.0 cu suport doar pentru iOS și Android. Flutter 2.0 (2021) a adăugat Web și Desktop. Flutter 3.0 (2022) a introdus suport stabil pentru macOS și Linux. Flutter 3.16 (2023) a prezentat Impeller — un nou motor de randare bazat pe Metal și Vulkan.

Versiunea Flutter 3.22 (2024) include Impeller implicit pe iOS, suport îmbunătățit pentru Material Design 3, Dart 3.4 cu extensii de macro și suport încorporat pentru Native Assets pentru acces direct la resursele platformei. Google raportează că Impeller reduce pierderile de cadre (jank) cu 90% față de Skia.

Limbajul Dart

Dart este un limbaj de programare creat de Google în 2011 și folosit în Flutter. Dart combină tipizarea strictă cu capacitățile de compilare JIT (pentru Hot Reload) și compilare AOT (pentru versiunile de producție). Versiunea Dart 3.0 (2023) a introdus pattern matching, sealed class și records ca funcții stabile.

Null safety în Dart — o funcție obligatorie introdusă din versiunea 2.12. Compilatorul verifică toate tipurile nullable în faza de construire, eliminând NullPointerException în runtime. Tipurile de date (int, String, bool) sunt implicit non-nullable, iar pentru valorile nullable se folosește sufixul ? (de exemplu, String? name).

Arhitectura Flutter

Arhitectura Flutter este construită pe principiul a trei niveluri. Nivelul inferior — motorul (C/C++), responsabil pentru randare, intrare/ieșire și acces la API-urile platformei. Nivelul mediu — framework-ul (Dart), care implementează sistemul de widgeturi, gesturi, animații și navigație. Nivelul superior — aplicația (Dart), care adună widgeturile într-un arbore.

Widgeturi și arborele de widgeturi

În Flutter totul este un widget. Widgeturile sunt de două tipuri: StatelessWidget (imutabil, nu stochează stare) și StatefulWidget (mutabil, gestionează starea prin State). Arborele de widgeturi (Widget Tree) este o structură ierarhică în care fiecare widget copil este imbricat în părinte. Scaffold, AppBar, Container, Text, Column, Row — blocurile de bază.

BuildContext este un obiect care transmite poziția widgetului în arbore. MediaQuery.of(context) obține dimensiunile ecranului, Theme.of(context) — tema curentă. BuildContext este folosit pentru navigație (Navigator.of(context)), acces la InheritedWidget și traducere locale prin Localizations.of.

Motorul Impeller

Impeller este un motor de randare modern Flutter, scris în C++ și care folosește Metal (iOS/macOS) și Vulkan (Android). Spre deosebire de Skia, care redesena fiecare cadru de la zero, Impeller compilează shaderele în avans și le stochează în cache. Aceasta elimină întârzierile la prima randare a scenelor complexe și reduce încărcarea GPU.

Testele Google Flutter Team arată că Impeller reduce timpul de compilare a shaderelor de la 200–500 ms (Skia) la 1–3 ms. Pe iPhone 13 Pro, randarea Impeller atinge 120 FPS fără pierderi de cadre. Pe Android cu Vulkan, 60 FPS stabile chiar și pe dispozitive mid-range (Xiaomi Redmi Note 12).

Exemplu de aplicație în Flutter

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('Aplicația Flutter')),
        body: const Center(
          child: Text('Salut, Flutter!'),
        ),
      ),
    );
  }
}

Avantajele Flutter

Bază de cod unică — principalul avantaj al Flutter. Un singur proiect în Dart se compilează pentru iOS, Android, Web, Windows, macOS și Linux. Conform estimărilor Google, aceasta reduce timpul de dezvoltare cu 30–50% față de proiecte separate iOS și Android. Alibaba a redus timpul de lansare a versiunilor cu 30% după trecerea la Flutter.

Performanța Flutter este aproape de cea nativă. Compilarea AOT a Dart în cod mașină ARM și x86_64 elimină întârzierile de interpretare. Motorul Impeller garantează 60 FPS chiar și pe dispozitive din 2018 (iPhone XR, Samsung Galaxy S9). Potrivit Google, 99.5% dintre cadrele din aplicațiile Flutter sunt randate fără pierderi.

Hot Reload — tehnologia de actualizare instantanee a codului. Dezvoltatorul modifică codul sursă, salvează fișierul, iar Flutter reconstruiește arborele de widgeturi în 300–800 ms fără a pierde starea curentă a aplicației. Aceasta accelerează iterațiile de design UI: se pot schimba marginile, culorile și animațiile în secunde, fără a aștepta reconstruirea completă.

Material Design 3 și propriul limbaj de design Cupertino (stil iOS) sunt incluse în pachetul standard Flutter. Widgeturile Material 3 suportă culori dinamice (Material You), layout adaptiv și animație de tranziție între ecrane. CupertinoPageTransition și CupertinoNavigationBar imită comportamentul navigatorului nativ iOS.

Personalizarea widgeturilor nu necesită crearea de View-uri personalizate pe fiecare platformă. Este suficient să suprascrieți build() și să returnați un widget nou. Pachetele animation (AnimatedContainer, Hero, TweenAnimationBuilder) și gesture (GestureDetector, Dismissible) acoperă 95% din scenariile de animație UI fără a scrie cod de platformă.

Ecosistemul și pachetele Flutter

pub.dev — registrul oficial de pachete pentru Dart și Flutter. În iulie 2024, în registru erau publicate peste 45 000 de pachete. Instalarea unui pachet se face cu comanda flutter pub add . Pub rezolvă automat dependențele, verifică compatibilitatea versiunilor și generează pubspec.lock.

Gestionarea stării în Flutter — una dintre sarcinile arhitecturale cheie. Pe lângă flutter_bloc, soluții populare: Provider (recomandat de Google, folosește InheritedWidget), Riverpod (versiune reproiectată a Provider cu siguranță la compilare) și GetX (totul-într-unul: stare, rutare, DI). Provider rămâne cel mai simplu de început: ChangeNotifierProvider încapsulează modelul, iar Consumer redesenează widgetul la modificarea datelor.

Testarea în Flutter este suportată la trei niveluri. Testele unitare (flutter test) verifică funcțiile și clasele fără UI. Testele de widget (testWidgets) randau widgeturi individuale într-un mediu izolat. Testele de integrare (IntegrationTest) rulează aplicația completă pe un dispozitiv sau simulator. Flutter 3.22 a adăugat suport pentru testele de patch prin analiză de patch și raport îmbunătățit de acoperire a codului.

Pachete populare

dio — client HTTP cu suport pentru interceptoare, timeout-uri și FormData. Folosit în 40% din proiectele Flutter pe GitHub. Dio suportă interceptarea cererilor pentru logare, reîncercări și adăugarea de token-uri de autorizare. A doua cea mai populară bibliotecă — retrofit, generează clienți API tipizați.

flutter_bloc — bibliotecă de gestionare a stării bazată pe pattern-ul BLoC (Business Logic Component). BlocProvider transmite stările în josul arborelui de widgeturi, BlocBuilder redesenează UI la schimbarea stării, iar BlocListener execută efecte secundare (navigație, SnackBar). Cubet — versiune simplificată a BLoC fără evenimente.

go_router — navigație declarativă pentru Flutter de la Google. Rutele sunt descrise în configurația GoRouter cu suport pentru rute imbricate, redirecționări și deep link-uri. ShellRoute împarte navigația pe filele BottomNavigationBar. GoRouter 14.0 suportă căi type-safe și StatefulShellRoute cu păstrarea stării filelor.