[{"data":1,"prerenderedAt":77},["ShallowReactive",2],{"tutorial-mostrare-notifiche-locali-in-flutter-con-flutter-local-notifications":3,"comments-tutorial-mostrare-notifiche-locali-in-flutter-con-flutter-local-notifications":76},{"id":4,"title":5,"slug":6,"excerpt":7,"intro":8,"cover_image":9,"video_url":10,"difficulty":11,"estimated_minutes":12,"flutter_version":13,"status":14,"published_at":15,"meta_title":16,"meta_description":17,"category":18,"author":22,"steps":24},10,"Mostrare notifiche locali in Flutter con flutter_local_notifications","mostrare-notifiche-locali-in-flutter-con-flutter-local-notifications","Impara a configurare e mostrare notifiche locali in Flutter per Android e iOS, comprese le notifiche programmate, usando il pacchetto flutter_local_notifications.","Le notifiche locali permettono alla tua app di comunicare con l'utente anche quando non è in primo piano, senza la necessità di un server remoto. Sono perfette per promemoria, allarmi, conferme e avvisi pianificati.\n\nIn questo tutorial vedremo come integrare il pacchetto `flutter_local_notifications`, configurarlo correttamente per Android e iOS, mostrare una notifica immediata e programmarne una nel futuro usando `timezone`.\n\n> **Prerequisiti:** conoscenza di base di Flutter e di come modificare i file nativi `AndroidManifest.xml` e `Info.plist`.","https:\u002F\u002Fflutter.it\u002Fstorage\u002Ftutorials\u002Fdd701a61-a44d-4a51-b214-4a59a39cf6f5.jpg",null,"intermediate",35,"3.x","published","2026-06-14T04:30:42+00:00","Notifiche locali in Flutter: guida pratica","Tutorial passo passo per mostrare notifiche locali e programmate in Flutter con flutter_local_notifications su Android e iOS.",{"id":19,"name":20,"slug":21},1,"Guide","guide",{"id":19,"name":23},"Flutter Bot",[25,32,40,48,55,62,69],{"id":26,"position":19,"title":27,"body":28,"code_snippet":29,"code_language":30,"expected_result":31,"demo_url":10,"video_url":10},70,"Aggiungere le dipendenze","Apri il file `pubspec.yaml` e aggiungi i pacchetti `flutter_local_notifications` per gestire le notifiche e `timezone` per la programmazione basata sui fusi orari.\n\nDopo aver salvato, esegui `flutter pub get` dal terminale.","dependencies:\n  flutter:\n    sdk: flutter\n  flutter_local_notifications: ^17.2.3\n  timezone: ^0.9.4","yaml","I pacchetti vengono scaricati e risultano disponibili nel progetto.",{"id":33,"position":34,"title":35,"body":36,"code_snippet":37,"code_language":38,"expected_result":39,"demo_url":10,"video_url":10},71,2,"Configurare i permessi nativi","Per **Android**, apri `android\u002Fapp\u002Fsrc\u002Fmain\u002FAndroidManifest.xml` e aggiungi i permessi necessari (per le notifiche e quelle esatte programmate) dentro il tag `\u003Cmanifest>`.\n\nSu **Android 13+** è obbligatorio anche il permesso `POST_NOTIFICATIONS`.\n\nPer **iOS** i permessi vengono richiesti a runtime, quindi non serve modificare l'`Info.plist`, ma assicurati di abilitare le notifiche nelle capability del progetto Xcode.","\u003Cuses-permission android:name=\"android.permission.POST_NOTIFICATIONS\"\u002F>\n\u003Cuses-permission android:name=\"android.permission.SCHEDULE_EXACT_ALARM\"\u002F>\n\u003Cuses-permission android:name=\"android.permission.RECEIVE_BOOT_COMPLETED\"\u002F>","xml","L'app dispone dei permessi per mostrare e programmare notifiche.",{"id":41,"position":42,"title":43,"body":44,"code_snippet":45,"code_language":46,"expected_result":47,"demo_url":10,"video_url":10},72,3,"Creare un servizio per le notifiche","Per mantenere il codice organizzato, creiamo una classe `NotificationService` che incapsula l'istanza del plugin e la logica di inizializzazione. Inizializziamo anche il database dei fusi orari di `timezone`.\n\nNel metodo `init()` configuriamo le impostazioni per Android (specificando l'icona dell'app) e per iOS.","import 'package:flutter_local_notifications\u002Fflutter_local_notifications.dart';\nimport 'package:timezone\u002Fdata\u002Flatest.dart' as tz;\nimport 'package:timezone\u002Ftimezone.dart' as tz;\n\nclass NotificationService {\n  static final _plugin = FlutterLocalNotificationsPlugin();\n\n  static Future\u003Cvoid> init() async {\n    tz.initializeTimeZones();\n\n    const androidSettings =\n        AndroidInitializationSettings('@mipmap\u002Fic_launcher');\n    const iosSettings = DarwinInitializationSettings();\n\n    const settings = InitializationSettings(\n      android: androidSettings,\n      iOS: iosSettings,\n    );\n\n    await _plugin.initialize(settings);\n  }\n}","dart","La classe NotificationService è pronta per essere inizializzata.",{"id":49,"position":50,"title":51,"body":52,"code_snippet":53,"code_language":46,"expected_result":54,"demo_url":10,"video_url":10},73,4,"Inizializzare il servizio e richiedere i permessi","Nel `main()` rendiamo asincrona la funzione, assicuriamoci che i binding di Flutter siano inizializzati e chiamiamo `NotificationService.init()`.\n\nSu Android 13+ e iOS è necessario richiedere esplicitamente il permesso di mostrare notifiche. Aggiungiamo un metodo dedicato nel servizio.","\u002F\u002F Dentro NotificationService\nstatic Future\u003Cvoid> requestPermissions() async {\n  await _plugin\n      .resolvePlatformSpecificImplementation\u003C\n          AndroidFlutterLocalNotificationsPlugin>()\n      ?.requestNotificationsPermission();\n\n  await _plugin\n      .resolvePlatformSpecificImplementation\u003C\n          IOSFlutterLocalNotificationsPlugin>()\n      ?.requestPermissions(alert: true, badge: true, sound: true);\n}\n\n\u002F\u002F main.dart\nvoid main() async {\n  WidgetsFlutterBinding.ensureInitialized();\n  await NotificationService.init();\n  await NotificationService.requestPermissions();\n  runApp(const MyApp());\n}","All'avvio l'app richiede all'utente il permesso di inviare notifiche.",{"id":56,"position":57,"title":58,"body":59,"code_snippet":60,"code_language":46,"expected_result":61,"demo_url":10,"video_url":10},74,5,"Mostrare una notifica immediata","Aggiungiamo al servizio un metodo `showNotification` che definisce i dettagli della notifica. Su Android è obbligatorio specificare un **channel** (id, nome e descrizione), mentre su iOS i dettagli sono più semplici.\n\nIl metodo `show` accetta un id univoco, un titolo, un corpo e i dettagli della piattaforma.","static Future\u003Cvoid> showNotification({\n  required int id,\n  required String title,\n  required String body,\n}) async {\n  const androidDetails = AndroidNotificationDetails(\n    'canale_principale',\n    'Notifiche principali',\n    channelDescription: 'Canale per le notifiche generali',\n    importance: Importance.max,\n    priority: Priority.high,\n  );\n  const iosDetails = DarwinNotificationDetails();\n\n  const details = NotificationDetails(\n    android: androidDetails,\n    iOS: iosDetails,\n  );\n\n  await _plugin.show(id, title, body, details);\n}","Chiamando il metodo viene mostrata immediatamente una notifica di sistema.",{"id":63,"position":64,"title":65,"body":66,"code_snippet":67,"code_language":46,"expected_result":68,"demo_url":10,"video_url":10},75,6,"Programmare una notifica nel futuro","Per le notifiche pianificate usiamo `zonedSchedule`, che richiede un'istanza `TZDateTime`. Calcoliamo l'orario futuro a partire da `tz.local`.\n\nIl parametro `androidScheduleMode` con `exactAllowWhileIdle` garantisce la consegna anche in modalità doze. `matchDateTimeComponents` può essere usato per ripetizioni giornaliere o settimanali.","static Future\u003Cvoid> scheduleNotification({\n  required int id,\n  required String title,\n  required String body,\n  required Duration delay,\n}) async {\n  final scheduledDate = tz.TZDateTime.now(tz.local).add(delay);\n\n  const details = NotificationDetails(\n    android: AndroidNotificationDetails(\n      'canale_programmate',\n      'Notifiche programmate',\n      importance: Importance.max,\n      priority: Priority.high,\n    ),\n    iOS: DarwinNotificationDetails(),\n  );\n\n  await _plugin.zonedSchedule(\n    id,\n    title,\n    body,\n    scheduledDate,\n    details,\n    androidScheduleMode: AndroidScheduleMode.exactAllowWhileIdle,\n  );\n}","Una notifica viene consegnata dopo l'intervallo di tempo specificato.",{"id":70,"position":71,"title":72,"body":73,"code_snippet":74,"code_language":46,"expected_result":75,"demo_url":10,"video_url":10},76,7,"Collegare i metodi all'interfaccia","Infine creiamo una semplice UI con due pulsanti: uno per mostrare subito una notifica e uno per programmarla tra 5 secondi. Così potrai testare entrambi i comportamenti.\n\nRicorda di usare id diversi per evitare che una notifica sovrascriva l'altra.","class 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('Notifiche locali')),\n      body: Center(\n        child: Column(\n          mainAxisAlignment: MainAxisAlignment.center,\n          children: [\n            ElevatedButton(\n              onPressed: () => NotificationService.showNotification(\n                id: 0,\n                title: 'Ciao!',\n                body: 'Questa è una notifica immediata',\n              ),\n              child: const Text('Notifica immediata'),\n            ),\n            ElevatedButton(\n              onPressed: () => NotificationService.scheduleNotification(\n                id: 1,\n                title: 'Promemoria',\n                body: 'Sono passati 5 secondi!',\n                delay: const Duration(seconds: 5),\n              ),\n              child: const Text('Programma tra 5s'),\n            ),\n          ],\n        ),\n      ),\n    );\n  }\n}","L'app mostra due pulsanti funzionanti che attivano notifiche immediate e programmate.",[],1781420706470]