Mixpanel Flutter with Example – Flutter

mixpanel flutter

Introduction 

Mixpanel Flutter with Example – Brilliansolution. Welcome to the official Mixpanel Flutter SDK. The Mixpanel Flutter SDK is an open-source project, and we’d love to see your contributions! We’d also love for you to come and work with us! Check outย Jobsย for details

Mixpanel Flutter with Example

Quick Start Guide 

Check out our official documentation for more in depth information on installing and using Mixpanel on Flutter.

1. Install Mixpanel 

Prerequisites 

Steps 

  1. Depend on it
    Add this to your package’s pubspec.yaml file:
   dependencies:
      mixpanel_flutter: ^1.x.x # set this to your desired version
  1. Install it
    You can install packages from the command line:
   $ flutter pub get
  1. Import it
    Now in your Dart code, you can use:
import 'package:mixpanel_flutter/mixpanel_flutter.dart';

Flutter Web Support

Please add the following snippet to your web/index.html inside <head></head> in your Flutter project.

<script src="./assets/packages/mixpanel_flutter/assets/mixpanel.js"></script>

2. Initialize Mixpanel 

To start tracking with the SDK you must first initialize with your project token. To initialize the SDK, first add import 'package:mixpanel_flutter/mixpanel_flutter.dart'; and call Mixpanel.init(token); with your project token as it’s argument. You can find your token in project settings.

import 'package:mixpanel_flutter/mixpanel_flutter.dart';
...
class _YourClassState extends State<YourClass> {
  Mixpanel mixpanel;

  @override
  void initState() {
    super.initState();
    initMixpanel();
  }

  Future<void> initMixpanel() async {
    mixpanel = await Mixpanel.init("Your Mixpanel Token", optOutTrackingDefault: false);
  }
...

Once you’ve called this method once, you can access mixpanel throughout the rest of your application.

3. Send Data 

Once you’ve initialized the SDK, Mixpanel will automatically collect common mobile events. You can enable/disable automatic collection through your project settings. With the mixpanel object created in the last step a call to track is all you need to send additional events to Mixpanel.

// Track with event-name
mixpanel.track('Sent Message');
// Track with event-name and property
mixpanel.track('Plan Selected', properties: {'Plan': 'Premium'});

You’re done! You’ve successfully integrated the Mixpanel Flutter SDK into your app. To stay up to speed on important SDK releases and updates, star or watch our repository on Github.

4. Check for Success 

Open up Events in Mixpanel to view incoming events. Once data hits our API, it generally takes ~60 seconds for it to be processed, stored, and queryable in your project.

๐Ÿ‘‹ ๐Ÿ‘‹ Tell us about the Mixpanel developer experience!ย https://www.mixpanel.com/devnpsย ๐Ÿ‘ ๐Ÿ‘Ž

Example mixpanel flutter

example/lib/main.dart

import 'event.dart';
import 'gdpr.dart';
import 'group.dart';
import 'profile.dart';
import 'package:flutter/material.dart';
import 'package:mixpanel_flutter_example/widget.dart';

// This is the main page only, check out the example app in https://github.com/mixpanel/mixpanel-flutter/tree/main/example
void main() {
  runApp(MaterialApp(
    debugShowCheckedModeBanner: false,
    initialRoute: '/',
    routes: {
      '/': (context) => FirstScreen(),
      '/event': (context) => EventScreen(),
      '/profile': (context) => ProfileScreen(),
      '/gdpr': (context) => GDPRScreen(),
      '/group': (context) => GroupScreen(),
    },
  ));
}

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Color(0xff4f44e0),
        title: Text('Mixpanel Demo'),
      ),
      body: Center(
          child: Column(
        children: [
          SizedBox(
            height: 40,
          ),
          SizedBox(
            width: MediaQuery.of(context).size.width * 0.65,
            child: MixpanelButton(
              text: 'EVENT',
              onPressed: () {
                Navigator.pushNamed(context, '/event');
              },
            ),
          ),
          SizedBox(
            height: 20,
          ),
          SizedBox(
            width: MediaQuery.of(context).size.width * 0.65,
            child: MixpanelButton(
              text: 'PROFILE',
              onPressed: () {
                Navigator.pushNamed(context, '/profile');
              },
            ),
          ),
          SizedBox(
            height: 20,
          ),
          SizedBox(
            width: MediaQuery.of(context).size.width * 0.65,
            child: MixpanelButton(
              text: 'GDPR',
              onPressed: () {
                Navigator.pushNamed(context, '/gdpr');
              },
            ),
          ),
          SizedBox(
            height: 20,
          ),
          SizedBox(
            width: MediaQuery.of(context).size.width * 0.65,
            child: MixpanelButton(
              text: 'GROUP',
              onPressed: () {
                Navigator.pushNamed(context, '/group');
              },
            ),
          ),
        ],
      )),
    );
  }
}

brillian

Leave a Reply

%d bloggers like this: