Skip to content

Setting up Mixpanel for Flutter

Getting Started

In order to use Mixpanel on your flutter project, it's pretty much straightforwrd. Install the current version of Mixpanel by adding it as a dependency in your pubspec.yaml

  mixpanel_flutter: ^2.2.0


To use Mixpanel, we are leveraging on GetX for state management. Our custom Sisitech Mixpanel library exposes a MixPanelController that takes a mixpanel Token and MixpanelOptions. The current options include :

  const MixpanelOptions({
    this.enableAnonymous = true,
    this.enabled = true,
    this.persistentAnonymous = true,
    this.disableInDebug = true,

In your main() function, add mixpanel and pass the token as below.

void main() async {
    MixPanelController(mixpanelToken: "your_mixpanel_token"),

In order to track an event, fetch the MixPanelController using GetX. Ensure you use try and catch in case miXpanel is not initialized.

  Widget build(BuildContext context) {
    bool mixPanelEnabled = false;
    MixPanelController? mixCont;
    try {
      mixCont = Get.find<MixPanelController>();
      mixPanelEnabled = true;
    } catch (e) {
      mixPanelEnabled = false;

pass the track() property as below in your onPressed() function to start tracking an event.

  onTap: () {
      properties: {"item_title": item.title},

NOTE: All tracking happens in the specific Sisitech library. In order to expand a feature you will need to do it in the library.

Under The Hood

The mixpanel library is found in Sisitech's Flutter Utils. The library folder contains two files: mixpanel.dart and mixpanel_controller.dart.

The mixpanel file contains an initMixpanel() function that sets up your product for initialization.

import 'package:mixpanel_flutter/mixpanel_flutter.dart';

Future<Mixpanel> initMixpanel(token, {trackAutomaticEvents=true}) async {
    // dprint('mixpanel init');
    var mixpanel = await Mixpanel.init(token, trackAutomaticEvents: trackAutomaticEvents);
    return mixpanel;

The mixpanel_controller file contains different functions used to track Mixpanel events.

import 'package:flutter_auth/flutter_auth_controller.dart';
import 'package:flutter_utils/flutter_utils.dart';
import 'package:flutter_utils/mixpanel/mixpanel.dart';
import 'package:get/get.dart';
import 'package:mixpanel_flutter/mixpanel_flutter.dart';

class MixpanelOptions {
  final bool enableAnonymous;
  final bool enabled;
  final bool persistentAnonymous;
  final bool disableInDebug;
  const MixpanelOptions({
    this.enableAnonymous = true,
    this.enabled = true,
    this.persistentAnonymous = true,
    this.disableInDebug = true,

class MixPanelController extends GetxController {
  late String mixpanelToken;
  Mixpanel? _mixpanel;
  late MixpanelOptions options;
  AuthController authController = Get.find<AuthController>();

      {required this.mixpanelToken, this.options = const MixpanelOptions()});

  void onInit() {

  get mixpanel {
    return _mixpanel;

  saveAnonymousId() {}

  getSavedAnonymousId() {}

  getAnonymouseuser() {
    // Save a unique id to local storage and use it everytime
    // The key should be passed when initializing.
    if (options.enableAnonymous && options.persistentAnonymous) {
      // Save or get
    return "Anonymous";

  get isDisAbled {
    if (options.disableInDebug) {
      return false;
    // Check if anonymous mode enalbed
    if (!authController.isAuthenticated$.value && !options.enableAnonymous) {
      return false;
    return options.enabled;

  getUser() {
    var anymousProfile = {"username": getAnonymouseuser()};
    Map<String, dynamic> profile;
    if (authController.isAuthenticated$.value) {
      profile = authController.profile.value ?? anymousProfile;
          "Mixpanel User ${authController.profile.value?["username"]} initialized.");
    } else {
      profile = anymousProfile;
    return profile;

  initializeMixPanel(MixpanelOptions options) async {
    if (isDisAbled) {
          "Mixpanel disabled,disableInDebug:${options.disableInDebug} enabled:${options.enabled}");
    _mixpanel = await initMixpanel(mixpanelToken);
    var profile = getUser();

  track(String eventName, {Map<String, dynamic>? properties}) {
    _mixpanel?.track(eventName, properties: properties);

  timeEvent(String eventName) {

Most importantly, initializeMixPanel and track functions are most resourcesful. You can add new functions in the controller i.e. getAnonymouseuser()