Persona Integration with Flutter

With Persona, companies can verify users in a matter of seconds, while individuals benefit from a streamlined interface and intuitive verification process that lets them easily submit identity documents on the platform of their choice — including desktops, iOS, and Android — and complete the entire ID verification.

Create a new Flutter Project

Add the persona_fluttter package in pubspec.yaml file

Add the below code in main.dart

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:persona_flutter/persona_flutter.dart';

void main() {
  runApp(PersonaVerification());
}

class PersonaVerification extends StatefulWidget {
  @override
  _PersonaVerificationState createState() => _PersonaVerificationState();
}

class _PersonaVerificationState extends State<PersonaVerification> {
  late InquiryConfiguration _configuration;

  StreamSubscription<InquiryCanceled>? _streamCanceled;
  StreamSubscription<InquiryError>? _streamError;
  StreamSubscription<InquiryComplete>? _streamComplete;

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

    _configuration = TemplateIdConfiguration(
      templateId: "YOUR_TEMPLATE_ID",
      environment: InquiryEnvironment.sandbox,
      theme: InquiryTheme(
        source: InquiryThemeSource.client,
        buttonCornerRadius: 8,
        textFieldCornerRadius: 0,
      ),
    );

    PersonaInquiry.init(configuration: _configuration);
    PersonaInquiry.onCanceled.listen(_onCanceled);
    PersonaInquiry.onError.listen(_onError);
    PersonaInquiry.onComplete.listen(_onComplete);
  }

  @override
  void dispose() {
    _streamCanceled?.cancel();
    _streamError?.cancel();
    _streamComplete?.cancel();
    super.dispose();
  }

  void _onCanceled(InquiryCanceled event) {
    print("InquiryCanceled");
    print("- inquiryId: ${event.inquiryId}");
    print("- sessionToken: ${event.sessionToken}");
  }

  void _onError(InquiryError event) {
    print("InquiryError");
    print("- error: ${event.error}");
  }

  void _onComplete(InquiryComplete event) {
    print("InquiryComplete");
    print("- inquiryId: ${event.inquiryId}");
    print("- status: ${event.status}");

    print("- fields:");
    for (var key in event.fields.keys) {
      print("-- key: $key, value: ${event.fields[key]}");
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          color: Colors.grey[200],
          child: Center(
            child: ElevatedButton(
              onPressed: () {
                PersonaInquiry.start();
              },
              child: Text("Start Inquiry"),
            ),
          ),
        ),
      ),
    );
  }
}

Don’t forget to make the following changes in android/build.gradle.

Change the minSdkVersion to 21 (or higher) in your android/app/build.gradle file.

ext.kotlin_version = '1.8.20'

dependencies {
    classpath 'com.android.tools.build:gradle:7.4.0'
}

IOS Requirements

• iOS 13.0 or later is required.
• Update your ios/Runner/Info.plist

<key>NSCameraUsageDescription</key>
<string>This app requires access to the camera.</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>This app requires access to the photo library.</string>

Cocoapods 1.9.3 has a bug that prevents builds from selecting the correct architecture. See more details here. Please downgrade to 1.8.x or upgrade to 1.10.x

Get Subramanya Belavadi’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Theming

By utilizing your app’s styles.xml, you can configure colors, buttons, and other elements to personalize the Persona flow according to your preferred style. Simply extend the base Persona style, Base.Persona.Inquiry.Theme, and name it Persona.Inquiry.Theme.

<style name="Persona.Inquiry.Theme" parent="@style/Base.Persona.Inquiry.Theme">
    <item name="colorPrimary">#22CB8E</item>
    <item name="colorAccent">#22CB8E</item>
    <item name="colorPrimaryDark">#167755</item>
</style>

and in your InquiryConfiguration set the theme:

theme: InquiryTheme(source: InquiryThemeSource.client)

Result

Stackademic

Thank you for reading until the end. Before you go:

• Please consider clapping and following the writer! 👏
• Follow us on Twitter(X), LinkedIn, and YouTube.
• Visit Stackademic.com to find out more about how we are democratizing free programming education around the world.