Flutter Quick Start

Get session recording working in your Flutter app in under 5 minutes.

Prerequisites

Flutter SDK
iOS deployment target 12.0+ / Android minSdkVersion 21+
A UXCam account with a mobile app key

Step 1: Add the Package

flutter pub add flutter_uxcam

This adds to your pubspec.yaml:

dependencies:
  flutter_uxcam: ^x.x.x

Step 2: Initialize UXCam

In your main widget's initState:

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_uxcam/flutter_uxcam.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();

    // Use the web app key on Flutter Web, mobile app key on iOS/Android.
    FlutterUxConfig config;
    if (kIsWeb) {
      config = FlutterUxConfig(
        userAppKey: "UXCAM_WEB_APP_KEY",
      );
    } else {
      FlutterUxcam.optIntoVideoRecordings();
      config = FlutterUxConfig(
        userAppKey: "UXCAM_MOBILE_APP_KEY",
        enableAutomaticScreenNameTagging: false,
      );
    }
    FlutterUxcam.startWithConfiguration(config);
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

Step 3: Verify It Works

Run your app on a device or emulator
Navigate through a few screens
Send the app to background
Check your UXCam Dashboard — your session should appear within 30 seconds

Tip

Check Android Studio or Xcode logs for UXCam initialization messages.

Validation Helper (Mobile only)

Optionally verify your integration:

Future<void> validateIntegration() async {
  final isRecording = await FlutterUxcam.isRecording();
  print('UXCam Recording: $isRecording');

  if (isRecording) {
    FlutterUxcam.tagScreenName('Test Screen');
    FlutterUxcam.logEvent('integration_test');
    print('UXCam integration validated');
  }
}

Next Steps

You're recording sessions! Now customize your integration:

Full Flutter Guide

Complete setup with all configuration options

Tag Screens

Enable heatmaps and screen analytics

Mask Sensitive Data

Protect passwords and PII

Track Events

Capture custom user actions