Que savez-vous de la structure interne de Flutter?

Le cœur de Flutter se compose du moteur, du cadre et des widgets.

• Moteur Flutter : Écrit en C++ et fournit une API de bas niveau pour le rendu, la gestion du texte, les threads et les plugins. Il interagit directement avec la plateforme (iOS, Android, Web, Bureau) et les API graphiques (par exemple, Skia). Le moteur gère le rendu, les opérations asynchrones et le cycle de vie de l'application.

• Cadre Flutter (Framework) : Écrit en Dart et fournit une couche d'abstraction au-dessus du moteur. Il inclut plusieurs composants prêts à l'emploi :

  • Foundation : Classes de base et fonctions auxiliaires.
  • Rendering : Couche pour gérer l'arbre d'objets de rendu et leur dessin.
  • Widgets : Blocs de construction UI de base qui forment l'arbre de widgets.
  • Material Design et Cupertino : Ensembles de widgets implémentant les styles Material Design et le design iOS.

• Widgets : Tout dans Flutter est un widget. Les widgets décrivent la configuration de l'UI. Il existe deux types principaux :

  • StatelessWidget : Widget sans état mutable interne. Son UI dépend uniquement de ses paramètres d'entrée (properties).
  • StatefulWidget : Widget pouvant avoir un état mutable. Il se compose du widget lui-même et d'un objet State, où sont stockés l'état et la logique de construction de l'UI (build).

Processus de rendu :

1. Build : Le framework appelle la méthode build() du widget, qui retourne un arbre d'autres widgets.
2. Arbre d'éléments : Sur la base de l'arbre de widgets, un arbre d'éléments (Element Tree) est créé, représentant la structure de l'UI. Les éléments relient les widgets aux objets de rendu correspondants.
3. Arbre d'objets de rendu : Les éléments créent et gèrent l'arbre d'objets de rendu (Render Object Tree). Les objets de rendu sont responsables du layout, du dessin et du hit testing.
4. Peinture : Le moteur utilise Skia (sur mobile et desktop) ou CanvasKit (sur le web) pour dessiner les objets de rendu à l'écran.

Programmation réactive :

Flutter utilise une approche réactive pour construire l'UI. Lorsqu'un état change, le framework reconstruit cette partie de l'arbre de widgets qui en dépend. Cela se fait automatiquement et efficacement grâce au mécanisme de diffing et à la création et destruction rapides des widgets.

Rechargement à chaud (Hot Reload) et Redémarrage à chaud (Hot Restart) :

• Hot Reload : Insère le code Dart mis à jour dans l'application en cours d'exécution sans perdre l'état. Idéal pour une itération rapide de l'UI.
• Hot Restart : Redémarre l'application de zéro avec le code mis à jour et l'état réinitialisé. Utilisé lorsque Hot Reload ne fonctionne pas, par exemple lors de modifications dans initState ou variables globales.

Code spécifique à la plateforme :

Flutter permet d'interagir avec les API natives de la plateforme via des canaux de plateforme (Platform Channels). Cela permet d'appeler des méthodes du code natif (Java/Kotlin sur Android, Swift/Objective-C sur iOS) et de recevoir les résultats en retour dans Dart.

// Exemple d'utilisation du canal de plateforme
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 = 'Niveau de batterie : $result %.';
  } on PlatformException catch (e) {
    batteryLevel = "Impossible d'obtenir le niveau de batterie : '${e.message}'.";
  }
  // Mise à jour de l'UI
}