> ## Documentation Index
> Fetch the complete documentation index at: https://docs.vouchmark.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Flutter

> Embed the Vouchmark KYB widget in your Flutter app.

`vouchmark_widget` is a Dart package that renders the Vouchmark verification flow inside a native WebView (`webview_flutter`), bridging events back to Dart through a JavaScript channel.

## Installation

Add the package with the Flutter CLI:

```bash theme={null}
flutter pub add vouchmark_widget
```

This adds `vouchmark_widget` to your `pubspec.yaml` (current version `1.0.0`).

### Platform setup

**Android** — set `minSdkVersion 21` in `android/app/build.gradle`.

**iOS** — requires iOS 13+. Add camera permissions to `ios/Runner/Info.plist`:

```xml theme={null}
<key>NSCameraUsageDescription</key>
<string>Camera is required for identity verification</string>
```

## Quick start

```dart theme={null}
import 'package:vouchmark_widget/vouchmark_widget.dart';

class KybScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return VouchmarkWidget(
      widgetId: 'wgt_your_widget_id',
      publicKey: 'live_pk_your_public_key',
      environment: VouchmarkEnvironment.live,
      applicant: VouchmarkApplicant(
        email: 'applicant@example.com',
        businessName: 'Acme Ltd',
        registrationNumber: 'RC123456',
      ),
      onSuccess: (applicant) {
        Navigator.of(context).pushReplacementNamed('/dashboard');
      },
      onAbandon: () {
        Navigator.of(context).pop();
      },
      onError: (error) {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text('Error: ${error.message}')),
        );
      },
    );
  }
}
```

## Configuration

### `VouchmarkWidget` parameters

| Parameter         | Type                             | Required | Description                                                                                             |
| ----------------- | -------------------------------- | -------- | ------------------------------------------------------------------------------------------------------- |
| `widgetId`        | `String`                         | Yes      | Widget ID from the dashboard. Must match the widget's environment.                                      |
| `publicKey`       | `String`                         | Yes      | Publishable key: `test_pk_…` (sandbox) or `live_pk_…` (live).                                           |
| `environment`     | `VouchmarkEnvironment`           | Yes      | `.sandbox` with `test_pk_…`, `.live` with `live_pk_…`. See [Environments](/sdks/overview#environments). |
| `applicant`       | `VouchmarkApplicant?`            | No       | Pre-fill applicant details.                                                                             |
| `referenceId`     | `String?`                        | No       | Your internal reference.                                                                                |
| `sessionToken`    | `String?`                        | No       | Signed server token for secure mode.                                                                    |
| `locale`          | `String?`                        | No       | Language code. Default `"en"`.                                                                          |
| `onSuccess`       | `void Function(VouchmarkResult)` | No       | Called on approval.                                                                                     |
| `onAbandon`       | `VoidCallback?`                  | No       | Called when user closes.                                                                                |
| `onError`         | `void Function(VouchmarkError)?` | No       | Called on error.                                                                                        |
| `onStepCompleted` | `void Function(VouchmarkStep)?`  | No       | Called after each module.                                                                               |

## Modal presentation

Call `showVouchmarkModal` to push the widget as a full-screen dialog route. It returns a `Future<VouchmarkResult?>` that resolves with the result when verification succeeds, or `null` if the user dismisses it:

```dart theme={null}
Future<void> _startKyb(BuildContext context) async {
  final result = await showVouchmarkModal(
    context: context,
    widgetId: 'wgt_...',
    publicKey: 'live_pk_...',
    environment: VouchmarkEnvironment.live,
    onSuccess: (result) {
      // optional inline callback; the result is also returned by the Future
    },
  );

  if (result != null) {
    // handle approval
  }
}
```

## Models

```dart theme={null}
enum VouchmarkEnvironment { sandbox, live }

class VouchmarkApplicant {
  final String? email;
  final String? businessName;
  final String? registrationNumber;
  final String? phone;
  final String? tin;
  final String? jurisdiction;
  final String? industry;
}

class VouchmarkResult {
  final String id;
  final String status; // "approved", "rejected", "requires_review"
  final double? riskScore;
  final String? decisionReason;
}

class VouchmarkError {
  final String code;
  final String message;
}

class VouchmarkStep {
  final String moduleId;
  final String status; // "passed", "failed", "requires_review"
}
```

## Signed sessions

Generate the session token on your backend and pass it to the widget:

```dart theme={null}
// Fetch token from your server
final response = await http.post(
  Uri.parse('https://your-api.com/kyb-session'),
  body: jsonEncode({'email': 'applicant@example.com'}),
);
final token = jsonDecode(response.body)['token'];

// Pass to widget
VouchmarkWidget(
  widgetId: 'wgt_...',
  publicKey: 'live_pk_...',
  environment: VouchmarkEnvironment.live,
  sessionToken: token,
  onSuccess: (result) { /* ... */ },
);
```

## Platform support

| Platform | Minimum version |
| -------- | --------------- |
| Android  | API 21 (5.0)+   |
| iOS      | 13.0+           |