Flutter — concetti chiave, architettura e widget

Cos'è Flutter

Flutter è un SDK (Software Development Kit) e framework per creare interfacce utente, annunciato da Google nel 2015. La prima versione stabile di Flutter 1.0 è stata rilasciata nel dicembre 2018. A differenza di React Native, Flutter non utilizza un ponte tra JavaScript e codice nativo — compila direttamente in istruzioni native del processore.

La caratteristica principale di Flutter è il proprio motore di rendering. Il framework non si basa su UIKit (iOS) né sul sistema View di Android. Invece, Flutter disegna ogni pixel in modo indipendente attraverso Skia (prima del 2024) o il nuovo motore Impeller. Questo garantisce un aspetto coerente su tutte le piattaforme ed elimina i problemi di adattamento tra diverse versioni del sistema operativo.

Secondo Statista 2024, Flutter è al primo posto tra i framework multipiattaforma per popolarità: circa il 46% degli sviluppatori lo utilizza per lo sviluppo mobile. Il framework è utilizzato nei progetti di Google Pay, Alibaba, eBay, BMW e Tencent.

Storia e versioni di Flutter

La prima versione alpha di Flutter è stata presentata al Dart Developer Summit nel 2015 con il nome Sky. Nel 2018 è stato rilasciato Flutter 1.0 con supporto solo per iOS e Android. Flutter 2.0 (2021) ha aggiunto il supporto per Web e Desktop. Flutter 3.0 (2022) ha introdotto il supporto stabile per macOS e Linux. Flutter 3.16 (2023) ha presentato Impeller — un nuovo motore di rendering basato su Metal e Vulkan.

Flutter 3.22 (2024) include Impeller per impostazione predefinita su iOS, supporto migliorato per Material Design 3, Dart 3.4 con estensioni macro e supporto integrato per Native Assets per l'accesso diretto alle risorse della piattaforma. Google riferisce che Impeller riduce i frame jank del 90% rispetto a Skia.

Il linguaggio Dart

Dart è un linguaggio di programmazione creato da Google nel 2011 e utilizzato in Flutter. Dart combina una tipizzazione rigorosa con capacità di compilazione JIT (per Hot Reload) e compilazione AOT (per build di produzione). Dart 3.0 (2023) ha introdotto pattern matching, classi sealed e records come funzionalità stabili.

Null safety in Dart è una funzionalità obbligatoria introdotta dalla versione 2.12. Il compilatore controlla tutti i tipi nullable in fase di compilazione, eliminando NullPointerException in fase di esecuzione. I tipi di dati (int, String, bool) sono non nullable per impostazione predefinita e i valori nullable utilizzano il suffisso ? (ad esempio, String? name).

Architettura di Flutter

L'architettura di Flutter è costruita su un principio a tre livelli. Il livello inferiore è il motore (C/C++), responsabile del rendering, I/O e accesso alle API della piattaforma. Il livello intermedio è il framework (Dart), che implementa il sistema di widget, gesture, animazioni e navigazione. Il livello superiore è l'applicazione (Dart), che assembla i widget in un albero.

Widget e albero dei widget

In Flutter, tutto è un widget. I widget sono di due tipi: StatelessWidget (immutabile, non memorizza lo stato) e StatefulWidget (mutabile, gestisce lo stato tramite State). L'albero dei widget (Widget Tree) è una struttura gerarchica in cui ogni widget figlio è annidato all'interno di un genitore. Scaffold, AppBar, Container, Text, Column, Row — questi sono i mattoni fondamentali.

BuildContext è un oggetto che comunica la posizione del widget nell'albero. MediaQuery.of(context) ottiene le dimensioni dello schermo, Theme.of(context) ottiene il tema corrente. BuildContext viene utilizzato per la navigazione (Navigator.of(context)), l'accesso a InheritedWidget e la traduzione della locale tramite Localizations.of.

Il motore Impeller

Impeller è il moderno motore di rendering di Flutter, scritto in C++ e che utilizza Metal (iOS/macOS) e Vulkan (Android). A differenza di Skia, che ridisegnava ogni fotogramma da zero, Impeller compila gli shader in anticipo e li memorizza in una cache. Questo elimina i ritardi durante il rendering iniziale di scene complesse e riduce il carico della GPU.

I test del team Google Flutter mostrano che Impeller riduce il tempo di compilazione degli shader da 200–500 ms (Skia) a 1–3 ms. Su iPhone 13 Pro, il rendering a impulsi di Impeller raggiunge 120 FPS senza cali di fotogrammi. Su Android con Vulkan, offre 60 FPS stabili anche su dispositivi di fascia media (Xiaomi Redmi Note 12).

Esempio di applicazione Flutter

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Applicazione Flutter')),
        body: const Center(
          child: Text('Ciao, Flutter!'),
        ),
      ),
    );
  }
}

Vantaggi di Flutter

Base di codice unica — il principale vantaggio di Flutter. Un progetto Dart compila per iOS, Android, Web, Windows, macOS e Linux. Secondo Google, questo riduce i tempi di sviluppo del 30–50% rispetto a progetti iOS e Android separati. Alibaba ha ridotto i tempi di rilascio delle versioni del 30% dopo essere passata a Flutter.

Prestazioni di Flutter sono vicine a quelle native. La compilazione AOT di Dart in codice macchina ARM e x86_64 elimina i ritardi di interpretazione. Il motore Impeller garantisce 60 FPS anche su dispositivi del 2018 (iPhone XR, Samsung Galaxy S9). Secondo Google, il 99,5% dei fotogrammi nelle applicazioni Flutter viene renderizzato senza jank.

Hot Reload — tecnologia di aggiornamento istantaneo del codice. Lo sviluppatore modifica il codice sorgente, salva il file e Flutter ricostruisce l'albero dei widget in 300–800 ms senza perdere lo stato corrente dell'applicazione. Questo accelera le iterazioni di progettazione dell'interfaccia utente: è possibile modificare margini, colori e animazioni in secondi senza attendere una ricostruzione completa.

Material Design 3 e il linguaggio di design nativo Cupertino (stile iOS) sono inclusi nel pacchetto standard di Flutter. I widget Material 3 supportano colori dinamici (Material You), layout reattivo e animazioni di transizione tra schermate. CupertinoPageTransition e CupertinoNavigationBar imitano il comportamento del navigatore nativo iOS.

Personalizzazione dei widget non richiede la creazione di viste personalizzate su ogni piattaforma. Basta sovrascrivere build() e restituire un nuovo widget. I pacchetti di animazione (AnimatedContainer, Hero, TweenAnimationBuilder) e gesture (GestureDetector, Dismissible) coprono il 95% degli scenari di animazione dell'interfaccia utente senza scrivere codice di piattaforma.

Ecosistema e pacchetti di Flutter

pub.dev è il registro ufficiale dei pacchetti per Dart e Flutter. A luglio 2024, nel registro sono pubblicati oltre 45.000 pacchetti. L'installazione di un pacchetto viene eseguita con il comando flutter pub add <nome_pacchetto>. Pub risolve automaticamente le dipendenze, verifica la compatibilità delle versioni e genera pubspec.lock.

La gestione dello stato in Flutter è una delle principali sfide architetturali. Oltre a flutter_bloc, le soluzioni più diffuse includono: Provider (raccomandato da Google, utilizza InheritedWidget), Riverpod (una versione riprogettata di Provider con sicurezza in fase di compilazione) e GetX (tutto-in-uno: stato, routing, DI). Provider rimane il più semplice per iniziare: ChangeNotifierProvider avvolge il modello e Consumer ricostruisce il widget quando i dati cambiano.

Il testing in Flutter è supportato a tre livelli. I test unitari (flutter test) verificano funzioni e classi senza UI. I test dei widget (testWidgets) renderizzano singoli widget in un ambiente isolato. I test di integrazione (IntegrationTest) eseguono l'applicazione completa su un dispositivo o simulatore. Flutter 3.22 ha aggiunto il supporto per i test patch tramite analisi dei patch e report migliorati sulla copertura del codice.

Pacchetti popolari

dio è un client HTTP con supporto per interceptors, timeout e FormData. Utilizzato nel 40% dei progetti Flutter su GitHub. Dio supporta l'intercettazione delle richieste per logging, tentativi e aggiunta di token di autorizzazione. La seconda libreria più popolare è retrofit, che genera client API tipizzati.

flutter_bloc è una libreria di gestione dello stato basata sul pattern BLoC (Business Logic Component). BlocProvider passa gli stati verso il basso nell'albero dei widget, BlocBuilder ricostruisce l'UI quando lo stato cambia e BlocListener gestisce gli effetti collaterali (navigazione, SnackBar). Cubit è una versione semplificata di BLoC senza eventi.

go_router è una navigazione dichiarativa per Flutter di Google. Le route sono descritte nella configurazione di GoRouter con supporto per route annidate, reindirizzamenti e deep link. ShellRoute divide la navigazione tra le schede di BottomNavigationBar. GoRouter 14.0 supporta percorsi type-safe e StatefulShellRoute con conservazione dello stato delle schede.