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

# Widgets

> Flutter widgets for the Flutter SDK reference for Crossmint wallets

The Flutter SDK provides optional UI widgets that can be imported from `crossmint_flutter_ui.dart`. These pull in Material Design dependencies — if you prefer a fully headless approach, use the [controllers](/sdk-reference/wallets/flutter/controllers) directly.

***

## CrossmintWalletStatusBuilder

Reactive widget that rebuilds whenever the wallet status or instance changes.

### Props

<ResponseField name="builder" type="CrossmintWalletStatusWidgetBuilder" required />

### Usage

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

CrossmintWalletStatusBuilder(
  builder: (context, data) {
    switch (data.state.walletStatus) {
      case CrossmintWalletStatus.inProgress:
        return const CircularProgressIndicator();
      case CrossmintWalletStatus.loaded:
        return Text('Address: ${data.state.currentWallet!.address}');
      default:
        return const Text('No wallet');
    }
  },
)
```

***

## CrossmintWalletConsumer

Provides access to the wallet context data from the widget tree.

### Usage

```dart theme={null}
CrossmintWalletConsumer(
  builder: (context, data) {
    return ElevatedButton(
      onPressed: () async {
        final wallet = data.state.currentWallet;
        final balances = await wallet?.balances();
        print('Balances: $balances');
      },
      child: const Text('Check Balances'),
    );
  },
)
```

***

## CrossmintOtpSignerListener

Automatically listens for OTP challenges and shows the appropriate dialog. This is a Flutter advantage over React Native — OTP prompts are handled declaratively.

### Props

<ResponseField name="otpController" type="CrossmintWalletOtpController" required />

<ResponseField name="child" type="Widget" required />

<ResponseField name="enabled" type="bool" />

<ResponseField name="barrierDismissible" type="bool" />

### Usage

```dart theme={null}
CrossmintOtpSignerListener(
  otpController: walletController.otp,
  child: const WalletScreen(),
)
```

***

## CrossmintExportPrivateKeyButton

Renders a button that allows the user to export their wallet's private key. Only works with email and phone signers. Will not render for passkey or external wallet signers.

### Props

<ResponseField name="wallet" type="CrossmintRuntimeWalletBase" required>
  Wallet whose private key will be exported. The button only renders when \[CrossmintRuntimeWalletBase.canExportPrivateKey] is true (email/phone signer wallets).

  <Expandable title="properties">
    <ResponseField name="client" type="CrossmintClient" required>
      Top-level Crossmint client shared by all wallet operations.

      <Expandable title="properties">
        <ResponseField name="config" type="CrossmintClientConfig" required />

        <ResponseField name="auth" type="CrossmintAuthClient?" />

        <ResponseField name="wallets" type="CrossmintWalletsClient?" />

        <ResponseField name="credentials" type="CrossmintCredentialsClient?" />

        <ResponseField name="orders" type="CrossmintOrdersClient?" />

        <ResponseField name="tokens" type="CrossmintTokensClient?" />

        <ResponseField name="users" type="CrossmintUsersClient?" />

        <ResponseField name="transport" type="CrossmintTransport?" />

        <ResponseField name="authLauncher" type="CrossmintAuthLauncher?" />

        <ResponseField name="runtimeOverrides" type="CrossmintClientRuntimeOverrides?" />
      </Expandable>
    </ResponseField>

    <ResponseField name="wallet" type="CrossmintWallet" required>
      Server-issued wallet snapshot backing this runtime instance.

      <Expandable title="properties">
        <ResponseField name="id" type="String" required />

        <ResponseField name="chain" type="String?" />

        <ResponseField name="address" type="String?" />

        <ResponseField name="owner" type="String?" />

        <ResponseField name="raw" type="CrossmintJsonMap" />
      </Expandable>
    </ResponseField>

    <ResponseField name="recoverySigner" type="CrossmintSignerConfig?" />

    <ResponseField name="signer" type="CrossmintWalletApprovalSigner?" />

    <ResponseField name="additionalSigners" type="List<CrossmintWalletApprovalSigner>" />

    <ResponseField name="deviceSignerKeyStorage" type="DeviceSignerKeyStorage?">
      Storage backend for hardware-backed device signer keys.
    </ResponseField>

    <ResponseField name="onAuthRequired" type="CrossmintSignerAuthRequiredCallback?">
      Callback invoked when a signer operation requires user authentication.
    </ResponseField>
  </Expandable>
</ResponseField>

<ResponseField name="onExported" type="VoidCallback?">
  Called after the export flow completes successfully.
</ResponseField>

<ResponseField name="onError" type="void Function(Object error)?">
  Called when the export flow throws. Receives the underlying exception so consumers can surface a localized error message.
</ResponseField>

<ResponseField name="childBuilder" type="CrossmintExportPrivateKeyButtonBuilder?">
  Optional builder for the button visual. When `null`, falls back to the React Native parity Material `OutlinedButton` with a themed `CircularProgressIndicator` while the export is in flight. When non-null, the builder is invoked whenever the wallet is eligible to export and receives the current `isLoading` flag plus an `onExport` callback that the consumer wires to their own tap target. The `onExport` callback is `null` while loading so consumers can disable their button directly without a separate mounted check.
</ResponseField>

### Usage

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

CrossmintExportPrivateKeyButton(
  wallet: wallet,
  onExported: () => print('Key exported'),
)
```

***

## CrossmintWalletUiState (`data.state`)

The `state` exposed on `CrossmintWalletContextData` (the second argument of every builder). Fields and convenience getters:

| Field / getter        | Type                          | Description |
| --------------------- | ----------------------------- | ----------- |
| `isInitializing`      | `bool`                        |             |
| `isLoadingWallet`     | `bool`                        |             |
| `authState`           | `CrossmintAuthState`          |             |
| `walletStatus`        | `CrossmintWalletStatus`       |             |
| `currentWallet`       | `CrossmintWallet?`            |             |
| `pendingOtpChallenge` | `CrossmintOtpChallenge?`      |             |
| `initializationError` | `Object?`                     |             |
| `walletError`         | `Object?`                     |             |
| `isAuthenticated`     | `bool`                        |             |
| `isLoggedOut`         | `bool`                        |             |
| `user`                | `CrossmintAuthenticatedUser?` |             |
| `authErrorMessage`    | `String?`                     |             |
| `error`               | `Object?`                     |             |
| `errorMessage`        | `String?`                     |             |
| `hasWallet`           | `bool`                        |             |
| `needsOtp`            | `bool`                        |             |