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

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

Push notifications are a key way to engage users, but default notification sounds and styles can feel generic. Customizing notification…

Push notifications are a key way to engage users, but default notification sounds and styles can feel generic. Customizing notification sounds and appearance makes your app stand out and provides a unique user experience.

In this guide, we'll explore:
✅ Настройка пользовательских звуков уведомлений для Android и iOS
✅ Стилизация уведомлений с изображениями, кнопками и большим текстом
✅ Использование Firebase Cloud Messaging (FCM) для отправки богатых уведомлений

By the end, you'll have fully customized notifications that grab user attention! 🚀

Шаг 1: Настройка Firebase Messaging в Flutter

Before customizing notifications, ensure your Flutter app is set up with Firebase Cloud Messaging (FCM).

1.1 Добавление зависимостей

In pubspec.yaml, add:

dependencies:
  firebase_messaging: latest_version
  flutter_local_notifications: latest_version

Run:

flutter pub get

1.2 Инициализация Firebase Messaging

Modify main.dart:

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  FirebaseMessaging.onBackgroundMessage(_firebaseMessagingBackgroundHandler);
  runApp(MyApp());
}

Future<void> _firebaseMessagingBackgroundHandler(RemoteMessage message) async {
  print("Background Message: ${message.notification?.title}");
}

Шаг 2: Пользовательские звуки уведомлений 🎵

By default, FCM notifications play the system sound. To set a custom sound, follow these steps:

2.1 Добавление пользовательского звукового файла

📌 Для Android

Place your sound file (custom_sound.mp3) inside:

android/app/src/main/res/raw/

Убедитесь, что имя файла в нижнем регистре с без пробелов.

📌 Для iOS

Добавьте звуковой файл .wav в:

ios/Runner/Resources/

Откройте Info.plist и добавьте:

<key>UIBackgroundModes</key>
<array>
    <string>audio</string>
</array>

2.2 Настройка уведомлений для использования пользовательского звука

Измените полезную нагрузку уведомления в FCM:

{
  "to": "/topics/allUsers",
  "notification": {
    "title": "Новое сообщение!",
    "body": "Проверьте последнее обновление.",
    "sound": "custom_sound"
  }
}

2.3 Обработка уведомлений в Flutter

const AndroidNotificationDetails androidDetails = AndroidNotificationDetails(
  'channel_id',
  'channel_name',
  sound: RawResourceAndroidNotificationSound('custom_sound'),
  importance: Importance.max,
  priority: Priority.high,
);

const NotificationDetails notificationDetails =
    NotificationDetails(android: androidDetails);

await flutterLocalNotificationsPlugin.show(
  0,
  "Новое уведомление!",
  "Это уведомление с пользовательским звуком.",
  notificationDetails,
);

Шаг 3: Настройка стилей уведомлений 🎨

3.1 Расширение уведомления с большим текстом

const BigTextStyleInformation bigTextStyleInformation = BigTextStyleInformation(
  "Это длинное сообщение уведомления, которое будет отображаться в развернутом виде, когда пользователь потянет вниз панель уведомлений.",
  contentTitle: "Расширенное уведомление",
  summaryText: "Нажмите, чтобы увидеть больше",
);

const AndroidNotificationDetails androidDetails = AndroidNotificationDetails(
  'channel_id',
  'channel_name',
  styleInformation: bigTextStyleInformation,
  importance: Importance.max,
  priority: Priority.high,
);

3.2 Добавление изображений в уведомления 🖼️

Добавьте URL изображения в полезную нагрузку FCM:

{
  "to": "/topics/allUsers",
  "notification": {
    "title": "Срочные новости!",
    "body": "Посмотрите это изображение!",
    "image": "https://example.com/news.jpg"
  }
}

Обработайте уведомления с изображениями в Flutter:

const BigPictureStyleInformation bigPictureStyleInformation =
    BigPictureStyleInformation(
  DrawableResourceAndroidBitmap('notification_image'),
  contentTitle: "Срочные новости!",
  summaryText: "Нажмите, чтобы увидеть полное изображение",
);

const AndroidNotificationDetails androidDetails = AndroidNotificationDetails(
  'channel_id',
  'channel_name',
  styleInformation: bigPictureStyleInformation,
  importance: Importance.max,
  priority: Priority.high,
);

3.3 Добавление кнопок действий 🎮

Определите кнопки действий в AndroidNotificationDetails:

const AndroidNotificationDetails androidDetails = (
  'channel_id',
  'channel_name',
  actions: <AndroidNotificationAction>[
    AndroidNotificationAction('reply', 'Reply'),
    AndroidNotificationAction('mark_read', 'Mark as Read'),
  ],
);

Обработайте нажатия на кнопки внутри onSelectNotification:

void onSelectNotification(String? payload) {
  if (payload == 'reply') {
    print("User tapped Reply");
  } else if (payload == 'mark_read') {
    print("User tapped Mark as Read");
  }
}

Шаг 4: Обработка уведомлений на переднем и заднем плане

4.1 Обработка уведомлений на переднем плане

Используйте FirebaseMessaging.onMessage для обработки уведомлений, когда приложение открыто:

FirebaseMessaging.onMessage.listen((RemoteMessage message) {
  if (message.notification != null) {
    sendLocalNotification(message.notification);
  }
});

4.2 Состояние заднего плана и завершения

Убедитесь, что вы обрабатываете уведомления, когда приложение находится в фоне или закрыто:

FirebaseMessaging.onMessageOpenedApp.listen((RemoteMessage message) {
  print("User tapped notification: ${message.notification?.title}");
});

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

5.1 Ручная отправка уведомления FCM

Используйте Postman или cURL для отправки тестового уведомления:

curl -X POST "https://fcm.googleapis.com/fcm/send" \
  -H "Authorization: key=YOUR_SERVER_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "to": "/topics/allUsers",
    "notification": {
      "title": "Custom Notification!",
      "body": "With custom sound & image",
      "sound": "custom_sound",
      "image": "https://example.com/image.jpg"
    }
  }'

Если всё настроено правильно, вы должны получить богатое, стилизованное уведомление с пользовательским звуком! 🎉

Заключение

Поздравляем! 🎉 Вы успешно настроили пользовательские push-уведомления в Flutter, выполнив следующие действия:
✅ Добавление пользовательских звуков уведомлений
✅ Стилизация уведомлений с помощью изображений, большого текста и кнопок действий
✅ Обработка уведомлений на переднем и заднем плане

🔥 Что дальше?

• Реализуйте планируемые уведомления для напоминаний
• Добавьте глубокие ссылки для открытия определённых экранов из уведомления
• Используйте локальные уведомления для встроенных оповещений

Есть вопросы или идеи? Оставьте комментарий! 🚀 Следите за новыми советами по Flutter!