🗣️
Discuss
ML
Matheus Lucena
·Posted in Discuss

Mixpanel Integration in FlutterFlow (Custom Actions)

Best Practices

Hi everyone! I created this post to contribute to a topic I recently needed help with here on the forum. If you want to track events and identify users in Mixpanel directly from your FlutterFlow app, you can do this by creating a few Custom Actions and calling them at the right points in your application. Below, I’ll share a practical example in three steps: initialization, event tracking, and user identification. I hope it’s useful for anyone who needs to do the same. 🙂

Initializing Mixpanel

The first step is to create a Custom Action called initMixpanel.
This will be responsible for starting Mixpanel as soon as the app loads.

import 'package:mixpanel_flutter/mixpanel_flutter.dart';

class MixpanelService {
  static final MixpanelService _instance = MixpanelService._internal();
  Mixpanel? _mixpanel;

  factory MixpanelService() => _instance;

  MixpanelService._internal();

  Future<void> init(String token) async {
    _mixpanel = await Mixpanel.init(token, trackAutomaticEvents: true);
  }

  Mixpanel? get instance => _mixpanel;
}

Future initMixpanel() async {
  await MixpanelService().init('YOUR_PROJECT_TOKEN');
}

Where to use in FlutterFlow:

  • Go to Configuration Files > main.dart.

  • In Initial Actions, add the initMixpanel Custom Action to make sure Mixpanel is initialized as soon as the app starts.

Tracking events (Track Actions)

Once Mixpanel is initialized, we can start tracking actions in the app.
Create another Custom Action to log simple events like button clicks or menu openings.

import 'package:mixpanel_flutter/mixpanel_flutter.dart';
import 'init_mixpanel.dart';

Future<void> trackMixpanelSimpleEvent(String eventName) async {
  final mixpanel = MixpanelService().instance;

  if (mixpanel == null) {
    print("Mixpanel not initialized.");
    return;
  }

  mixpanel.track(eventName);
}

Note: We import init_mixpanel.dart so that we can access the already-initialized Mixpanel instance.

Function parameter:

  • eventName (string) → the name of the event you want to log (e.g., "button_clicked", "menu_opened").

Identifying users in Mixpanel

To link events to specific users, you can identify each one using the distinctId (often the User Ref in FlutterFlow) and the display name.

import 'package:mixpanel_flutter/mixpanel_flutter.dart';
import 'init_mixpanel.dart';

Future<void> identifyMixpanelUser(
  String distinctId,
  String nome,
) async {
  final mixpanel = MixpanelService().instance;

  if (mixpanel == null) {
    print('Mixpanel not initialized.');
    return;
  }

  // Identify the user
  await mixpanel.identify(distinctId);

  // Set only the 'name' property
  final people = mixpanel.getPeople();
  people.set('nome', nome);
}

Note: Just like with the other actions, it’s essential to import the initialization file (init_mixpanel.dart) to reuse the Mixpanel instance.

Function parameters:

  • distinctId (string) → unique user reference (User Ref).

  • nome (string) → display name.

Final tip: Always initialize Mixpanel before tracking events or identifying users. In FlutterFlow, this means the initMixpanel action should run at the very beginning of the app, such as on the splash screen or in a global initialization flow.

5