Sobes.tech
Middle+

Ce știi despre structura internă a Flutter?

sobes.tech AI

Răspuns de la AI

Nucleul Flutter constă din motor, cadru și widget-uri.

  • Motorul Flutter: Scris în C++ și oferă o API de nivel scăzut pentru randare, lucru cu text, fire și plugin-uri. Interacționează direct cu platforma (iOS, Android, Web, Desktop) și API-urile grafice (de exemplu, Skia). Motorul gestionează randarea, operațiunile asincrone și ciclul de viață al aplicației.

  • Cadru Flutter (Framework): Scris în Dart și oferă un strat de abstracție peste motor. Include mai multe componente gata de utilizare:

    • Foundation: Clase de bază și funcții auxiliare.
    • Rendering: Strat pentru gestionarea arborelui de obiecte de randare și desenarea acestora.
    • Widgets: Blocuri de construcție UI de bază care formează arborele de widget-uri.
    • Material Design și Cupertino: Seturi de widget-uri care implementează stiluri Material Design și design în stil iOS.
  • Widget-uri: În Flutter, totul este un widget. Widget-urile descriu configurația UI. Există două tipuri principale:

    • StatelessWidget: Widget fără stare internă mutabilă. UI-ul său depinde doar de parametrii de intrare (properties).
    • StatefulWidget: Widget care poate avea o stare mutabilă. Este format din widget-ul în sine și un obiect State, unde se stochează starea și logica de construire a UI-ului (build).

Procesul de randare:

  1. Build: Framework-ul apelează metoda build() a widget-ului, care returnează un arbore de alte widget-uri.
  2. Element Tree: Pe baza arborelui de widget-uri, se creează un arbore de elemente (Element Tree), care reprezintă structura UI. Elementele leagă widget-urile de obiectele de randare corespunzătoare.
  3. Render Object Tree: Elementele creează și gestionează arborele de obiecte de randare (Render Object Tree). Obiectele de randare sunt responsabile pentru layout, pictură și hit testing.
  4. Pictură: Motorul folosește Skia (pe dispozitive mobile și desktop) sau CanvasKit (pe web) pentru a desena obiectele de randare pe ecran.

Programare reactivă:

Flutter folosește o abordare reactivă pentru construirea UI-ului. Când starea se schimbă, framework-ul reconstruiește acea parte a arborelui de widget-uri care depinde de ea. Acest lucru se face automat și eficient datorită mecanismului de diffing și creării și distrugerii rapide a widget-urilor.

Reîncărcare rapidă (Hot Reload) și Repornire rapidă (Hot Restart):

  • Hot Reload: Inserează codul Dart actualizat în aplicația în execuție fără a pierde starea. Ideal pentru iterarea rapidă a UI-ului.
  • Hot Restart: Reporneste aplicația de la zero cu codul actualizat și starea resetată. Se folosește când Hot Reload nu funcționează, de exemplu, la modificări în initState sau variabile globale.

Cod specific platformei:

Flutter permite interacțiunea cu API-urile native ale platformei prin canale de platformă (Platform Channels). Acest lucru permite apelarea metodelor din codul nativ (Java/Kotlin pe Android, Swift/Objective-C pe iOS) și primirea rezultatelor înapoi în Dart.

// Exemplu de utilizare a canalului de platformă
import 'package:flutter/services.dart';

static const platform = MethodChannel('samples.flutter.dev/battery');

Future<void> getBatteryLevel() async {
  String batteryLevel;
  try {
    final int result = await platform.invokeMethod('getBatteryLevel');
    batteryLevel = 'Nivelul bateriei: $result %.';
  } on PlatformException catch (e) {
    batteryLevel = "Nu s-a putut obține nivelul bateriei: '${e.message}'.";
  }
  // Actualizează UI
}