Cosa sai della struttura interna di Flutter?

Il cuore di Flutter è costituito dal motore, dal framework e dai widget.

• Motore Flutter: Scritta in C++ e fornisce un'API a basso livello per il rendering, la gestione del testo, i thread e i plugin. Interagisce direttamente con la piattaforma (iOS, Android, Web, Desktop) e le API grafiche (ad esempio Skia). Gestisce il rendering, le operazioni asincrone e il ciclo di vita dell'app.

• Framework Flutter: Scritta in Dart e fornisce uno strato di astrazione sopra il motore. Include vari componenti pronti all'uso:

  • Foundation: Classi di base e funzioni ausiliarie.
  • Rendering: Strato per gestire l'albero degli oggetti di rendering e il loro disegno.
  • Widgets: Blocchi fondamentali dell'interfaccia utente che formano l'albero dei widget.
  • Material Design e Cupertino: Set di widget che implementano gli stili Material Design e i design in stile iOS.

• Widgets: In Flutter tutto è un widget. I widget descrivono la configurazione dell'UI. Esistono due tipi principali:

  • StatelessWidget: Widget senza stato interno mutabile. La sua UI dipende solo dai parametri di input (properties).
  • StatefulWidget: Widget che può avere uno stato mutabile. È composto dal widget stesso e da un oggetto State, dove vengono memorizzati lo stato e la logica di costruzione dell'UI (build).

Processo di rendering:

1. Build: Il framework chiama il metodo build() del widget, che restituisce un albero di altri widget.
2. Tree di Elementi: Basandosi sull'albero di widget, viene creato un albero di elementi (Element Tree), che rappresenta la struttura dell'UI. Gli elementi collegano i widget agli oggetti di rendering corrispondenti.
3. Tree di Oggetti di Rendering: Gli elementi creano e gestiscono l'albero di oggetti di rendering (Render Object Tree). Gli oggetti di rendering sono responsabili di layout, pittura e hit testing.
4. Pittura: Il motore utilizza Skia (su dispositivi mobili e desktop) o CanvasKit (nel web) per disegnare gli oggetti di rendering sullo schermo.

Programmazione reattiva:

Flutter utilizza un approccio reattivo alla costruzione dell'UI. Quando lo stato cambia, il framework ricostruisce quella parte dell'albero dei widget che dipende da esso. Questo avviene in modo automatico ed efficiente grazie al meccanismo di diffing e alla rapida creazione e distruzione dei widget.

Hot Reload e Hot Restart:

• Hot Reload: Inserisce il codice Dart aggiornato nell'applicazione in esecuzione senza perdere lo stato. Ideale per iterazioni rapide dell'UI.
• Hot Restart: Riavvia l'applicazione da zero con il codice aggiornato e lo stato azzerato. Viene usato quando Hot Reload non funziona, ad esempio, con modifiche in initState o variabili globali.

Codice specifico della piattaforma:

Flutter consente di interagire con le API native della piattaforma tramite canali di piattaforma (Platform Channels). Questo permette di chiamare metodi del codice nativo (Java/Kotlin su Android, Swift/Objective-C su iOS) e ricevere i risultati indietro in Dart.

// Esempio di utilizzo del Platform Channel
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 = 'Livello batteria: $result %.';
  } on PlatformException catch (e) {
    batteryLevel = "Impossibile ottenere il livello della batteria: '${e.message}'.";
  }
  // Aggiorna UI
}