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

Note

Highlights information that users should take into account, even when skimming.

Tip

Optional information to help a user be more successful.

Important

Crucial information necessary for users to succeed.

Warning

Critical content demanding immediate user attention due to potential risks.

Caution

Negative potential consequences of an action.

Success

Negative potential consequences of an action.

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