[{"data":1,"prerenderedAt":81},["ShallowReactive",2],{"tutorial-splash-screen-nativa-in-flutter-con-flutter-native-splash":3,"comments-tutorial-splash-screen-nativa-in-flutter-con-flutter-native-splash":80},{"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},128,"Splash screen nativa in Flutter con flutter_native_splash","splash-screen-nativa-in-flutter-con-flutter-native-splash","Impara a creare la schermata di avvio nativa della tua app Flutter: logo, colori, dark mode, supporto Android 12+ e rimozione controllata dal codice Dart.","Quando l'utente tocca l'icona della tua app, passa qualche istante prima che Flutter sia pronto a disegnare il primo widget. In quel lasso di tempo il sistema operativo mostra una schermata di avvio: se non la configuri, sarà una noiosa pagina bianca (o nera).\n\nIn questo tutorial vedremo come usare il pacchetto **flutter_native_splash** per generare automaticamente una splash screen nativa su Android e iOS, con logo, colore di sfondo, variante per il tema scuro e supporto al nuovo formato richiesto da Android 12+.\n\nAlla fine imparerai anche a **tenere la splash visibile** finché l'app non ha finito di caricare i dati iniziali, per una transizione davvero fluida.\n\n> Prerequisiti: Flutter installato e funzionante (`flutter doctor` senza errori) e un progetto già creato.","https:\u002F\u002Fflutter.it\u002Fstorage\u002Ftutorials\u002Fc31b2e8d-4822-4470-a835-deab39600a7a.jpg","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1706509511838-4b101f379ef3?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w5NzA2NTJ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3OTIyOTc4NjV8&ixlib=rb-4.1.0&q=80&w=1080",{"name":12,"author_url":13,"photo_url":14},"Milad Fakurian","https:\u002F\u002Funsplash.com\u002F@fakurian","https:\u002F\u002Funsplash.com\u002Fphotos\u002Fa-white-cell-phone-is-hanging-on-a-wall-5CcpyUFKIVE","https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=usmH06IfhUs",{"youtube_id":17,"duration_seconds":18,"published_at":19},"usmH06IfhUs",157,"2026-10-18T09:13:43+00:00","beginner",30,"3.x","published","2026-10-18T04:31:05+00:00","Splash screen nativa Flutter con flutter_native_splash","Guida pratica per creare la splash screen nativa in Flutter: logo, colori, dark mode, Android 12+ e rimozione controllata dal codice Dart.",{"id":28,"name":29,"slug":30},1,"Guide","guide",{"id":28,"name":32},"Flutter Bot",[34,42,50,58,65,73],{"id":35,"position":28,"title":36,"body":37,"code_snippet":38,"code_language":39,"expected_result":40,"demo_url":41,"video_url":41},855,"Creare il progetto e aggiungere la dipendenza","Partiamo da un progetto nuovo (oppure usa il tuo progetto esistente):\n\n```bash\nflutter create splash_demo\ncd splash_demo\n```\n\nIl pacchetto `flutter_native_splash` serve solo in fase di sviluppo, perché genera file nativi: va quindi aggiunto fra le `dev_dependencies`.\n\nPuoi farlo da terminale oppure modificando a mano il `pubspec.yaml`. Dopo l'aggiunta, esegui `flutter pub get` per scaricare il pacchetto.","# da terminale\nflutter pub add dev:flutter_native_splash\n\n# equivale a scrivere nel pubspec.yaml:\n# dev_dependencies:\n#   flutter_test:\n#     sdk: flutter\n#   flutter_native_splash: ^2.4.0\n\nflutter pub get","bash","Il comando termina senza errori e nel pubspec.yaml compare flutter_native_splash tra le dev_dependencies.",null,{"id":43,"position":44,"title":45,"body":46,"code_snippet":47,"code_language":48,"expected_result":49,"demo_url":41,"video_url":41},856,2,"Preparare l'immagine del logo","La splash nativa non è un widget Flutter: è un'immagine statica mostrata dal sistema operativo. Serve quindi un file **PNG con sfondo trasparente**.\n\nConsigli pratici:\n\n- usa un PNG quadrato di almeno **1152x1152 px** (verrà ridimensionato automaticamente per tutte le densità);\n- evita testo molto piccolo: su Android 12+ il logo viene ritagliato dentro un cerchio;\n- tieni il contenuto grafico **al centro**, lasciando un margine di sicurezza del 30% circa attorno.\n\nCrea la cartella `assets\u002F` nella radice del progetto e copiaci dentro il logo. Per questa splash **non serve** dichiarare l'asset nella sezione `flutter:` del pubspec: il pacchetto legge il file direttamente dal disco durante la generazione.","splash_demo\u002F\n├── assets\u002F\n│   ├── splash_logo.png        # logo per tema chiaro\n│   └── splash_logo_dark.png   # logo per tema scuro (opzionale)\n├── lib\u002F\n│   └── main.dart\n└── pubspec.yaml","text","La cartella assets contiene i PNG del logo pronti per essere usati.",{"id":51,"position":52,"title":53,"body":54,"code_snippet":55,"code_language":56,"expected_result":57,"demo_url":41,"video_url":41},857,3,"Configurare flutter_native_splash nel pubspec.yaml","Aggiungi in fondo al `pubspec.yaml` (allo stesso livello di indentazione di `flutter:`, quindi a inizio riga) la sezione `flutter_native_splash`.\n\nLe chiavi principali:\n\n- `color` \u002F `color_dark`: colore di sfondo per tema chiaro e scuro;\n- `image` \u002F `image_dark`: il logo mostrato al centro;\n- `android_12`: sezione **obbligatoria** per Android 12 e versioni successive, che usa un formato diverso (icona circolare + colore di sfondo);\n- `android` e `ios`: abilitano la generazione per le due piattaforme.\n\n⚠️ Attenzione all'indentazione: lo YAML usa **due spazi** e non tollera i tab.","flutter_native_splash:\n  color: \"#ffffff\"\n  color_dark: \"#121212\"\n\n  image: assets\u002Fsplash_logo.png\n  image_dark: assets\u002Fsplash_logo_dark.png\n\n  android: true\n  ios: true\n  web: false\n\n  # Android 12+ richiede una configurazione dedicata\n  android_12:\n    image: assets\u002Fsplash_logo.png\n    image_dark: assets\u002Fsplash_logo_dark.png\n    color: \"#ffffff\"\n    color_dark: \"#121212\"\n    # dimensione consigliata dell'icona: 960x960 px entro un canvas 1152x1152\n    icon_background_color: \"#ffffff\"\n    icon_background_color_dark: \"#121212\"","yaml","Il pubspec.yaml contiene la sezione flutter_native_splash senza errori di indentazione.",{"id":59,"position":60,"title":61,"body":62,"code_snippet":63,"code_language":39,"expected_result":64,"demo_url":41,"video_url":41},858,4,"Generare la splash screen nativa","Ora lanciamo il generatore: il pacchetto scriverà i file di risorse nativi (drawable, styles.xml su Android, `LaunchScreen.storyboard` e asset su iOS).\n\nDopo la generazione **non basta un hot reload**: le risorse native vengono lette solo all'avvio dell'app, quindi devi chiudere e rilanciare con `flutter run` (meglio ancora dopo un `flutter clean` se vedi la vecchia splash).\n\nRicorda: ogni volta che modifichi il colore o il logo nel pubspec devi rieseguire il comando di generazione.","# genera i file nativi\ndart run flutter_native_splash:create\n\n# se usi un file di configurazione separato\n# dart run flutter_native_splash:create --path=splash.yaml\n\n# riavvio pulito\nflutter clean\nflutter pub get\nflutter run","All'avvio dell'app compare la splash con il tuo logo centrato sul colore scelto, al posto della schermata bianca.",{"id":66,"position":67,"title":68,"body":69,"code_snippet":70,"code_language":71,"expected_result":72,"demo_url":41,"video_url":41},859,5,"Mantenere la splash visibile durante il caricamento iniziale","Di default la splash sparisce appena Flutter disegna il primo frame. Se la tua app deve caricare preferenze, token o dati remoti, l'utente vedrebbe uno sfarfallio o una schermata vuota.\n\nIl pacchetto mette a disposizione due metodi:\n\n- `FlutterNativeSplash.preserve(widgetsBinding: ...)` — blocca la rimozione automatica;\n- `FlutterNativeSplash.remove()` — la toglie quando sei pronto.\n\nImportante: tra `preserve` e `remove` **non deve passare troppo tempo** (massimo 2-3 secondi), altrimenti l'utente percepisce l'app come lenta. Aggiungi sempre un `try\u002Fcatch` per evitare di restare bloccato sulla splash in caso di errore.","import 'package:flutter\u002Fmaterial.dart';\nimport 'package:flutter_native_splash\u002Fflutter_native_splash.dart';\n\nFuture\u003Cvoid> main() async {\n  final binding = WidgetsFlutterBinding.ensureInitialized();\n  \u002F\u002F La splash resta visibile finché non chiamiamo remove()\n  FlutterNativeSplash.preserve(widgetsBinding: binding);\n\n  try {\n    await _inizializzaApp();\n  } catch (_) {\n    \u002F\u002F anche in caso di errore dobbiamo proseguire\n  } finally {\n    FlutterNativeSplash.remove();\n  }\n\n  runApp(const MyApp());\n}\n\nFuture\u003Cvoid> _inizializzaApp() async {\n  \u002F\u002F simula il caricamento di preferenze, sessione, configurazioni...\n  await Future\u003Cvoid>.delayed(const Duration(seconds: 2));\n}\n\nclass MyApp extends StatelessWidget {\n  const MyApp({super.key});\n\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      title: 'Splash Demo',\n      theme: ThemeData(colorSchemeSeed: Colors.indigo),\n      darkTheme: ThemeData.dark(useMaterial3: true),\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('Home')),\n      body: const Center(child: Text('App pronta!')),\n    );\n  }\n}","dart","La splash nativa resta visibile per circa 2 secondi, poi appare direttamente la HomePage senza schermate bianche intermedie.",{"id":74,"position":75,"title":76,"body":77,"code_snippet":78,"code_language":39,"expected_result":79,"demo_url":41,"video_url":41},860,6,"Verificare su tema chiaro\u002Fscuro e rimuovere la configurazione","Ultimo passo: la verifica.\n\n1. Cambia il tema del dispositivo (Impostazioni → Display → Tema scuro) e riavvia l'app: devi vedere `color_dark` e `image_dark`.\n2. Su Android 12+ controlla che il logo non venga tagliato: se succede, riduci il contenuto grafico lasciando più margine trasparente.\n3. Su iOS, se la vecchia splash resta in cache, disinstalla l'app dal simulatore e reinstallala.\n\nSe vuoi tornare indietro, il pacchetto offre un comando che ripristina i file nativi originali: utile prima di cambiare completamente design o se la splash dà problemi di build.\n\n**Buone pratiche finali**\n\n- Non usare la splash nativa per mostrare pubblicità o messaggi: deve essere istantanea.\n- Mantieni la splash coerente con la prima schermata dell'app (stesso sfondo) per un effetto di continuità.\n- Versiona il `pubspec.yaml`: i file nativi generati si possono sempre ricreare con un comando.","# ripristina i file nativi di default\ndart run flutter_native_splash:remove\n\n# build di verifica\nflutter build apk --debug\nflutter build ios --debug --no-codesign","La splash si adatta correttamente a tema chiaro e scuro su Android e iOS, e sai come annullare la configurazione in qualsiasi momento.",[],1792316895083]