Customizing Notification Sounds & Styles in Flutter

This article was translated specially for the channel FlutterPulseYou'll find lots of interesting things related to Flutter on this channel. Don't hesitate to subscribe!🚀

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:
✅ Setting up custom notification sounds for both Android and iOS
✅ Styling notifications with images, buttons, and big text
✅ Using Firebase Cloud Messaging (FCM) to trigger rich notifications

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

Step 1: Setting Up Firebase Messaging in Flutter

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

1.1 Add Dependencies

In pubspec.yaml, add:

dependencies:
  firebase_messaging: latest_version
  flutter_local_notifications: latest_version

Run:

flutter pub get

1.2 Initialize 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}");
}

Step 2: Custom Notification Sounds 🎵

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

2.1 Add Custom Sound File

📌 For Android

Place your sound file (custom_sound.mp3) inside:

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

Ensure the file name is lowercase with no spaces.

📌 For iOS

Add the .wav sound file to:

ios/Runner/Resources/

Open Info.plist and add:

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

2.2 Configure Notifications to Use Custom Sound

Modify notification payload in FCM:

{
  "to": "/topics/allUsers",
  "notification": {
    "title": "New Message!",
    "body": "Check out the latest update.",
    "sound": "custom_sound"
  }
}

2.3 Handle Notifications in 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,
  "New Alert!",
  "This is a custom sound notification.",
  notificationDetails,
);

Step 3: Customizing Notification Styles 🎨

3.1 Expanding Notification with Big Text

const BigTextStyleInformation bigTextStyleInformation = BigTextStyleInformation(
  "This is a long notification message that will be displayed in an expanded form when the user pulls down the notification bar.",
  contentTitle: "Expanded Notification",
  summaryText: "Tap to view more",
);

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

3.2 Adding Images to Notifications 🖼️

Add an image URL to your FCM payload:

{
  "to": "/topics/allUsers",
  "notification": {
    "title": "Breaking News!",
    "body": "Check out this image!",
    "image": "https://example.com/news.jpg"
  }
}

Handle image notifications in Flutter:

const BigPictureStyleInformation bigPictureStyleInformation =
    BigPictureStyleInformation(
  DrawableResourceAndroidBitmap('notification_image'),
  contentTitle: "Breaking News!",
  summaryText: "Tap to see full image",
);

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

3.3 Adding Action Buttons 🎮

Define action buttons in AndroidNotificationDetails:

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

Handle button taps inside onSelectNotification:

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

Step 4: Handling Foreground & Background Notifications

4.1 Foreground Notification Handling

Use FirebaseMessaging.onMessage to handle notifications when the app is open:

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

4.2 Background & Terminated State

Make sure you handle notifications when the app is in the background or closed:

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

Step 5: Testing Your Custom Notifications

5.1 Manually Send FCM Notification

Use Postman or cURL to send a test notification:

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"
    }
  }'

If everything is set up correctly, you should receive a rich, styled notification with a custom sound! 🎉

Conclusion

Congratulations! 🎉 You've successfully customized push notifications in Flutter by:
✅ Adding custom notification sounds
✅ Styling notifications with images, big text, and action buttons
✅ Handling foreground & background notifications

🔥 What's Next?

• Implement scheduled notifications for reminders
• Add deep linking to open specific screens from a notification
• Use local notifications for in-app alerts

Have questions or ideas? Drop a comment! 🚀 Stay tuned for more Flutter tips!

If you found this story helpful, you can support me at Buy Me a Coffee!