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

# Flutter SDK

> Install the Kravata Flutter SDK and open the financial widget from your app.

The Flutter SDK is the `kravata_sdk_plugin` package. It exposes `KravataWebView`, a full-screen widget that you push onto your navigation stack.

## Requirements

| | Minimum |
| - | - |
| Dart | 3.8.1 (Flutter 3.32 or newer) |
| Android | `minSdk` 26 (Android 8.0) |
| iOS | 13.0 |

## Install

<Steps>
  <Step title="Add the dependency">
    The package is distributed from a private GitHub repository. Add it to `pubspec.yaml` with the GitHub token Kravata gives you and the version tag you want to use:

    ```yaml pubspec.yaml theme={"dark"}
    dependencies:
      kravata_sdk_plugin:
        git:
          url: https://<TOKEN>@github.com/KravataGrp/kravata-sdk-flutter.git
          ref: v1.0.8
    ```

    Then run:

    ```bash theme={"dark"}
    flutter pub get
    ```

    <Tip>
      Don't commit the token to your repository. In CI, inject it from a secret, or configure Git credentials for `github.com` and drop the token from the URL.
    </Tip>
  </Step>

  <Step title="Allow network access on Android">
    Add the Internet permission to `android/app/src/main/AndroidManifest.xml`:

    ```xml theme={"dark"}
    <uses-permission android:name="android.permission.INTERNET" />
    ```

    iOS needs no extra permissions.
  </Step>
</Steps>

## Open the widget

Import the widget and push it with `Navigator.push`. Get `sharedKey`, `nonce` and `clientId` from your backend first (see [Issue a widget session](/sdk/backend#1-issue-a-widget-session)).

```dart theme={"dark"}
import 'package:flutter/material.dart';
import 'package:kravata_sdk_plugin/components/kravata_webview.dart';

class KravataButton extends StatelessWidget {
  final String userId;       // your own ID for this user
  final String? phoneNumber;

  const KravataButton({required this.userId, this.phoneNumber, super.key});

  Future<void> _open(BuildContext context) async {
    // 1. Get a widget session from YOUR backend
    final session = await myApi.getKravataWidgetSession();

    // 2. Open the widget
    if (!context.mounted) return;
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (_) => KravataWebView(
          environment: 'prod',            // 'test' or 'prod'
          tenant: 'yourTenantName',       // provided by Kravata
          countryCode: '57',
          sharedKey: session.sharedKey,
          nonce: session.nonce,
          clientId: session.clientId,
          userId: userId,                 // same ID you send to User Registration
          phoneClient: phoneNumber ?? '',
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () => _open(context),
      child: const Text('Open Kravata'),
    );
  }
}
```

## Parameters

| Parameter | Type | Required | Description |
| - | - | - | - |
| `environment` | `String` | Yes | `'test'` or `'prod'`. |
| `tenant` | `String` | Yes | Tenant name assigned to your company. Kravata gives it to you. |
| `countryCode` | `String` | Yes | Country calling code without `+`, for example `'57'` for Colombia. |
| `sharedKey` | `String` | Yes | Your company's widget key. It must come from your backend; never hard-code it. |
| `nonce` | `String` | Yes | Single-use value generated by your backend for this session. |
| `clientId` | `String` | Yes | Your company's ID as a Kravata partner. It comes from your backend. |
| `phoneClient` | `String` | Yes | User's phone number without the country code. When present, it pre-fills the phone field in the widget. Pass `''` if you don't have it. |
| `userId` | `String?` | Yes, for the integration | Your own ID for the user (a UUID v4 is recommended). It is how Kravata correlates the user with your [User Registration](/sdk/backend#3-register-the-user) call and your webhooks. |
| `documentType` | `String?` | No | Identity document type: `'CC'`, `'CE'`, `'PA'` or `'NIT'`. |
| `documentNro` | `String?` | No | Identity document number. |
| `onLog` | `void Function(String)?` | No | Debug log callback. Leave it out in production. |

## Next steps

<CardGroup cols={2}>
  <Card title="Backend integration" icon="server" href="/sdk/backend">
    Issue widget sessions, receive `user.accepted_terms` and register the user.
  </Card>

  <Card title="Overview" icon="diagram-project" href="/sdk/overview">
    Environments, credentials and the end-to-end flow.
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.