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).
- StatelessWidget: Widget fără stare internă mutabilă. UI-ul său depinde doar de parametrii de intrare (
Procesul de randare:
- Build: Framework-ul apelează metoda
build()a widget-ului, care returnează un arbore de alte widget-uri. - 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. - 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. - 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
initStatesau 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
}