Flutter da zero: installazione Dart, primo widget e hot reload — Guida operativa

Stai installando Flutter da un'ora e il comando flutter doctor ti dà ancora errori a pioggia. Oppure hai già l'SDK funzionante ma non capisci come funziona il ciclo di sviluppo: scrivi codice, salvi, e l'app si ricarica da sola? È magia? No, è hot reload e in questa guida vedrai esattamente cosa installare, come scrivere il primo widget e perché Flutter ti fa risparmiare ore di compilazione.

Noi, di Meteora Web, usiamo Flutter per alcune piattaforme proprietarie proprio per questo motivo: un linguaggio solo (Dart) che compila nativamente su mobile, web e desktop. Lo abbiamo scelto dopo anni di sviluppo nativo e cross‑platform, perché controlliamo tutto lo stack senza canoni a vita. E lo stesso vale per te: impari Dart, possiedi il codice, non dipendi da piattaforme chiuse.

Perché Dart è il cuore di Flutter

Dart non è un linguaggio di nicchia. È stato progettato da Google per lo sviluppo di UI veloci e predittive. A differenza di JavaScript, è compilato sia JIT (Just‑In‑Time) che AOT (Ahead‑Of‑Time): in fase di sviluppo usi JIT per l’hot reload, in produzione AOT per prestazioni native. Questo significa che puoi cambiare il codice e vedere il risultato in millisecondi, senza ricompilare tutta l’app.

Perché Dart e non JavaScript? Perché Flutter ha bisogno di un motore grafico che dialoga direttamente con la GPU, saltando i bridge che rallentano React Native o Ionic. Dart compila in codice macchina, non in un interprete. Il risultato: animazioni a 60 fps senza balbettii.

Esempio concreto: quando abbiamo ottimizzato il carrello di un e‑commerce moda (sì, lo stesso negozio di cui abbiamo gestito il sistema ERP dall’interno), abbiamo scelto Flutter per la schermata prodotto perché le transizioni dovevano essere fluide anche su dispositivi Android di fascia media. Dart ha fatto la differenza.

Installazione: da zero al primo comando funzionante

Non ti serve un IDE potente, ma devi preparare l’ambiente. Segui questa checklist, non saltare passaggi.

1. Scarica il Flutter SDK

Vai su flutter.dev e scegli il download per il tuo sistema operativo (Windows, macOS, Linux). Scompatta l’archivio in una cartella come C:\src\flutter su Windows o /Users/tuo-user/development/flutter su Mac/Linux.

2. Aggiungi Flutter al PATH

Windows: Imposta la variabile d’ambiente PUB_HOSTED_URL e FLUTTER_STORAGE_BASE_URL se sei in Italia (i server Flutter possono essere lenti). Poi aggiungi C:\src\flutter\bin al PATH.

Mac/Linux: Aggiungi al file .bashrc o .zshrc:

export FLUTTER_ROOT="/Users/tuo-user/development/flutter"
export PATH="$PATH:$FLUTTER_ROOT/bin"

3. Esegui flutter doctor

Apri il terminale e digita:

flutter doctor

Ti mostrerà tutti i prerequisiti: SDK Android, Xcode (su Mac), Chrome per il web, e strumenti aggiuntivi. Risolvi eventuali errori seguendo i suggerimenti. Non procedere finché non vedi tutto verde. Un errore comune è non avere il licenses di Android accettati. Risolvi con:

flutter doctor --android-licenses

4. Crea il tuo primo progetto

flutter create mia_app
cd mia_app
code .

Se hai Visual Studio Code con l’estensione Flutter, si apre subito l’editor. Altrimenti usa Android Studio o il tuo IDE preferito.

Primo widget: da zero a qualcosa di visibile

Apri lib/main.dart. Sostituisci il contenuto con questo:

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(
      title: 'Mia prima app',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Benvenuto in Flutter'),
        ),
        body: const Center(
          child: Text(
            'Ciao, mondo!',
            style: TextStyle(fontSize: 24),
          ),
        ),
      ),
    );
  }
}

Spieghiamo cosa succede:

• main() è il punto di ingresso. Chiama runApp() passando il widget radice.
• MyApp è un widget StatelessWidget: non cambia mai il suo stato interno.
• MaterialApp configura il tema Material Design e la navigazione.
• Scaffold fornisce la struttura base (app bar, body).
• Center e Text sono widget di layout.

Perché tutto questo codice per un semplice “Ciao mondo”? Perché Flutter costruisce l'interfaccia come un albero di widget. Ogni elemento della UI è un widget: un pulsante, un padding, un'icona. Non esiste separazione tra layout e logica – è tutto Dart, tutto sotto il tuo controllo.

Hot reload: il superpotere che ti fa risparmiare ore

Ora avvia l'app su un emulatore o dispositivo fisico:

flutter run

L'app si compila e viene caricata. Ora modifica il testo da 'Ciao, mondo!' a 'Flutter è velocissimo!' e salva il file. Non fermare l'esecuzione. In meno di un secondo vedrai il cambiamento a schermo senza perdere lo stato dell'app (se non hai ricostruito la UI da zero).

Come funziona? Dart VM tiene in memoria l'albero dei widget. Quando salvi il file, il compilatore JIT calcola la differenza tra il nuovo codice e quello vecchio e invia solo i bytecode modificati. Il motore Flutter ricostruisce i widget interessati e li disegna sulla GPU.

Quando usare hot reload vs hot restart? Usa hot reload (r in terminale o salva con l’estensione) per aggiornamenti UI e funzioni. Se modifichi variabili globali, costruttori di widget con parametri obbligatori, o cambi la configurazione di main(), usa hot restart (R o Shift+R), che ricarica tutto da capo.

Esempio pratico: in un progetto reale, abbiamo aggiunto un filtro complicato in un’app di catalogo. Con il ciclo scrivi → salva → guarda abbiamo completato la feature in 20 minuti invece di un’ora con ricompilazioni complete.

Errori comuni da evitare

• Non aggiornare il PATH dopo l’installazione. Senza il PATH, il comando flutter non viene riconosciuto.
• Usare hot reload su modifiche che richiedono hot restart. Se aggiungi un nuovo stato globale, l’app potrebbe comportarsi in modo strano. Ricarica tutto.
• Dimenticare di accettare le licenze Android. flutter doctor --android-licenses è il primo passo dopo l’installazione.
• Non utilizzare un emulatore con supporto GPU. Su Windows, scegli un emulatore x86_64 con Google APIs. Altrimenti le animazioni saranno lente e hot reload potrebbe andare in timeout.

In sintesi: cosa fare adesso

1. Installa l’SDK Flutter e assicurati che flutter doctor sia tutto verde.
2. Crea un progetto con flutter create e apri main.dart.
3. Scrivi il tuo primo widget come nell’esempio sopra.
4. Avvia con flutter run e modifica il testo: usa hot reload per vedere la magia.
5. Esplora la documentazione ufficiale: flutter.dev/docs per capire meglio i widget Stateful e le animazioni.

Se vuoi approfondire il confronto tra approcci nativi e cross‑platform, leggi il nostro articolo su No‑Code vs Low‑Code – anche se Flutter è codice puro, la filosofia di controllo totale dello stack è la stessa.