Планирование уведомлений с помощью Local Notifications в Flutter

Эта статья переведена специально для канала FlutterPulse. В этом канале вы найдёте много интересных вещей, связанных с Flutter. Не забывайте подписываться! 🚀

Push-уведомления отлично подходят для обновлений в реальном времени, но что, если вам нужны запланированные напоминания, периодические оповещения или уведомления оффлайн…

Push-уведомления отлично подходят для обновлений в реальном времени, но что, если вам нужны запланированные напоминания, периодические оповещения или уведомления оффлайн? Вот где приходят на помощь локальные уведомления!

В этом руководстве вы узнаете, как:
✅ Настроить локальные уведомления в Flutter
✅ Запланировать однократные и повторяющиеся уведомления
✅ Правильно обрабатывать уведомления в фоне

1️⃣ Зачем использовать локальные уведомления?

В отличие от push-уведомлений (FCM) которые требуют сервера, локальные уведомления работают полностью оффлайн на устройстве.

📌 Сферы применения:
✔️ Напоминания и будильники — Запланировать напоминание о задачах или приёме лекарств
✔️ Периодические обновления — Уведомлять пользователей ежедневно или еженедельно (например, отслеживание физической активности)
✔️ Оффлайн-оповещения — Уведомлять пользователей без доступа к интернету

2️⃣ Настройка локальных уведомлений в Flutter

🔹 Шаг 1: Добавление зависимостей

В pubspec.yaml:

dependencies:
  flutter_local_notifications: ^16.3.0
  timezone: ^0.9.2

Выполните:

flutter pub get

🔹 Шаг 2: Настройка для Android и iOS

Настройка Android

Отредактируйте AndroidManifest.xml (внутри android/app/src/main/AndroidManifest.xml):

<uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED"/>
<receiver
    android:name="com.dexterous.flutterlocalnotifications.ScheduledNotificationReceiver"
    android:exported="false"/>

Настройка iOS

Для iOS обновите ios/Runner/Info.plist:

<key>UIBackgroundModes</key>
<array>
    <string>fetch</string>
    <string>remote-notification</string>
</array>

🔹 Шаг 3: Инициализация локальных уведомлений

Создайте новый файл notification_service.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 {
  static final FlutterLocalNotificationsPlugin _notificationsPlugin =
      FlutterLocalNotificationsPlugin();

  static Future<void> init() async {
    // Initialize timezone for scheduling
    tz.initializeTimeZones();
    const AndroidInitializationSettings androidSettings =
        AndroidInitializationSettings('@mipmap/ic_launcher');
    const DarwinInitializationSettings iosSettings =
        DarwinInitializationSettings();
    const InitializationSettings settings = InitializationSettings(
      android: androidSettings,
      iOS: iosSettings,
    );
    await _notificationsPlugin.initialize(settings);
  }

  static Future<void> showNotification(
      int id, String title, String body) async {
    const AndroidNotificationDetails androidDetails =
        AndroidNotificationDetails(
      'channel_id',
      'channel_name',
      importance: Importance.high,
      priority: Priority.high,
    );
    const NotificationDetails details =
        NotificationDetails(android: androidDetails);
    await _notificationsPlugin.show(id, title, body, details);
  }
}

✅ Теперь приложение может показывать мгновенные локальные уведомления.

3️⃣ Планирование уведомлений в Flutter

🔹 Планирование единовременного уведомления

В notification_service.dart, добавьте:

static Future<void> scheduleNotification(
    int id, String title, String body, DateTime scheduledTime) async {
  await _notificationsPlugin.zonedSchedule(
    id,
    title,
    body,
    tz.TZDateTime.from(scheduledTime, tz.local),
    const NotificationDetails(
      android: AndroidNotificationDetails(
        'channel_id',
        'Scheduled Notifications',
        importance: Importance.high,
        priority: Priority.high,
      ),
    ),
    androidAllowWhileIdle: true,
    uiLocalNotificationDateInterpretation:
        UILocalNotificationDateInterpretation.absoluteTime,
  );
}

✅ Теперь вы можете запланировать уведомление на любое будущее время!

Пример:

DateTime scheduledTime = DateTime.now().add(Duration(seconds: 10));
NotificationService.scheduleNotification(1, "Reminder", "This is a scheduled notification", scheduledTime);

Это вызовет уведомление через 10 секунд.

🔹 Планирование повторяющихся уведомлений

Чтобы отправлять ежедневные, еженедельные или пользовательские повторяющиеся уведомления, измените функцию:

static Future<void> scheduleRepeatingNotification(
    int id, String title, String body, Duration interval) async {
  await _notificationsPlugin.periodicallyShow(
    id,
    title,
    body,
    RepeatInterval.everyMinute, // Can be daily, weekly, etc.
    const NotificationDetails(
      android: AndroidNotificationDetails(
        'repeat_channel_id',
        'Repeating Notifications',
        importance: Importance.high,
        priority: Priority.high,
      ),
    ),
    androidAllowWhileIdle: true,
  );
}

Пример:

NotificationService.scheduleRepeatingNotification(2, "Daily Reminder", "Check your app!", Duration(days: 1));

✅ Это вызовет ежедневные уведомления!

🔹 Отмена уведомлений

Чтобы отменить конкретное уведомление:

NotificationService.cancelNotification(1);

Для отмены всех уведомлений:

NotificationService.cancelAllNotifications();

4️⃣ Реализация уведомлений в интерфейсе

Измените main.dart для запуска уведомлений из интерфейса:

import 'package:flutter/material.dart';
import 'notification_service.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await NotificationService.init();
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: NotificationScreen(),
    );
  }
}
class NotificationScreen extends StatefulWidget {
  @override
  _NotificationScreenState createState() => _NotificationScreenState();
}
class _NotificationScreenState extends State<NotificationScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Local Notifications")),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                NotificationService.showNotification(
                    1, "Hello!", "This is an instant notification");
              },
              child: Text("Show Instant Notification"),
            ),
            ElevatedButton(
              onPressed: () {
                DateTime scheduledTime = DateTime.now().add(Duration(seconds: 10));
                NotificationService.scheduleNotification(
                    2, "Scheduled!", "This will appear after 10 seconds", scheduledTime);
              },
              child: Text("Schedule Notification"),
            ),
            ElevatedButton(
              onPressed: () {
                NotificationService.scheduleRepeatingNotification(
                    3, "Repeating", "This will repeat every minute", Duration(minutes: 1));
              },
              child: Text("Start Repeating Notification"),
            ),
            ElevatedButton(
              onPressed: () {
                NotificationService.cancelAllNotifications();
              },
              child: Text("Cancel All Notifications"),
            ),
          ],
        ),
      ),
    );
  }
}

✅ Теперь вы можете тестировать мгновенные, запланированные и повторяющиеся уведомления! 🎉

🎯 Заключение

В этом руководстве мы узнали, как:
✅ Показывать мгновенные локальные уведомления
✅ Запланировать уведомления на будущие события
✅ Создавать повторяющиеся уведомления (ежедневно, еженедельно и т.д.)
✅ Отменять уведомления по мере необходимости