Customer.io Push Notification Configuration in Flutter: A Step-by-Step Guide

As a mobile app developer, integrating push notifications is often one of those tasks that’s both essential and slightly intimidating. Recently, I had to integrate Customer.io push notifications into my Flutter app. At first, the documentation seemed sparse for Flutter specifically, so I decided to break down my experience step-by-step, hoping it helps someone else navigating the same waters.

In this blog, I’ll walk you through how I initialized the Customer.io SDK, identified users, registered devices for push, and tracked events—all in Flutter.

1. Initializing the Customer.io SDK

Before I could do anything, I needed to set up the Customer.io Flutter SDK. Thankfully, the official package customer_io provides good basics.

First, I added the dependency to my pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  customer_io: ^1.0.2 # Check for latest version

Then, I initialized the SDK in my main file or a suitable init service. You’ll need your Site ID and API Key, which you can get from the Customer.io dashboard under Settings > Workspace Settings > API Credentials.

Here’s how I set it up:

void main() {
  CIOInitialize();
  runApp(MyApp());
}

void CIOInitialize() {
  CustomerIO.initialize(
    siteId: "YOURSITEID",
    apiKey: "YOURAPIKEY",
    region: Region.US, // or Region.EU depending on your workspace
    config: CustomerIOConfig(
      autoTrackDeviceAttributes: true,
    ),
  );
}

The autoTrackDeviceAttributes flag helped auto-capture device info, which made debugging easier later on.

2. Identifying the User

Next, I had to identify the user with Customer.io. This is crucial because all events, messages, and device tokens are tied to an identified user.

Typically, I called this method right after login or account creation:

void identifyUser(String userId, String email) {
  CustomerIO.instance.identify(
    identifier: userId,
    attributes: {
      "email": email,
      "name": "John Doe", // Add other user traits if needed
    },
  );
}

I used a unique user ID from my backend. Without this step, push notifications won’t be tied to any user, and Customer.io won’t know where to send them.

To clear the user on logout, I did:

CustomerIO.instance.clearIdentify();

This ensures any subsequent user data isn’t accidentally tied to the previous user.

3. Registering the Device for Push Notifications

Now comes the fun part—push tokens. Flutter uses Firebase Cloud Messaging (FCM) under the hood for push, so I had to integrate firebase_messaging first:

dependencies:
  firebase_core: ^2.0.0
  firebase_messaging: ^14.0.0

I initialized Firebase in my main function:

import ’package:firebasecore/firebasecore.dart’;

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

Then I got the device token and passed it to Customer.io:

import ’package:firebasemessaging/firebasemessaging.dart’;

void registerDeviceForPush() async {
  String? token = await FirebaseMessaging.instance.getToken();
  if (token != null) {
    CustomerIO.instance.registerDeviceToken(token);
    print("Device registered with token: $token");
  }
}

I also listened for token refreshes:

FirebaseMessaging.instance.onTokenRefresh.listen((newToken) {
  CustomerIO.instance.registerDeviceToken(newToken);
});

Without registering the device token, push notifications simply won’t work. This step is non-negotiable.

4. Tracking Events

Once the basics were in place, I wanted to track some custom events like "Purchase", "Viewed Item", or "Subscribed Newsletter".

Here’s a sample call:

void trackPurchaseEvent(double amount, String itemId) {
  CustomerIO.instance.track(
    name: "purchase",
    attributes: {
      "amount": amount,
      "item_id": itemId,
      "currency": "USD",
    },
  );
}

These events show up in the Customer.io dashboard and can be used to trigger campaigns, workflows, or even audience segmentation.

I made it a habit to track key events in the app to get better insights into user behavior and build automated messaging journeys.

Conclusion

Integrating Customer.io push notifications in Flutter turned out to be a lot smoother than I expected, once I understood the core steps. Here’s a quick recap of what I did:

• Initialized the SDK with my site credentials.
• Identified users right after login or signup.
• Registered device tokens with Firebase for push.
• Tracked custom events to trigger workflows and gain insights.

While Flutter support is still evolving, the existing SDK and Firebase integration made it workable. I recommend encapsulating this logic into a service class to keep things modular and testable.

If you’re on the same journey, I hope this post saves you time and gets your push notifications up and running with Customer.io in no time. Feel free to drop questions or suggestions in the comments—I’m always happy to share ideas and learn from others!