Customizing Notification Sounds, Vibration & LED 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 great for engaging users, but default alerts may not always suit your app's branding or user experience. In this…

Push notifications are great for engaging users, but default alerts may not always suit your app's branding or user experience. In this guide, we'll customize:

✅ Notification Sounds — Use a custom sound instead of the default one 🎶
✅ Vibration Patterns — Define unique haptic feedback 🔆
✅ LED Lights (Android) — Set different colors for notifications 🌈

We'll implement these features using flutter_local_notifications and Firebase Cloud Messaging (FCM).

Step 1: Add Dependencies

Modify pubspec.yaml to include:

dependencies:
  flutter_local_notifications: latest_version
  firebase_messaging: latest_version

Run:

flutter pub get

Step 2: Configure Notification Channel (Android Only)

Android requires a notification channel to use custom sounds and LED lights.

Modify AndroidManifest.xml

Navigate to:
📂 android/app/src/main/AndroidManifest.xml

Inside <application> tag, add:

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

Step 3: Setting Up Custom Sounds 🎵

1. Add Sound Files

Place your custom sound file (custom_sound.mp3) in:

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

If raw folder doesn't exist, create it manually.

2. Register Custom Sound in Flutter

Modify the notification details:

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'), // Remove file extension
    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,
  );
}

🛠️ Note: iOS requires sound files in .caf or .aiff format. Place them in ios/Runner/Resources.

Step 4: Customizing Vibration Patterns 🎚️

Modify the vibration pattern to create different haptic effects:

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

💡 How It Works:

• 0 → No delay before vibration
• 500 → Vibrate for 500ms
• 1000 → Pause for 1000ms
• Repeat for different intervals

Step 5: Customizing LED Lights (Android Only) 🌈

Modify notification details to change LED color:

const AndroidNotificationDetails androidDetails = AndroidNotificationDetails(
  'led_channel',
  'LED Notifications',
  enableLights: true,
  ledColor: Color(0xFFFF0000), // Red LED
  ledOnMs: 1000,
  ledOffMs: 500,
  importance: Importance.high,
);

Step 6: Implementing Custom Notifications in Firebase Messaging

1. Modify Firebase Cloud Messaging (FCM) Payload

When sending notifications from FCM, modify the payload to include custom sounds & vibration:

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

Step 7: Testing Custom Notifications

1️⃣ Send FCM Notification via Postman or Firebase Console
2️⃣ Check if sound, vibration, and LED changes reflect
3️⃣ Modify settings dynamically for user preferences

Conclusion

🎉 You've successfully customized notifications in Flutter! 🚀

✅ Custom Sounds 🎵
✅ Vibration Patterns 🔆
✅ LED Light Colors 🌈

💬 Have questions? Let me know in the comments! 🚀

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