Flutter în dezvoltarea mobilă: ce este, concepte cheie și cum funcționează

Flutter: bazele Widget, StatelessWidget și StatefulWidget

Widget — o descriere declarativă a unei părți din UI. Totul în Flutter este un Widget: de la un buton la aplicația însăși. Un Widget este configurare (nu UI-ul în sine). StatelessWidget — un Widget imutabil. build() este apelat o dată. Nu are stare. Folosit pentru conținut static. StatefulWidget — un Widget mutabil. Are un obiect State care se poate schimba. setState() — declanșează reconstruirea. State — un obiect mutabil legat de un StatefulWidget. Conține date care se pot schimba.

StatelessWidget vs StatefulWidget

StatelessWidget — build() este apelat o dată. Potrivit pentru antete, pictograme, texte statice. StatefulWidget — build() este apelat de fiecare dată când setState() este invocat. Potrivit pentru formulare, liste cu modificări, cronometre. InheritedWidget — transmiterea datelor în jos fără transmitere explicită prin constructori. Theme, MediaQuery, Navigator — InheritedWidget-uri. BuildContext — poziția unui Widget în arbore. context.of<T>, context.watch<T>, context.select<T,R> — acces la InheritedWidget.

// Exemplu Flutter Widget: StatefulWidget cu 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 — configurare. StatelessWidget — imutabil. StatefulWidget — mutabil cu setState(). IT Sectr recomandă să începeți cu StatelessWidget și să treceți la StatefulWidget doar când aveți nevoie de stare.

Arbori (Widget Tree, Element Tree, RenderObject Tree)

Flutter folosește trei arbori pentru randare eficientă. Widget Tree — arbore de configurare. Widget-urile sunt create frecvent (fiecare build), ușoare. Element Tree — arbore de elemente. Un element per Widget (dacă tipul nu se schimbă). Element — punte între Widget și RenderObject. RenderObject Tree — arbore de randare. Gestionează dimensiuni, poziții, desenare. RenderObject — greu, creat rar. Flutter compară Widget Tree și actualizează Element Tree, ceea ce declanșează actualizarea RenderObject Tree.

Keys și Element Tree

Key — identificator Widget în Element Tree. ValueKey, ObjectKey, UniqueKey, PageStorageKey. Key-urile permit Flutter să potrivească Widget-urile vechi și noi în timpul reconstruirii. Fără Key-uri, Flutter potrivește după tipul Widget și poziție. GlobalKey — acces la State dintr-un alt Widget. Folosit pentru: formulare complexe, animații, acces la State în teste. IT Sectr recomandă utilizarea Key-urilor pentru liste (List.generate) și evitarea GlobalKey decât dacă este necesar.

Expanded — Widget care umple spațiul disponibil în Row/Column/Flex. Flexible — nu forțează umplerea (poate fi mai mic). MediaQuery — InheritedWidget cu informații despre dispozitiv: dimensiune ecran, orientare, platformă, factor de scară text. Theme/ThemeData — temă centralizată. Theme.of(context) — acces. MaterialApp — Widget rădăcină pentru configurarea rutării, temelor, setărilor regionale. Scaffold — aspect de bază cu AppBar, Drawer, BottomNavigationBar. AppBar — panou superior.

Navigare (Navigator, Route)

Navigator — stivă de rute (Routes). Navigator.push — deschide ecran (returnează Future). Navigator.pop — închide (cu rezultat). MaterialPageRoute — tranziție animată (derapare din dreapta). Named Routes — identificatori de șir. onGenerateRoute — handler centralizat. Navigator 2.0 (Router + RouteInformationParser + RouterDelegate) — navigare declarativă pentru web, deep linking și scenarii complexe.

Navigator 2.0

Navigator 2.0 — navigare declarativă. Router — Widget central. RouteInformationParser — analizare URL. RouterDelegate — gestionarea stivei. GoRouter (pachet) — înveliș simplificat peste Navigator 2.0. Suportă: rute denumite, parametri, redirecționare, deep linking. IT Sectr recomandă GoRouter pentru majoritatea proiectelor și Navigator 2.0 doar pentru scenarii complexe (web, desktop).

Asincron (FutureBuilder, StreamBuilder)

FutureBuilder — Widget care construiește UI bazat pe un Future. connectionState: none, waiting, active, done. Folosit pentru: cereri HTTP, citiri BD, cronometre. StreamBuilder — Widget pentru Stream (flux infinit de date). snapshot.data, snapshot.hasError, snapshot.hasData. Folosit pentru: WebSocket, Firebase, actualizări de locație. Ambele Widget-uri se reconstruiesc la primirea de date noi.

Gestionarea stării

Provider — DI simplu + gestionarea stării. ChangeNotifierProvider, MultiProvider. Riverpod — înlocuitor modern pentru Provider: sigur la compilare, independent de BuildContext. Bloc — arhitectură Event-Driven: Cubit (evenimente simple) vs Bloc (complexe). GetX — gestionare ușoară a stării + DI + rutare. setState — cel mai simplu, pentru stare locală. IT Sectr recomandă Riverpod pentru proiecte noi și Provider pentru proiecte existente.

Teme și adaptare (MediaQuery, ThemeData)

MediaQuery — dimensiune ecran, orientare, platformă, textScaleFactor. MediaQuery.of(context).size.width. ThemeData — tema aplicației: culori, fonturi, forme. Theme.of(context).textTheme.bodyLarge. Hot Reload — injectare de cod într-o aplicație în execuție. Păstrează starea. Nu suportă: schimbarea main(), variabile globale, câmpuri statice. Hot Restart — repornire completă a aplicației (pierderea stării). Hot Reload — principalul avantaj al Flutter pentru dezvoltatori.

StatelessWidget — pentru conținut static. StatefulWidget — pentru conținut dinamic. InheritedWidget — pentru DI. IT Sectr recomandă StatelessWidget în mod implicit și StatefulWidget doar când este necesar.

Aspect responsive

LayoutBuilder — adaptare la dimensiunile părintelui. OrientationBuilder — adaptare la orientare. Expanded vs Flexible — distribuirea spațiului în Row/Column. MediaQuery — puncte de întrerupere pentru tablete și desktopuri. SafeArea — margini de la elementele sistemului (notch, bara de stare). AspectRatio — menținerea proporțiilor. IT Sectr recomandă LayoutBuilder pentru aspecte adaptive și OrientationBuilder pentru orientare peisaj.

Testare (Widget, Integration, Unit)

Teste unitare — testarea logicii de afaceri, depozitelor, modelelor. dart test — rulare. Teste Widget — testarea widget-urilor în izolare. WidgetTester — pumpWidget, tap, enterText. Teste de integrare — scenarii complete pe un dispozitiv/emulator real. Mockito — simularea dependențelor. Golden teste — comparație de capturi de ecran (fișiere golden). IT Sectr recomandă teste Widget pentru fiecare ecran și teste unitare pentru logica de afaceri.

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

Animații (Implicite, Explicite, Hero)

Animații implicite — AnimatedContainer, AnimatedOpacity, AnimatedPadding, TweenAnimationBuilder. Modificările de proprietăți se animează automat. Animații explicite — AnimationController cu Tween. forward() / reverse(). Animație Hero — Widget Hero cu un tag — animație de tranziție între ecrane. Animație eșalonată — lanț de animații cu Interval. Lottie — integrare animații After Effects. Rive — animații interactive (state machine). IT Sectr recomandă AnimatedContainer pentru 80% din cazuri și AnimationController pentru scenarii complexe.

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

Rețea (http, dio, graphql)

http — client HTTP simplu (get, post, put, delete). dio — client avansat cu interceptori, timeout-uri, reîncercări, logare. graphql_flutter — client GraphQL pentru Flutter. json_serializable — generare fromJson/toJson prin adnotări. Retrofit Dart — client HTTP type-safe ca Retrofit. WebSocket — prin web_socket_channel. Firebase — Cloud Firestore, Realtime Database, Cloud Functions. IT Sectr recomandă dio pentru REST API și graphql_flutter pentru GraphQL.

Flutter DevTools — set de instrumente: Inspector (arbore widget), Timeline (performanță), Memory, Network, Logging. Profile mode — profilare fără depanare. Performance overlay — FPS, timpi de build. Flame chart — diagramă flacără. DevTools — instrument esențial pentru optimizarea aplicațiilor Flutter în producție.

Flutter Web — compilarea Flutter în WASM (WebAssembly). CanvasKit (Skia) vs HTML renderer. CanvasKit — pixel-perfect, dar mai greu. HTML renderer — ușor, dar cu limitări. WASM (Flutter 3.22+) — performanță nativă. Adaptare responsive prin LayoutBuilder și MediaQuery. IT Sectr recomandă CanvasKit pentru aplicații web desktop și HTML renderer pentru site-uri de conținut.