vornid 1.2.17

VornID identity verification SDK — capture-and-transport client for biometric liveness detection, image analysis, and identity verification.

example/lib/main.dart

import 'dart:convert';

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

import 'package:vornid/vornid.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const MyApp());
}

/// Demonstrates integrating the VornID liveness flow.
///
/// Theming note: the liveness experience ships its own polished **light** visual
/// system (it deliberately does not follow the host app's dark mode — the screen
/// doubles as a fill light for the user's face). The one thing you can brand is
/// the **accent** color, via `LivenessOptions.theme` (see the accent picker on
/// the demo page).
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    const brand = Color(0xFF2649ED);
    return MaterialApp(
      title: 'VornID SDK Demo',
      theme: ThemeData(
        colorSchemeSeed: brand,
        useMaterial3: true,
        brightness: Brightness.light,
      ),
      darkTheme: ThemeData(
        colorSchemeSeed: brand,
        useMaterial3: true,
        brightness: Brightness.dark,
      ),
      themeMode: ThemeMode.system,
      home: const DemoPage(),
    );
  }
}

/// Brand-accent choices for the liveness flow. The flow's surfaces stay light;
/// only this accent changes.
enum _AccentChoice { defaultBlue, emerald, sunset }

class DemoPage extends StatefulWidget {
  const DemoPage({super.key});

  @override
  State<DemoPage> createState() => _DemoPageState();
}

class _DemoPageState extends State<DemoPage> {
  /// Sandbox-only: when `true`, the SDK shows its developer result overlay with
  /// scores, and this demo also surfaces the score breakdown. Keep `false` for
  /// production builds (the user only sees the calm pass/review/fail screens).
  static const bool _showDetailedLivenessResult = false;

  VornIdSdk? _sdk;
  bool _initializing = true;
  String _status = 'Initializing SDK...';
  Color _statusColor = Colors.grey;
  LivenessResult? _lastResult;

  _AccentChoice _accent = _AccentChoice.defaultBlue;

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

  Future<void> _initSdk() async {
    try {
      final sdk = await VornIdSdk.initialize(
        const VornIdConfig(
          apiKey: 'stg_prod_dI6x5wBC3kS1nj*************',
          environment: VornIdEnvironment.sandbox,
          // How long users are told a manual review usually takes on the
          // "We're double-checking" screen. Set this to your real turnaround —
          // e.g. `Duration(hours: 12)` renders "Usually under 12 hours".
          manualReviewEstimate: Duration(minutes: 5),
        ),
      );
      if (!mounted) return;
      setState(() {
        _sdk = sdk;
        _initializing = false;
        _status = 'SDK initialized (sandbox)';
        _statusColor = Colors.green;
      });
    } catch (e) {
      if (!mounted) return;
      setState(() {
        _initializing = false;
        _status = 'Init failed: $e';
        _statusColor = Colors.red;
      });
    }
  }

  /// The flow honors only the brand accent from the theme; surfaces stay light.
  /// Returning `null` uses the design's default royal blue.
  VornIdTheme? _themeForAccent(_AccentChoice choice) {
    final accent = switch (choice) {
      _AccentChoice.defaultBlue => null,
      _AccentChoice.emerald => const Color(0xFF1AA251),
      _AccentChoice.sunset => const Color(0xFFE0671C),
    };
    if (accent == null) return null;
    return VornIdTheme(
      brightness: Brightness.light,
      colors: VornIdColorScheme(accent: accent),
    );
  }

  void _startLivenessCheck() {
    if (_sdk == null) return;
    Navigator.of(context).push(
      MaterialPageRoute(
        builder: (_) => VornIdLivenessScreen(
          sdk: _sdk!,
          options: LivenessOptions(
            actionType: LivenessActionType.registration,
            showPreview: true,
            facing: CameraFacing.front,
            mode: LivenessMode.active,
            enableCooldownOnFailure: false,
            showResultScreen: _showDetailedLivenessResult,
            theme: _themeForAccent(_accent),
          ),
          onComplete: (result) {
            Navigator.of(context).pop();
            debugPrint(
              'liveness verdict: ${result.verdict} '
              'image: ${result.capturedImageBase64 != null}',
            );
            // The captured image is returned for EVERY verdict, so you can
            // register the user up front and gate their access by the verdict
            // (verified -> full, review -> pending, fail -> restricted) until a
            // specialist resolves a review.
            setState(() {
              _lastResult = result;
              final (msg, color) = switch (result.verdict) {
                VerificationVerdict.pass => ('Verified', Colors.green),
                VerificationVerdict.review => (
                  'Under review',
                  Colors.amber.shade800,
                ),
                VerificationVerdict.fail => ('Not verified', Colors.red),
              };
              _status = msg;
              _statusColor = color;
            });
          },
          onError: (error) {
            Navigator.of(context).pop();
            setState(() {
              _lastResult = null;
              _statusColor = Colors.orange;
              _status = '${error.code}: ${error.message}';
            });
          },
        ),
      ),
    );
  }

  @override
  void dispose() {
    _sdk?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    return Scaffold(
      appBar: AppBar(title: const Text('VornID SDK Demo'), centerTitle: true),
      body: SafeArea(
        child: SingleChildScrollView(
          padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 24),
          child: Column(
            children: [
              const SizedBox(height: 24),
              Icon(
                Icons.fingerprint,
                size: 72,
                color: theme.colorScheme.primary,
              ),
              const SizedBox(height: 32),
              _buildStatusCard(),
              if (_lastResult != null) ...[
                const SizedBox(height: 20),
                _buildResultCard(),
              ],
              if (_lastResult != null &&
                  kDebugMode &&
                  _showDetailedLivenessResult) ...[
                const SizedBox(height: 20),
                _buildScoreBreakdown(),
              ],
              const SizedBox(height: 24),
              _buildAccentPicker(),
              const SizedBox(height: 24),
              SizedBox(
                width: double.infinity,
                height: 56,
                child: FilledButton.icon(
                  onPressed: _sdk != null && !_initializing
                      ? _startLivenessCheck
                      : null,
                  icon: const Icon(Icons.face, size: 28),
                  label: const Text(
                    'Start Liveness Check',
                    style: TextStyle(fontSize: 18),
                  ),
                ),
              ),
              const SizedBox(height: 16),
              Text(
                'VornID SDK v${VornIdConstants.sdkVersion}',
                style: TextStyle(
                  fontSize: 12,
                  color: theme.colorScheme.outline,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildAccentPicker() {
    final theme = Theme.of(context);
    String label(_AccentChoice c) => switch (c) {
      _AccentChoice.defaultBlue => 'Default (royal blue)',
      _AccentChoice.emerald => 'Emerald',
      _AccentChoice.sunset => 'Sunset',
    };
    return Container(
      width: double.infinity,
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(16),
        border: Border.all(color: theme.dividerColor),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            'Brand accent for next session',
            style: TextStyle(
              fontWeight: FontWeight.w600,
              color: theme.colorScheme.onSurface,
            ),
          ),
          const SizedBox(height: 4),
          Text(
            'The flow is light by design; only the accent is themeable.',
            style: TextStyle(fontSize: 12, color: theme.colorScheme.outline),
          ),
          const SizedBox(height: 8),
          for (final choice in _AccentChoice.values)
            RadioListTile<_AccentChoice>(
              dense: true,
              contentPadding: EdgeInsets.zero,
              value: choice,
              groupValue: _accent,
              onChanged: (v) {
                if (v != null) setState(() => _accent = v);
              },
              title: Text(label(choice)),
            ),
        ],
      ),
    );
  }

  Widget _buildStatusCard() {
    return Container(
      width: double.infinity,
      padding: const EdgeInsets.all(20),
      decoration: BoxDecoration(
        color: _statusColor.withValues(alpha: 0.1),
        borderRadius: BorderRadius.circular(16),
        border: Border.all(color: _statusColor.withValues(alpha: 0.3)),
      ),
      child: _initializing
          ? const Column(
              children: [
                CircularProgressIndicator(),
                SizedBox(height: 16),
                Text(
                  'Initializing SDK...',
                  style: TextStyle(fontSize: 16),
                  textAlign: TextAlign.center,
                ),
              ],
            )
          : Row(
              children: [
                Icon(
                  _lastResult != null
                      ? Icons.check_circle
                      : (_sdk != null
                            ? Icons.check_circle_outline
                            : Icons.error_outline),
                  color: _statusColor,
                  size: 28,
                ),
                const SizedBox(width: 12),
                Expanded(
                  child: Text(
                    _status,
                    style: TextStyle(
                      fontSize: 16,
                      fontWeight: FontWeight.w500,
                      color: _statusColor,
                    ),
                  ),
                ),
              ],
            ),
    );
  }

  /// Decode the backend's captured image (base64, with or without a data-URI
  /// prefix) for display.
  Uint8List? _decodeCapturedImage(String? b64) {
    if (b64 == null || b64.isEmpty) return null;
    var s = b64;
    if (s.startsWith('data:')) {
      final comma = s.indexOf(',');
      if (comma != -1) s = s.substring(comma + 1);
    }
    try {
      return base64Decode(s);
    } catch (_) {
      return null;
    }
  }

  /// Result card: the verdict, the access decision an integrator would apply,
  /// and the captured image the backend returns for EVERY verdict.
  Widget _buildResultCard() {
    final r = _lastResult!;
    final theme = Theme.of(context);
    final (verdictLabel, color, accessNote) = switch (r.verdict) {
      VerificationVerdict.pass => (
        'Verified',
        Colors.green,
        'Register the user with full access.',
      ),
      VerificationVerdict.review => (
        'Under review',
        Colors.amber.shade800,
        'Register now with limited access; a specialist confirms shortly.',
      ),
      VerificationVerdict.fail => (
        'Not verified',
        Colors.red,
        'You may still register with restricted access, or block.',
      ),
    };
    final bytes = _decodeCapturedImage(r.capturedImageBase64);

    return Container(
      width: double.infinity,
      padding: const EdgeInsets.all(20),
      decoration: BoxDecoration(
        color: theme.colorScheme.surfaceContainerHighest,
        borderRadius: BorderRadius.circular(16),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            children: [
              Container(
                padding: const EdgeInsets.symmetric(
                  horizontal: 10,
                  vertical: 4,
                ),
                decoration: BoxDecoration(
                  color: color.withValues(alpha: 0.15),
                  borderRadius: BorderRadius.circular(8),
                ),
                child: Text(
                  verdictLabel,
                  style: TextStyle(color: color, fontWeight: FontWeight.w700),
                ),
              ),
            ],
          ),
          const SizedBox(height: 12),
          Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // The captured image, returned for every verdict.
              ClipRRect(
                borderRadius: BorderRadius.circular(12),
                child: bytes != null
                    ? Image.memory(
                        bytes,
                        width: 96,
                        height: 120,
                        fit: BoxFit.cover,
                      )
                    : Container(
                        width: 96,
                        height: 120,
                        alignment: Alignment.center,
                        color: theme.colorScheme.surfaceContainerHigh,
                        child: Icon(
                          Icons.image_not_supported_outlined,
                          color: theme.colorScheme.outline,
                        ),
                      ),
              ),
              const SizedBox(width: 16),
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      'Captured image',
                      style: TextStyle(
                        fontWeight: FontWeight.w600,
                        color: theme.colorScheme.onSurface,
                      ),
                    ),
                    const SizedBox(height: 4),
                    Text(
                      bytes != null
                          ? 'Returned by the backend for every verdict — use it '
                                'to register the user.'
                          : 'No image in this result.',
                      style: TextStyle(
                        fontSize: 13,
                        color: theme.colorScheme.onSurfaceVariant,
                      ),
                    ),
                    const SizedBox(height: 10),
                    Text(
                      accessNote,
                      style: TextStyle(
                        fontSize: 13,
                        fontWeight: FontWeight.w500,
                        color: color,
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }

  Widget _buildScoreBreakdown() {
    final scores = _lastResult!.scoreBreakdown;
    return Container(
      width: double.infinity,
      padding: const EdgeInsets.all(20),
      decoration: BoxDecoration(
        color: Theme.of(context).colorScheme.surfaceContainerHighest,
        borderRadius: BorderRadius.circular(16),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            'Score Breakdown',
            style: TextStyle(
              fontSize: 16,
              fontWeight: FontWeight.w600,
              color: Theme.of(context).colorScheme.onSurface,
            ),
          ),
          const SizedBox(height: 16),
          _ScoreItem(
            label: 'Liveness Confidence',
            value: scores.livenessConfidence,
          ),
          const SizedBox(height: 10),
          _ScoreItem(
            label: 'Spoof Likelihood',
            value: scores.spoofLikelihood,
            inverted: true,
          ),
          const SizedBox(height: 10),
          _ScoreItem(label: 'Quality Score', value: scores.qualityScore),
          const SizedBox(height: 10),
          _ScoreItem(
            label: 'Fraud Risk Signal',
            value: scores.fraudRiskSignal,
            inverted: true,
          ),
          const SizedBox(height: 12),
          Divider(color: Theme.of(context).dividerColor),
          const SizedBox(height: 8),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(
                'Model',
                style: TextStyle(
                  fontSize: 13,
                  color: Theme.of(context).colorScheme.outline,
                ),
              ),
              Text(
                _lastResult!.modelVersion.isNotEmpty
                    ? _lastResult!.modelVersion
                    : 'N/A',
                style: TextStyle(
                  fontSize: 13,
                  color: Theme.of(context).colorScheme.outline,
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

class _ScoreItem extends StatelessWidget {
  const _ScoreItem({
    required this.label,
    required this.value,
    this.inverted = false,
  });

  final String label;
  final double value;
  final bool inverted;

  Color _color() {
    final v = inverted ? 1.0 - value : value;
    if (v >= 0.7) return Colors.green;
    if (v >= 0.4) return Colors.amber.shade700;
    return Colors.red;
  }

  @override
  Widget build(BuildContext context) {
    final displayPercent = (value.clamp(0.0, 1.0) * 100).round();
    return Row(
      children: [
        Expanded(
          child: Text(
            label,
            style: TextStyle(
              fontSize: 14,
              color: Theme.of(context).colorScheme.onSurfaceVariant,
            ),
          ),
        ),
        Text(
          '$displayPercent%',
          style: TextStyle(
            fontSize: 15,
            fontWeight: FontWeight.w600,
            color: _color(),
          ),
        ),
        const SizedBox(width: 8),
        SizedBox(
          width: 60,
          child: ClipRRect(
            borderRadius: BorderRadius.circular(4),
            child: LinearProgressIndicator(
              value: value.clamp(0.0, 1.0),
              minHeight: 6,
              color: _color(),
              backgroundColor: _color().withValues(alpha: 0.15),
            ),
          ),
        ),
      ],
    );
  }
}