[{"data":1,"prerenderedAt":86},["ShallowReactive",2],{"tutorial-installare-flutter-da-zero-sdk-flutter-doctor-e-primo-progetto":3,"comments-tutorial-installare-flutter-da-zero-sdk-flutter-doctor-e-primo-progetto":85},{"id":4,"title":5,"slug":6,"excerpt":7,"intro":8,"cover_image":9,"cover_remote_url":10,"cover_credit":11,"video_url":15,"video":16,"difficulty":20,"estimated_minutes":21,"flutter_version":22,"status":23,"published_at":24,"meta_title":25,"meta_description":26,"category":27,"author":31,"steps":33},70,"Installare Flutter da zero: SDK, flutter doctor e primo progetto","installare-flutter-da-zero-sdk-flutter-doctor-e-primo-progetto","Guida passo passo per installare l'SDK Flutter su Windows, macOS e Linux, configurare l'editor, interpretare l'output di flutter doctor e creare ed eseguire la tua prima app.","Prima di scrivere una sola riga di codice serve un ambiente di sviluppo funzionante: è il passaggio che blocca più spesso chi inizia con Flutter.\n\nIn questo tutorial installiamo l'**SDK Flutter** su Windows, macOS o Linux, configuriamo il `PATH`, impariamo a leggere l'output di **`flutter doctor`** (il diagnostico integrato), sistemiamo i problemi più comuni (licenze Android, Command Line Tools, Xcode) e creiamo il nostro **primo progetto**, eseguendolo su emulatore, dispositivo fisico o browser.\n\n> **Cosa ti serve:** circa 5 GB di spazio libero, una connessione internet stabile e i permessi di amministratore sulla tua macchina.\n\nAl termine avrai un ambiente pronto, saprai dove mettere le mani quando qualcosa non funziona e avrai visto in azione l'hot reload.","https:\u002F\u002Fflutter.it\u002Fstorage\u002Ftutorials\u002F1a4d1e49-43d5-4352-bc4d-85b80468df0c.jpg","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1603227685935-3f66d0f35440?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w5NzA2NTJ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3ODczMjczMzJ8&ixlib=rb-4.1.0&q=80&w=1080",{"name":12,"author_url":13,"photo_url":14},"Eric Wendt","https:\u002F\u002Funsplash.com\u002F@eric_w1","https:\u002F\u002Funsplash.com\u002Fphotos\u002Fperson-in-black-jacket-standing-beside-black-and-white-piano-iEU_KscNwkQ","https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=mtV3sNjOQv0",{"youtube_id":17,"duration_seconds":18,"published_at":19},"mtV3sNjOQv0",145,"2026-08-21T07:54:50+00:00","beginner",45,"3.x","published","2026-08-21T04:31:01+00:00","Installare Flutter: SDK, flutter doctor e primo progetto","Guida beginner per installare Flutter su Windows, macOS e Linux, risolvere gli errori di flutter doctor e creare ed eseguire la prima app.",{"id":28,"name":29,"slug":30},1,"Guide","guide",{"id":28,"name":32},"Flutter Bot",[34,42,49,56,63,70,77],{"id":35,"position":28,"title":36,"body":37,"code_snippet":38,"code_language":39,"expected_result":40,"demo_url":41,"video_url":41},465,"Scaricare e installare l'SDK Flutter","Vai su **docs.flutter.dev\u002Fget-started\u002Finstall** e scegli il tuo sistema operativo. Scarica l'archivio dell'SDK stabile (canale `stable`) ed estrailo in una cartella **senza spazi e senza caratteri accentati** nel percorso.\n\nPercorsi consigliati:\n\n| Sistema | Percorso consigliato |\n|---|---|\n| Windows | `C:\\src\\flutter` |\n| macOS \u002F Linux | `~\u002Fdevelopment\u002Fflutter` |\n\n⚠️ **Evita** `C:\\Program Files\\` su Windows: richiede permessi elevati e Flutter avrà problemi a scrivere nella propria cartella.\n\nIn alternativa puoi clonare il repository ufficiale con Git (comodo per aggiornare l'SDK in futuro) usando il comando qui sotto.","# macOS \u002F Linux\nmkdir -p ~\u002Fdevelopment && cd ~\u002Fdevelopment\ngit clone https:\u002F\u002Fgithub.com\u002Fflutter\u002Fflutter.git -b stable\n\n# Windows (PowerShell)\n# mkdir C:\\src ; cd C:\\src\n# git clone https:\u002F\u002Fgithub.com\u002Fflutter\u002Fflutter.git -b stable","bash","Nella cartella scelta trovi la directory `flutter` contenente le sottocartelle `bin`, `packages`, `examples`.",null,{"id":43,"position":44,"title":45,"body":46,"code_snippet":47,"code_language":39,"expected_result":48,"demo_url":41,"video_url":41},466,2,"Aggiungere Flutter al PATH e verificare la versione","Perché il comando `flutter` funzioni da qualsiasi terminale devi aggiungere la cartella `flutter\u002Fbin` alla variabile d'ambiente **PATH**.\n\n**Windows:** cerca *\"Modifica le variabili di ambiente per il tuo account\"* → seleziona `Path` → *Modifica* → *Nuovo* → inserisci `C:\\src\\flutter\\bin` → conferma e **riapri il terminale**.\n\n**macOS \u002F Linux:** aggiungi la riga di export al file di configurazione della tua shell (`~\u002F.zshrc` per zsh, `~\u002F.bashrc` per bash), poi ricarica la shell.\n\nInfine verifica con `flutter --version`: la prima esecuzione scarica alcune dipendenze e può richiedere qualche minuto.","# Aggiungere al PATH (zsh su macOS)\necho 'export PATH=\"$HOME\u002Fdevelopment\u002Fflutter\u002Fbin:$PATH\"' >> ~\u002F.zshrc\nsource ~\u002F.zshrc\n\n# Verifica\nflutter --version\n# Flutter 3.x.x • channel stable • https:\u002F\u002Fgithub.com\u002Fflutter\u002Fflutter.git\n# Tools • Dart 3.x.x • DevTools 2.x.x","Il comando `flutter --version` stampa la versione dell'SDK, il canale `stable` e la versione di Dart inclusa.",{"id":50,"position":51,"title":52,"body":53,"code_snippet":54,"code_language":39,"expected_result":55,"demo_url":41,"video_url":41},467,3,"Eseguire flutter doctor e leggere il report","`flutter doctor` è il diagnostico integrato: controlla tutti i componenti necessari e ti dice cosa manca.\n\nLegenda dei simboli:\n\n- **✓ (verde)**: componente a posto.\n- **! (giallo)**: funziona ma manca qualcosa di opzionale (es. Xcode se non sviluppi per iOS).\n- **✗ (rosso)**: blocco reale, va risolto.\n\nUsa `flutter doctor -v` per il dettaglio completo: mostra i percorsi rilevati ed è fondamentale per capire *perché* un controllo fallisce.\n\n💡 Non serve avere tutto verde: se sviluppi solo per Android su Windows, la riga di Xcode resterà segnalata e va benissimo.","flutter doctor\n\n# Esempio di output:\n# [✓] Flutter (Channel stable, 3.x.x, on macOS 14)\n# [✗] Android toolchain - develop for Android devices\n#     ✗ cmdline-tools component is missing\n# [!] Xcode - develop for iOS and macOS\n# [✓] Chrome - develop for the web\n# [✓] VS Code (version 1.9x)\n# [✓] Connected device (2 available)\n\nflutter doctor -v   # versione dettagliata","Ottieni la lista dei controlli con lo stato di ciascuno e le istruzioni per risolvere quelli in errore.",{"id":57,"position":58,"title":59,"body":60,"code_snippet":61,"code_language":39,"expected_result":62,"demo_url":41,"video_url":41},468,4,"Sistemare Android Studio, SDK e licenze","L'errore rosso più comune riguarda la **toolchain Android**. Procedi così:\n\n1. Installa **Android Studio** (include SDK e strumenti da riga di comando).\n2. Aprilo → *Settings → Languages & Frameworks → Android SDK → SDK Tools* → spunta **Android SDK Command-line Tools (latest)** e **Android SDK Platform-Tools** → *Apply*.\n3. Accetta le licenze dal terminale con `flutter doctor --android-licenses` (rispondi `y` a tutte).\n4. Installa i plugin **Flutter** e **Dart** in Android Studio, oppure l'estensione **Flutter** se usi VS Code.\n\nSu **macOS**, per sviluppare anche per iOS: installa Xcode dall'App Store, poi esegui i comandi di configurazione qui sotto.\n\nRilancia `flutter doctor` dopo ogni correzione fino a eliminare i simboli rossi che ti interessano.","# Licenze Android\nflutter doctor --android-licenses\n\n# Solo macOS, per il supporto iOS\nsudo xcode-select --switch \u002FApplications\u002FXcode.app\u002FContents\u002FDeveloper\nsudo xcodebuild -runFirstLaunch\nsudo gem install cocoapods","`flutter doctor` mostra `[✓] Android toolchain` e (su macOS) `[✓] Xcode`.",{"id":64,"position":65,"title":66,"body":67,"code_snippet":68,"code_language":39,"expected_result":69,"demo_url":41,"video_url":41},469,5,"Creare il primo progetto con flutter create","Ora crei l'app. Il nome del progetto deve essere in **snake_case** (minuscolo, con underscore): `mia_prima_app` va bene, `MiaPrimaApp` no.\n\nIl comando genera la struttura standard:\n\n- `lib\u002Fmain.dart` → il punto di ingresso, dove scriverai il codice Dart.\n- `pubspec.yaml` → dipendenze, asset e metadati del progetto.\n- `android\u002F`, `ios\u002F`, `web\u002F` → i progetti nativi per ogni piattaforma.\n- `test\u002F` → i test automatici.\n\nCon l'opzione `--platforms` puoi limitare le piattaforme generate e mantenere il progetto più leggero.","cd ~\u002Fprogetti\nflutter create mia_prima_app\ncd mia_prima_app\n\n# Solo alcune piattaforme:\n# flutter create --platforms=android,ios,web mia_prima_app\n\n# Scarica le dipendenze dichiarate in pubspec.yaml\nflutter pub get","La cartella `mia_prima_app` contiene il progetto completo e `flutter pub get` termina con \"Got dependencies!\".",{"id":71,"position":72,"title":73,"body":74,"code_snippet":75,"code_language":39,"expected_result":76,"demo_url":41,"video_url":41},470,6,"Avviare l'app su emulatore, dispositivo o browser","Controlla i dispositivi disponibili con `flutter devices`. Se non ne vedi nessuno:\n\n- **Emulatore Android**: aprilo dal *Device Manager* di Android Studio, oppure via terminale con `flutter emulators --launch \u003Cid>`.\n- **Dispositivo fisico Android**: attiva *Opzioni sviluppatore* → *Debug USB*, collega il cavo e autorizza il computer.\n- **Simulatore iOS** (solo macOS): `open -a Simulator`.\n- **Web**: usa `flutter run -d chrome`, non serve alcun emulatore ed è il modo più rapido per partire.\n\nLancia `flutter run`: la prima build è lenta (compila anche la parte nativa), le successive saranno molto più veloci.","flutter devices\nflutter emulators\nflutter emulators --launch Pixel_7_API_34\n\n# Avvio\nflutter run              # sceglie\u002Fchiede il dispositivo\nflutter run -d chrome    # sul browser\n\n# Durante l'esecuzione, nel terminale:\n#  r  -> hot reload\n#  R  -> hot restart\n#  q  -> esci","L'app demo con il contatore si apre sul dispositivo scelto: premendo il pulsante \"+\" il numero aumenta.",{"id":78,"position":79,"title":80,"body":81,"code_snippet":82,"code_language":83,"expected_result":84,"demo_url":41,"video_url":41},471,7,"Modificare main.dart e provare l'hot reload","Apri `lib\u002Fmain.dart` nell'editor e sostituisci il contenuto con il codice qui sotto: una app minimale che mostra un testo al centro dello schermo.\n\nCosa fa il codice:\n\n- `runApp()` monta il widget radice e avvia l'applicazione.\n- `MaterialApp` fornisce tema, routing e le convenzioni Material Design.\n- `Scaffold` dà la struttura base della schermata (`appBar`, `body`).\n- `Center` + `Text` mostrano il messaggio.\n\nSalva il file (`Ctrl\u002FCmd + S`): con `flutter run` attivo l'**hot reload** aggiorna l'app in meno di un secondo, mantenendo lo stato. Cambia il testo o il `Colors.indigo` in `Colors.teal` e osserva il risultato immediato.","import 'package:flutter\u002Fmaterial.dart';\n\nvoid main() {\n  runApp(const MiaPrimaApp());\n}\n\nclass MiaPrimaApp extends StatelessWidget {\n  const MiaPrimaApp({super.key});\n\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      title: 'Mia Prima App',\n      debugShowCheckedModeBanner: false,\n      theme: ThemeData(\n        colorSchemeSeed: Colors.indigo,\n        useMaterial3: true,\n      ),\n      home: const HomePage(),\n    );\n  }\n}\n\nclass HomePage extends StatelessWidget {\n  const HomePage({super.key});\n\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      appBar: AppBar(title: const Text('Benvenuto in Flutter')),\n      body: const Center(\n        child: Text(\n          'Ambiente configurato correttamente! 🎉',\n          textAlign: TextAlign.center,\n          style: TextStyle(fontSize: 20),\n        ),\n      ),\n    );\n  }\n}","dart","L'app mostra una AppBar indaco e il messaggio al centro; modificando il testo e salvando, l'hot reload aggiorna la schermata in meno di un secondo.",[],1789120600797]