> ## Documentation Index > Fetch the complete documentation index at: https://docs.fingerprint.com/llms.txt > Use this file to discover all available pages before exploring further. # Flutter Quickstart > Get started using the Flutter SDK ## 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](/docs/v3/flutter) and initialize the client agent to generate a request 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](/docs/v3/server-quickstarts-overview) after completing this quickstart.** > Estimated time: \< 10 minutes ## Prerequisites Before you begin, make sure you have the following: * [Flutter SDK](https://docs.flutter.dev/get-started/install) installed (version 3.13.0 or later) * Basic knowledge of [Dart](https://dart.dev/language) and [Flutter development](https://docs.flutter.dev/get-started/codelab) This quickstart only covers the **frontend setup**. You'll need a [backend server](/reference/server-sdks) to receive and process the device identification event to enable fraud detection. Check out one of the [backend quickstarts](/docs/v3/server-quickstarts-overview) after completing this quickstart. ## 1. Create a Fingerprint account and get your API key 1. [Sign up](https://dashboard.fingerprint.com/signup) for a free Fingerprint trial if you don't already have an account. 2. After signing in, go to the [**API keys**](https://dashboard.fingerprint.com/api-keys) page in the dashboard. 3. 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. 1. Open your terminal and run: ```bash Terminal theme={"theme":"github-dark-dimmed"} flutter create fingerprint_flutter_quickstart cd fingerprint_flutter_quickstart ``` 2. 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. 1. Open `pubspec.yaml` and add the Fingerprint Flutter SDK and logger dependencies: ```yaml pubspec.yaml theme={"theme":"github-dark-dimmed"} dependencies: flutter: sdk: flutter fpjs_pro_plugin: ^4.0.1 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. 2. Run `flutter pub get` to install the dependencies. 3. For web support, add the client agent to `web/index.html` inside the `` tag: ```html web/index.html theme={"theme":"github-dark-dimmed"} ``` 4. For iOS builds, update the minimum deployment target to iOS 13.0 or higher. 5. Open `ios/Podfile` and update the platform line at the top: ```ruby ios/Podfile theme={"theme":"github-dark-dimmed"} # Update this line platform :ios, '13.0' ``` 6. For Android builds, you may need to install and configure the NDK. If you encounter build issues: * Install NDK version `27.0.12077973` through Android Studio (Tools > SDK Manager > SDK Tools > NDK) * Set the NDK version in `android/app/build.gradle.kts`: ```kotlin android/app/build.gradle.kts theme={"theme":"github-dark-dimmed"} android { ndkVersion "27.0.12077973" // ... other configuration } ``` ## 4. Initialize the SDK Now that the SDK is installed, you can import and initialize it in your app. 1. Open `lib/main.dart`, add the following imports, and initialize the logger: ```dart lib/main.dart theme={"theme":"github-dark-dimmed"} import 'package:flutter/material.dart'; import 'package:fpjs_pro_plugin/fpjs_pro_plugin.dart'; import 'package:fpjs_pro_plugin/error.dart'; import 'package:fpjs_pro_plugin/region.dart'; import 'package:logger/logger.dart'; var logger = Logger(); ``` 2. Initialize the client agent in your `main()` function before `runApp()`, make sure your `main()` function is async: ```dart lib/main.dart theme={"theme":"github-dark-dimmed"} void main() async { WidgetsFlutterBinding.ensureInitialized(); await FpjsProPlugin.initFpjs( 'PUBLIC_API_KEY', // Replace with your actual API key region: Region.us, // Ensure this matches your workspace region ); runApp(const MyApp()); } ``` 3. Replace `PUBLIC_API_KEY` with your actual public API key from the Fingerprint [dashboard](https://dashboard.fingerprint.com/api-keys). 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 a `requestId`. Instead of using the `visitorId` returned directly on the frontend (which could be tampered with), you'll send the `requestId` to your backend. This ID is unique to each identification event. Your server can then use the [Fingerprint Events API](/reference/v3/server-api-get-event) 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. ### Add a basic sign-up UI 1. Create a simple account creation form in your `build` method of you `MyApp` class: ```dart lib/main.dart theme={"theme":"github-dark-dimmed"} @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'), ), ], ), ), ), ); } ``` 2. Now add the `_createAccount` method that calls Fingerprint's `getVisitorData` method. This will capture the device's details and return a `requestId`, which you can then send to your backend for your fraud detection logic: ```dart lib/main.dart theme={"theme":"github-dark-dimmed"} Future _createAccount() async { try { final visitorData = await FpjsProPlugin.getVisitorData(); final requestId = visitorData.requestId; logger.i('Request ID: $requestId'); // Send this request 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, // 'requestId': requestId, // }), // ); } on FingerprintProError catch (e) { logger.e('Fingerprint error: ${e.message}'); } } ``` ## 6. Run the app 1. If your Flutter app isn't already running, start it with `flutter run` 2. 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 build web` then `flutter run -d chrome` to test in the browser 3. If testing on web and you have any ad blockers, turn them off for localhost. For production Flutter web apps, view the [documentation](/docs/v3/protecting-from-client-side-tampering) to learn how to protect your Fingerprint implementation from ad blockers. 4. Enter a username and password, then click **Create Account**. 5. Check your console output (in your IDE or terminal) and you should see the request ID in the formatted logger output: ```text Output theme={"theme":"github-dark-dimmed"} Request ID: 1234566477745.abc1GS ``` You're now successfully identifying the device and capturing the request 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 `requestId` to your [backend](/docs/v3/server-quickstarts-overview). From there, your server can call the [Fingerprint Events API](/reference/v3/server-api-get-event) to retrieve the full visitor information and make decisions. Check out these related resources: * [Flutter SDK reference](/docs/v3/flutter) * [Node.js backend quickstart](/docs/v3/node-server-quickstart) * [API reference for the Events endpoint](/reference/v3/server-api-get-event) * [Use case tutorial: Detecting new account fraud](/docs/v3/new-account-fraud-use-case-tutorial) * [Protecting from client-side tampering and replay attacks](/docs/v3/protecting-from-client-side-tampering)