Настройка звуков уведомлений, вибрации и светодиода в Flutter

FlutterPulse

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

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

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

✅ Звуки уведомлений — Используйте пользовательский звук вместо стандартного 🎶
✅ Вибрационные узоры — Определите уникальную тактильную обратную связь 🔆
✅ Светодиодные индикаторы (Android) — Установите разные цвета для уведомлений 🌈

Мы реализуем эти функции с использованием flutter_local_notifications и Firebase Cloud Messaging (FCM).

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

Измените pubspec.yaml для включения:

dependencies:
  flutter_local_notifications: latest_version
  firebase_messaging: latest_version

Запустите:

flutter pub get

Шаг 2: Настройка канала уведомлений (только для Android)

Android требует канала уведомлений для использования пользовательских звуков и светодиодных индикаторов.

Изменение AndroidManifest.xml

Перейдите в:
📂 android/app/src/main/AndroidManifest.xml

Внутри тега <application> добавьте:

<uses-permission android:name="android.permission.VIBRATE"/>

Шаг 3: Настройка пользовательских звуков 🎵

1. Добавление звуковых файлов

Разместите ваш пользовательский звуковой файл (custom_sound.mp3) в:

📂 android/app/src/main/res/raw/custom_sound.mp3

Если папка raw не существует, создайте её вручную.

2. Регистрация пользовательского звука в Flutter

Измените детали уведомления:

import 'package:flutter_local_notifications/flutter_local_notifications.dart';

final FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin =
    FlutterLocalNotificationsPlugin();

void showCustomSoundNotification() async {
  const AndroidNotificationDetails androidDetails = AndroidNotificationDetails(
    'custom_sound_channel',
    'Custom Sound Notifications',
    sound: RawResourceAndroidNotificationSound('custom_sound'), // Удалите расширение файла
    importance: Importance.high,
    priority: Priority.high,
  );
  const NotificationDetails details = NotificationDetails(android: androidDetails);
  await flutterLocalNotificationsPlugin.show(
    0,
    "Custom Sound Alert",
    "This notification uses a custom sound!",
    details,
  );
}

🛠️ Примечание: iOS требует звуковые файлы в формате .caf или .aiff. Разместите их в ios/Runner/Resources.

Шаг 4: Настройка вибрационных паттернов 🎚️

Измените паттерн вибрации для создания различных тактильных эффектов:

const AndroidNotificationDetails androidDetails = AndroidNotificationDetails(
  'vibration_channel',
  'Vibration Notifications',
  vibrationPattern: Int64List.fromList([0, 500, 1000, 500, 2000, 500]), 
  enableVibration: true,
  importance: Importance.high,
);

💡 Как это работает:

0 → Нет задержки перед вибрацией
500 → Вибрация в течение 500 мс
1000 → Пауза в 1000 мс
Повторяйте для разных интервалов

Шаг 5: Настройка светодиодных индикаторов (только для Android) 🌈

Измените детали уведомления, чтобы изменить цвет светодиода:

const AndroidNotificationDetails androidDetails = AndroidNotificationDetails(
  'led_channel',
  'LED Notifications',
  enableLights: true,
  ledColor: Color(0xFFFF0000), // Красный светодиод
  ledOnMs: 1000,
  ledOffMs: 500,
  importance: Importance.high,
);

Шаг 6: Реализация пользовательских уведомлений в Firebase Messaging

1. Измените payload Firebase Cloud Messaging (FCM)

При отправке уведомлений из FCM измените payload, чтобы включить пользовательские звуки и вибрацию:

{
  "to": "/topics/all",
  "notification": {
    "title": "New Alert!",
    "body": "This is a custom notification",
    "sound": "custom_sound" 
  },
  "android": {
    "notification": {
      "sound": "custom_sound",
      "vibrate_timings": ["0s", "0.5s", "1s", "1.5s"],
      "light_settings": {
        "color": "#FF0000",
        "light_on_duration": "1s",
        "light_off_duration": "0.5s"
      }
    }
  }
}

Шаг 7: Тестирование пользовательских уведомлений

1️⃣ Отправьте уведомление FCM через Postman или Firebase Console
2️⃣ Проверьте, отображаются ли изменения звука, вибрации и светодиода
3️⃣ Измените настройки динамически в соответствии с предпочтениями пользователя

Заключение

🎉 Вы успешно настроили уведомления в Flutter! 🚀

✅ Пользовательские звуки 🎵
✅ Шаблоны вибрации 🔆
✅ Цвета светодиодов 🌈