Flutter Web: dal desktop al browser

Flutter non serve solo per app mobili: con lo stesso codebase è possibile pubblicare applicazioni web complete. Tuttavia il web ha regole proprie, e un'app che vola su mobile può risultare pesante o lenta nel browser se non ottimizzata. In questa guida vediamo le tecniche più utili per portare Flutter sul web in modo efficace.

Abilitare e compilare per il web

Assicurati di avere il supporto web abilitato:

flutter config --enable-web
flutter devices

Per compilare in modalità release:

flutter build web --release

L'output finisce nella cartella build/web, pronta per essere servita da qualsiasi hosting statico.

Scegliere il renderer giusto

Dalle versioni recenti di Flutter, il renderer di riferimento per il web è CanvasKit (basato su WebAssembly e Skia), che garantisce fedeltà grafica identica al mobile. Storicamente esisteva anche il renderer HTML, più leggero ma meno preciso.

Con Flutter 3.29+ è disponibile la compilazione WebAssembly (Wasm), che migliora sensibilmente le performance:

flutter build web --wasm

Linee guida rapide:

  • CanvasKit/Wasm: ideale per app ricche di grafica, animazioni e canvas personalizzati.
  • Verifica sempre la compatibilità del browser target quando usi Wasm.

Ridurre i tempi di caricamento

Il principale svantaggio di Flutter Web è il peso iniziale del bundle. Alcune strategie efficaci:

1. Precaricare le risorse essenziali

Personalizza web/index.html per mostrare uno splash o un loader mentre l'app si carica, evitando la pagina bianca.

2. Deferred loading dei componenti pesanti

Dart supporta il caricamento differito delle librerie con deferred as:

import 'package:my_app/heavy_module.dart' deferred as heavy;

Future<void> loadHeavy() async {
  await heavy.loadLibrary();
  heavy.runFeature();
}

Così il codice del modulo viene scaricato solo quando serve, alleggerendo il bundle iniziale.

3. Ottimizzare le immagini e i font

Usa formati moderni (WebP), evita font non necessari e limita le icone caricate. Per gli asset di grandi dimensioni valuta il caricamento da CDN.

SEO e indicizzazione

Flutter Web renderizza tramite canvas, quindi il contenuto non è direttamente leggibile dai crawler come in un sito HTML tradizionale. Per contenuti che richiedono SEO:

  • Aggiungi meta tag descrittivi in web/index.html.
  • Fornisci un fallback testuale nel body per i crawler.
  • Per progetti fortemente orientati ai contenuti, considera se Flutter Web sia la scelta migliore: è pensato soprattutto per applicazioni, non per siti di contenuti.

Trasformare l'app in PWA

Flutter genera automaticamente il file manifest.json e un service worker. Per una Progressive Web App installabile, personalizza il manifest:

{
  "name": "La mia App",
  "short_name": "MiaApp",
  "start_url": ".",
  "display": "standalone",
  "background_color": "#0175C2",
  "theme_color": "#0175C2"
}

Assicurati di fornire le icone nelle dimensioni richieste (192x192 e 512x512) nella cartella web/icons.

Gestire codice specifico per piattaforma

Evita chiamate a dart:io sul web (non disponibile). Usa import condizionali o il pacchetto universal_platform, e verifica la piattaforma con kIsWeb:

import 'package:flutter/foundation.dart' show kIsWeb;

if (kIsWeb) {
  // Logica specifica per il web
} else {
  // Logica per mobile/desktop
}

Deploy su hosting statico

La cartella build/web può essere servita ovunque. Con Firebase Hosting, ad esempio:

firebase init hosting
# imposta build/web come public directory
flutter build web --release
firebase deploy --only hosting

Imposta correttamente il --base-href se pubblichi in una sottocartella:

flutter build web --release --base-href /mia-app/

Best practice finali

  • Testa su più browser (Chrome, Safari, Firefox) e su mobile.
  • Monitora il peso del bundle e usa il deferred loading.
  • Sfrutta la compilazione Wasm dove supportata per performance migliori.
  • Ricorda che Flutter Web brilla con le web app interattive, meno con i siti di contenuti.

Con queste accortezze potrai offrire un'esperienza web fluida riutilizzando gran parte del codice già scritto per le tue app Flutter.