Ce este Flutter și cum funcționează

Flutter este framework-ul open-source al Google pentru construirea de aplicații native cu compilare nativă pentru mobile, web și desktop dintr-o singură bază de cod. În practică, acest lucru înseamnă că poți livra produse pe iOS și Android simultan, reducând costurile de dezvoltare și timpul de piață cu până la 50%. Este esențial pentru angajatori deoarece oferă performanță apropiată de nativ, datorită compilării directe în ARM/x86, și o experiență de utilizator consistentă peste toate dispozitivele.

Concepte cheie

• Widget-based Architecture: Totul este un widget (UI elemente, layout, stiluri), iar structura aplicației este o ierarhie arborească de componente compozabile.
• Skia/Impeller Engine: Flutter folosește propriul motor grafic pentru a desena pixeli direct pe ecran, ocolind componentele native ale sistemului de operare pentru consistență vizuală.
• Dart Language: Limbajul de programare folosit, optimizat pentru UI, cu garbage collection rapid și suport pentru asincronizare modernă.
• Hot Reload: Mecanismul care permite reîncărcarea codului sursă în timpul execuției, păstrând starea aplicației, accelerând iterarea designului.
• State Management: Gestionarea datelor dinamice prin clase precum StatefulWidget sau pachete externe precum Provider/Riverpod pentru scalabilitate.
• Platform Channels: Mecanismul prin care Dart comunică cu codul nativ (Kotlin/Swift) pentru accesarea funcțiilor hardware specifice fiecărei platforme.

Exemplu practic

Un scenariu comun este crearea unui buton care schimbă culoarea fundalului la apăsare.

class ColorChanger extends StatefulWidget {
  @override
  _ColorChangerState createState() => _ColorChangerState();
}

class _ColorChangerState extends State<ColorChanger> {
  Color backgroundColor = Colors.white;

  void changeColor() {
    setState(() {
      backgroundColor = backgroundColor == Colors.white ? Colors.blue : Colors.white;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: changeColor,
          child: Text('Schimbă Culoarea'),
        ),
      ),
    );
  }
}

Aici, setState() notifică framework-ul să reconstruiască doar widget-urile afectate de schimbarea stării, asigurând o actualizare eficientă a UI-ului.

Greșeli frecvente

1. Abuzul de setState global: Actualizarea stării în widget-uri de nivel înalt pentru date simple cauzează reconstrucții inutile ale întregului arbore, ducând la lag.
2. Ignorarea responsivității: Construirea interfețelor cu dimensiuni fixe (width: 300) în loc să folosești Flexible, Expanded sau LayoutBuilder pentru a se adapta la diverse ecrane.
3. Blocarea thread-ului principal: Executarea operațiunilor grele (rețele, baze de date) în build() sau setState() blochează UI-ul; trebuie folosite async/await și FutureBuilder.

Întrebări de interviu

1. Care este diferența dintre StatelessWidget și StatefulWidget? StatelessWidget este imutabil după creare (ex: iconițe, text static), în timp ce StatefulWidget își poate schimba aspectul în funcție de date interne care evoluează în timp (ex: checkbox, formular).

2. Cum funcționează Hot Reload și când nu este suficient? Hot Reload injectează fișierele sursă actualizate în instanța Dart VM în curs de execuție. Nu funcționează dacă ai modificat structura arborelui widget sau variabile globale statice care necesită restart complet al aplicației.

3. Ce este BuildContext? Este un handle care identifică poziția unui widget în arborele de layout, permițând accesul la datele din widget-urile părinte (tema, navigatorul) și servind ca referință pentru construirea UI-ului.

Exercițiu

Creează o aplicație simplă de listă de sarcini (To-Do List) în 45 de minute. Include un câmp de text pentru adăugarea task-urilor și o listă scrollabilă care le afișează. La apăsarea pe un task, acesta trebuie marcat ca "finalizat" (schimbând culoarea textului în gri). Folosește ListView.builder pentru eficiență și gestionează starea cu setState într-un StatefulWidget.