Introducere în Flutter

Flutter este framework-ul open-source al Google pentru dezvoltarea de aplicații native cu performanță ridicată pentru Android, iOS, Web și Desktop dintr-o singură bază de cod. În practică, acest lucru reduce semnificativ costurile și timpul de piață, permițând echipelor să mențină un singur repository și o singură echipă de dezvoltare. Popularitatea sa explozivă se datorează sistemului său de widget-uri reactive, care asigură o experiență utilizator fluidă și consistentă pe toate platformele. Pentru un developer care dorește să lucreze în domeniu, stăpânirea Flutter nu este doar o opțiune, ci adesea o cerință directă a angajatorilor din sectorul startup-urilor și al companiilor de software service.

Concepte cheie

• Widget-uri: Tot în Flutter este un widget, de la elemente simple precum text sau butoane, până la structuri complexe de layout; acestea sunt blocurile fundamentale de construcție a interfeței.
• Declarativ UI: Descrii cum ar trebui să arate interfața pentru o stare dată, iar framework-ul se ocupă de actualizarea DOM-ului virtual și renderarea eficientă a schimbărilor.
• Hot Reload: O funcție vitală pentru productivitate, care permite reîncărcarea codului modificat în aplicație fără a pierde starea curentă, accelerând ciclul de dezvoltare și testare vizuală.
• State Management: Gestionarea datelor și a stării aplicației (local vs global) este crucială pentru scalabilitate; soluții precum Provider, Riverpod sau Bloc sunt standarde în industrie.
• Asincronie (Async/Await): Flutter rulează pe un singur thread principal (Isolate); operațiile grele sau de rețea trebuie gestionate asincron pentru a nu bloca interfața utilizatorului.
• Platform Channels: Mecanismul prin care codul Dart comunică cu API-urile native ale platformei (Android/iOS), necesar pentru accesarea hardware-ului sau a serviciilor specifice.
• Pub.dev: Depozitul oficial de pachete unde găsești librării terțe pentru orice funcționalitate, de la navigare la autentificare, evitând reinventarea roții.

Exemplu practic

Să presupunem că vrei să creezi un buton simplu care afișează un mesaj când este apăsat. În loc să manipulezi manual elementele DOM, definești o stare (counter) și o funcție de incrementare.

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Demo')),
        body: Center(child: Text('Apasă: $_counter')),
        floatingActionButton: FloatingActionButton(onPressed: _incrementCounter),
      ),
    );
  }
}

Aici, setState informează framework-ul că starea s-a schimbat, declanșând o reconstrucție a widget-ului relevant. Este esențial să înțelegi că build este apelat frecvent; logica grea nu trebuie pusă aici.

Greșeli frecvente

1. Punerea logicii grele în build: Funcția build trebuie să fie rapidă și pură. Dacă pui calcule complexe sau apeluri API direct în ea, interfața va deveni lag-uită.
2. Ignorarea const constructor: Utilizarea excesivă a cuvântului cheie const pentru widget-ile statice reduce memoria și îmbunătățește performanța renderării.
3. Gestionarea slabă a stării: Încercarea de a trece date prin constructori pentru niveluri adânci („prop drilling") duce la cod fragil; folosește un manager de stare adecvat.
4. Neînțelegerea asincronității: Așteptarea unui rezultat async într-un mod sincron blochează thread-ul principal, înghețând aplicația.

Întrebări de interviu

Care este diferența dintre StatelessWidget și StatefulWidget? Un StatelessWidget nu își schimbă aspectul după inițializare și nu păstrează stare internă, fiind ideal pentru UI static. Un StatefulWidget poate schimba aspectul dinamic în timp ce aplicația rulează, păstrând o stare care poate fi citită în timpul build-ului.

Ce face BuildContext? Este o referință la poziția unui widget în arborele widget-urilor. Este folosit pentru a accesa informații despre widget-ii părinți sau pentru a deschide dialoguri și naviga între pagini.

Cum funcționează Hot Reload? Injectează fișierele sursă modificate în instanța Dart VM în timp ce aplicația rulează, păstrând starea curentă, spre deosebire de Hot Restart care resetează aplicația.

Exercițiu

Creează o aplicație simplă de listă de sarcini (To-Do List). Trebuie să poți adăuga o sarcină nouă printr-un câmp de text și un buton, și să ștergi o sarcină apăsând pe ea. Folosește un ListView.builder pentru a rendera lista și implementează o gestionare de stare locală (fără librării externe) pentru a ține evidența sarcinilor. Timp estimat: 45 de minute.