Flutter Quickstart

Overview

In this quickstart, you’ll add Fingerprint to a new Flutter project and identify the user’s device. The example use case in this quickstart is stopping new account fraud, where attackers create multiple fake accounts to abuse promotions, exploit systems, or evade bans. However, the steps you’ll follow apply to most use cases. By identifying the device behind each sign-up attempt, login, or transaction, you can flag and block suspicious users early. This guide focuses on the frontend mobile integration. You’ll install the Fingerprint Flutter SDK and initialize the client agent to generate an event ID to send to your backend for analysis. To see how to implement fraud prevention with this ID, continue to one of the backend quickstarts after completing this quickstart.

Estimated time: < 10 minutes

Prerequisites

Before you begin, make sure you have the following:

Flutter SDK installed (version 3.44.0 or later)
Basic knowledge of Dart and Flutter development

This quickstart only covers the frontend setup. You’ll need a backend server to receive and process the device identification event to enable fraud detection. Check out one of the backend quickstarts after completing this quickstart.

1. Create a Fingerprint account and get your API key

Sign up for a free Fingerprint trial if you don’t already have an account.
After signing in, go to the API keys page in the dashboard.
Copy your public API key; you’ll need it to initialize the client agent.

2. Set up your project

To get started, create a new Flutter project. If you already have a project you want to use, you can skip to the next section.

Open your terminal and run:

Terminal

flutter create fingerprint_flutter_quickstart
cd fingerprint_flutter_quickstart

Open the project in your preferred editor (VS Code, Android Studio, etc.).

3. Install the client agent

To integrate Fingerprint into your Flutter app, add the Flutter SDK to your project.

Open pubspec.yaml and add the Fingerprint Flutter SDK and logger dependencies:

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  fingerprint_flutter: ^5.0.0
  logger: ^2.0.2+1

The logger package provides better formatted console output with timestamps and log levels, making it easier to debug and see results.

Run flutter pub get to install the dependencies.
For web support, add the client agent to web/index.html inside the <head> tag:

web/index.html

<head>
  <!-- Other head content -->
  <script src="assets/packages/fingerprint_flutter/web/index.js" defer></script>
</head>

For iOS builds, set the minimum deployment target to iOS 15.0 or higher. Open ios/Runner.xcworkspace in Xcode, select the Runner target, and set General > Minimum Deployments > iOS to 15.0.
If your project has an ios/Podfile, update its platform line too:

ios/Podfile

# Update this line
platform :ios, '15.0'

For Android builds, make sure minSdk in android/app/build.gradle (or build.gradle.kts) is 24 or higher. New projects created with Flutter 3.44 already use 24. If your project uses Android Gradle plugin (AGP) 8, use Kotlin Gradle plugin 2.2.20 or higher.

4. Initialize the SDK

Now that the SDK is installed, you can import and initialize it in your app.

Open lib/main.dart, add the following imports, and initialize the logger:

lib/main.dart

import 'package:flutter/material.dart';
import 'package:fingerprint_flutter/fingerprint_flutter.dart';
import 'package:logger/logger.dart';

var logger = Logger();
late final Fingerprint fingerprint;

Initialize the client agent in your main() function before runApp():

lib/main.dart

void main() {
  WidgetsFlutterBinding.ensureInitialized();

  fingerprint = Fingerprint(
    apiKey: 'PUBLIC_API_KEY', // Replace with your actual API key
    region: Region.us, // Ensure this matches your workspace region
  );

  runApp(const MyApp());
}

Replace PUBLIC_API_KEY with your actual public API key from the Fingerprint dashboard. Make sure the correct region is being used to match your workspace.

5. Trigger visitor identification

Now that the client agent is initialized, you can identify the visitor when needed. In this case, that’s when the user taps a Create Account button. When making the visitor identification request, you will receive the visitorId as well as an eventId. Instead of using the visitorId returned directly on the frontend (which could be tampered with), you’ll send the eventId to your backend. This ID is unique to each identification event. Your server can then use the Fingerprint Events API and retrieve the complete identification data, including the trusted visitor ID and other actionable insights like whether they are using a VPN or are a bot.

Create a simple account creation form in your build method of your MyApp class:

lib/main.dart

@override
Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: const Text('Fingerprint Quickstart'),
        backgroundColor: const Color(0xFFF35B22),
        foregroundColor: Colors.white,
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              'Create account',
              style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 32),
            const TextField(
              decoration: InputDecoration(
                labelText: 'Username',
                border: OutlineInputBorder(),
              ),
            ),
            const SizedBox(height: 16),
            const TextField(
              obscureText: true,
              decoration: InputDecoration(
                labelText: 'Password',
                border: OutlineInputBorder(),
              ),
            ),
            const SizedBox(height: 24),
            ElevatedButton(
              onPressed: _createAccount,
              style: ElevatedButton.styleFrom(
                backgroundColor: const Color(0xFFF35B22),
                foregroundColor: Colors.white,
              ),
              child: const Text('Create Account'),
            ),
          ],
        ),
      ),
    ),
  );
}

Now add the _createAccount method that calls Fingerprint’s get method. This will capture the device’s details and return an eventId, which you can then send to your backend for your fraud detection logic:

lib/main.dart

Future<void> _createAccount() async {
  try {
    final result = await fingerprint.get();
    final eventId = result.eventId;

    logger.i('Event ID: $eventId');
    // Send this event ID to your backend along with username/password
    // final response = await http.post(
    //   Uri.parse('https://yourserver.com/api/create-account'),
    //   headers: {'Content-Type': 'application/json'},
    //   body: jsonEncode({
    //     'username': username,
    //     'password': password,
    //     'eventId': eventId,
    //   }),
    // );

  } on FingerprintError catch (e) {
    logger.e('Fingerprint error: ${e.message}');
  }
}

Linking your own identifiers: if you already have an identifier for the user at this point, like an account, order, or session ID, pass it as linkedId. It’s returned as linked_id on the event and indexed, so you can retrieve every event tied to that identifier through the Server API. Learn more about adding more context to your identification events in Linking and tagging information.

6. Run the app

If your Flutter app isn’t already running, start it with flutter run
Choose your target device:
- For mobile: Use a connected physical device for best results (simulators/emulators may have network connectivity issues)
- For web: Run flutter run -d chrome to test in the browser
If testing on web and you have any ad blockers, turn them off for localhost. For production Flutter web apps, see Protecting the JavaScript agent from ad blockers.
Enter a username and password, then click Create Account.
Check your console output (in your IDE or terminal) and you should see the event ID in the formatted logger output:

Output

Event ID: 1234566477745.abc1GS

You’re now successfully identifying the device and capturing the event ID and are ready to send it to your backend for further fraud prevention logic!

Next steps

To use the identification data for fraud detection (like blocking repeat fake account creation attempts), you’ll need to send the eventId to your backend. From there, your server can call the Fingerprint Events API to retrieve the full visitor information and make decisions. Check out these related resources:

Getting started

Web

Mobile

Server

Use Case Tutorials

Overview

Prerequisites

1. Create a Fingerprint account and get your API key

2. Set up your project

3. Install the client agent

4. Initialize the SDK

5. Trigger visitor identification

6. Run the app

Next steps

​Overview

​Prerequisites

​1. Create a Fingerprint account and get your API key

​2. Set up your project

​3. Install the client agent

​4. Initialize the SDK

​5. Trigger visitor identification

​Add a basic sign-up UI

​6. Run the app

​Next steps

Overview

Prerequisites

1. Create a Fingerprint account and get your API key

2. Set up your project

3. Install the client agent

4. Initialize the SDK

5. Trigger visitor identification

Add a basic sign-up UI

6. Run the app

Next steps