## Chapter 6: Keeping Users Engaged with Notifications Our app is now a powerful tool with a great memory. But what happens when life gets busy and a user forgets to open it? The best apps are proactive. They help users succeed by gently nudging them in the right direction. This is where notifications come in. They are our app's way of tapping the user on the shoulder and reminding them of their goals. In this final chapter of Part 1, we will: 1. Add and configure the `flutter_local_notifications` package. 2. Set up the required permissions for both Android and iOS. 3. Create a dedicated service to manage all notification logic. 4. Schedule a recurring daily notification to remind users to complete their habits. This is the feature that can turn a good app into an indispensable part of a user's daily routine. ### Step 1: Add the Dependencies We need two packages: one to handle notifications and another to handle timezones, which is crucial for scheduling notifications accurately across the globe. In your terminal, from your project root (`chapter_06/smart_habits`), run: ```bash flutter pub add flutter_local_notifications timezone ``` ### Step 2: Android Configuration (Critical!) Notifications require careful platform setup. For Android, we need to declare permissions and a receiver in the `AndroidManifest.xml` file. Navigate to `android/app/src/main/AndroidManifest.xml` and make the following additions. **1. Add Permissions inside the `` tag:** ```xml

``` **2. Add a `receiver` inside the `` tag:** This allows the app to re-schedule notifications when the device is rebooted. ```xml ``` Your final `AndroidManifest.xml` might look something like this: ```xml

``` ### Step 3: iOS Configuration For iOS, we need to request authorization from the user. The `flutter_local_notifications` plugin handles most of this, but we need to add the request to our `AppDelegate`. Navigate to `ios/Runner/AppDelegate.swift` and add the lines for requesting authorization. **`ios/Runner/AppDelegate.swift`** ```swift import UIKit import Flutter @UIApplicationMain @objc class AppDelegate: FlutterAppDelegate { override func application( _ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]? ) -> Bool { // This is the added part for iOS 10+ if #available(iOS 10.0, *) { UNUserNotificationCenter.current().delegate = self as? UNUserNotificationCenterDelegate } GeneratedPluginRegistrant.register(with: self) return super.application(application, didFinishLaunchingWithOptions: launchOptions) } } ``` ### Step 4: Building the Notification Service To keep our code clean, we'll put all notification logic into a single `NotificationService` class. We'll design it as a **singleton**, which is a fancy way of saying we'll only ever create one instance of it. 1. Create a new folder `lib/services`. 2. Create a new file `lib/services/notification_service.dart`. **`lib/services/notification_service.dart`** ```dart import 'package:flutter_local_notifications/flutter_local_notifications.dart'; import 'package:timezone/data/latest_all.dart' as tz; import 'package:timezone/timezone.dart' as tz; class NotificationService { // Singleton pattern static final NotificationService _instance = NotificationService._internal(); factory NotificationService() => _instance; NotificationService._internal(); final FlutterLocalNotificationsPlugin _notificationsPlugin = FlutterLocalNotificationsPlugin(); Future init() async { // 1. Initialize timezone database tz.initializeTimeZones(); // 2. Define settings for each platform const AndroidInitializationSettings androidSettings = AndroidInitializationSettings('@mipmap/ic_launcher'); const DarwinInitializationSettings iosSettings = DarwinInitializationSettings( requestAlertPermission: true, requestBadgePermission: true, requestSoundPermission: true, ); const InitializationSettings settings = InitializationSettings( android: androidSettings, iOS: iosSettings, ); // 3. Initialize the plugin await _notificationsPlugin.initialize(settings); } Future scheduleDaily8pmReminder() async { await _notificationsPlugin.zonedSchedule( 0, // Notification ID 'Your Daily Habit Reminder', // Title 'Don\'t forget to complete your habits today! 👋', // Body _nextInstanceOf8PM(), // When to show (calculated below) const NotificationDetails( android: AndroidNotificationDetails( 'daily_reminder_channel', // Channel ID 'Daily Reminders', // Channel Name channelDescription: 'A channel for daily habit reminders.', importance: Importance.max, priority: Priority.high, ), iOS: DarwinNotificationDetails(), ), androidAllowWhileIdle: true, uiLocalNotificationDateInterpretation: UILocalNotificationDateInterpretation.absoluteTime, matchDateTimeComponents: DateTimeComponents.time, // Repeat daily at this time ); } tz.TZDateTime _nextInstanceOf8PM() { final tz.TZDateTime now = tz.TZDateTime.now(tz.local); // Schedule for 8 PM today tz.TZDateTime scheduledDate = tz.TZDateTime(tz.local, now.year, now.month, now.day, 20); // If 8 PM has already passed today, schedule for 8 PM tomorrow if (scheduledDate.isBefore(now)) { scheduledDate = scheduledDate.add(const Duration(days: 1)); } return scheduledDate; } } ``` **Code Breakdown:** - **Singleton:** The `_instance`, `factory`, and `_internal` constructor create a singleton, so we can access our service from anywhere using `NotificationService()`. - **`init()`**: This sets up the timezone database and initializes the plugin with default settings for both platforms. For iOS, this is where we request the necessary permissions. - **`scheduleDaily8pmReminder()`**: This is where the magic happens. - `zonedSchedule`: This schedules a notification that is aware of the device's timezone. - `NotificationDetails`: This is where we configure the look and feel of the notification, including the Android "Channel," which is required. - `matchDateTimeComponents: DateTimeComponents.time`: This is the key for making it a daily recurring notification. It tells the plugin to match the time component every day. - **`_nextInstanceOf8PM()`**: This clever helper function ensures that we always schedule for the *next* available 8 PM. ### Step 5: Initialize and Use the Service Finally, let's initialize our service and schedule the notification when the app starts. Update `lib/main.dart` one last time: **`lib/main.dart`** ```dart //... other imports import 'services/notification_service.dart'; Future main() async { WidgetsFlutterBinding.ensureInitialized(); // Initialize services in order await Hive.initFlutter(); Hive.registerAdapter(HabitAdapter()); await Hive.openBox('habits'); await NotificationService().init(); await NotificationService().scheduleDaily8pmReminder(); runApp(const SmartHabitsApp()); } ``` With this, every time the user opens the app, it will ensure a daily 8 PM reminder is scheduled. ### Part 1 Conclusion: You've Built a Complete App! Take a moment and look back at what you've accomplished. You started with just an idea and a blank screen. Now, you have a complete, functional, and beautiful "Smart Habits" application. You have learned the entire core workflow of a Flutter developer: - **Planning & Prototyping**: Designing an app before writing code. - **Building UIs**: Crafting layouts with fundamental widgets like `Scaffold`, `ListView`, and `AppBar`. - **State Management**: Making your app interactive and managing data that changes. - **Data Visualization**: Turning raw data into insightful and motivating charts. - **Data Persistence**: Giving your app a memory by saving data to a local database with Hive. - **User Engagement**: Reaching out to your user with local notifications. You should be incredibly proud. These are the foundational skills you will use on every Flutter project you build from now on. ### What's Next on Your Flutter Journey? The journey is far from over! In **Part 2**, we're going to build a brand new application: an **AI-Powered Recipe App**. We'll leave the local device behind and venture into the exciting world of the internet, covering topics like: - Making HTTP requests to fetch data from a live web API. - Handling asynchronous data with `FutureBuilder`s. - Integrating a powerful Large Language Model (LLM) to generate recipes from ingredients. Get ready to level up your skills once again. See you in the next chapter!

Tutorial Series

Flutter Tutorial Part 1