---
title: "NutrientInstantView widget for Flutter | Nutrient SDK"
canonical_url: "https://www.nutrient.io/guides/flutter/instant-synchronization/instant-view/"
md_url: "https://www.nutrient.io/guides/flutter/instant-synchronization/instant-view.md"
last_updated: "2026-05-23T00:08:18.091Z"
description: "Embed a collaborative PDF document in your Flutter widget tree using NutrientInstantView. Connect to Document Engine with real-time annotation sync."
---

# NutrientInstantView widget

`NutrientInstantView` is a Flutter widget that embeds a live collaborative PDF document directly into your widget tree. It connects to the [Nutrient Document Engine](https://www.nutrient.io/sdk/document-engine/getting-started/docker-deployment-react-frontend.md) server and renders the document with real-time annotation syncing — multiple users see each other’s changes instantly without any extra setup.

**Platform support:** Android, iOS. Web renders a placeholder.

## Server setup

Before using the `NutrientInstantView` widget, set up a running Document Engine instance and obtain a signed JSON Web Token (JWT) for the target document.

- [Document Engine — Getting started](https://www.nutrient.io/sdk/document-engine/getting-started/docker-deployment-react-frontend.md)

- [Real-time collaboration (Instant syncing)](https://www.nutrient.io/guides/flutter/instant-synchronization/get-started.md#quick-start-with-the-catalog-example)

- [Generating a JWT](https://www.nutrient.io/guides/flutter/instant-synchronization/authentication.md)

## Basic usage

Add the widget to your widget tree and give it a `serverUrl` pointing to the document on your Document Engine instance, along with a signed JWT. The widget fills its available space, so wrap it in an `Expanded`, `SizedBox`, or any other layout widget:

```dart

NutrientInstantView(
  serverUrl: 'https://your-server.example.com/api/1/documents/ABC123',
  jwt: 'eyJhbGci...',
  onViewCreated: (NutrientViewHandle handle) {
    // The native view is ready. Store the handle for programmatic access
    // to annotations, page navigation, and other document operations.
  },
)

```

## Constructor parameters

| Parameter       | Type                                 | Required | Description                                                                                         |
| --------------- | ------------------------------------ | -------- | --------------------------------------------------------------------------------------------------- |
| `serverUrl`     | `String`                             | Yes      | Full Document Engine API URL for the document: `https://host/api/1/documents/<id>`                  |
| `jwt`           | `String`                             | Yes      | Signed JWT with at least `read-document` and `write` permissions                                    |
| `configuration` | `NutrientViewConfiguration?`         | No       | Viewer appearance and behavior options. Refer to the [view configuration](https://www.nutrient.io/guides/flutter/user-interface/view-configuration.md) guide |
| `onViewCreated` | `void Function(NutrientViewHandle)?` | No       | Called once the native view is initialized and ready                                                |
| `key`           | `Key?`                               | No       | Standard Flutter widget key                                                                         |

## Applying configuration

Use `NutrientViewConfiguration` to customize the viewer’s layout, user interface (UI), and editing capabilities. Platform-specific options are grouped under `androidConfig` and `iosConfig`:

```dart

NutrientInstantView(
  serverUrl: serverUrl,
  jwt: jwt,
  configuration: const NutrientViewConfiguration(
    pageLayoutMode: PageLayoutMode.single,
    thumbnailBarMode: ThumbnailBarMode.floating,
    enableAnnotationEditing: true,
    enableFormEditing: true,
    androidConfig: AndroidViewConfiguration(
      showSearchAction: true,
      showOutlineAction: true,
    ),
    iosConfig: IOSViewConfiguration(
      spreadFitting: SpreadFitting.adaptive,
    ),
  ),
)

```

For a complete list of options, refer to the [view configuration](https://www.nutrient.io/guides/flutter/user-interface/view-configuration.md) guide.

## Reconnecting and changing documents

`serverUrl` and `jwt` are fixed at construction time — the native SDK establishes the WebSocket connection once and doesn’t observe changes to these values. To switch to a different document or refresh an expired JWT, force the widget to fully rebuild by changing its `key`.

A common pattern is to keep an integer counter in state and increment it whenever new connection settings are applied:

```dart

int _viewKey = 0;

void _applyNewConnection(String serverUrl, String jwt) {
  setState(() {
    _serverUrl = serverUrl;
    _jwt = jwt;
    _viewKey++; // Forces NutrientInstantView to rebuild with new values.
  });
}

NutrientInstantView(
  key: ValueKey(_viewKey),
  serverUrl: _serverUrl!,
  jwt: _jwt!,
)

```

## Complete example

Refer to `nutrient_flutter/example/lib/nutrient_instant_view_example.dart` for a complete working example, including a connection sheet, a status indicator, and platform-specific configuration.
---

## Related pages

- [Sync PDF annotations in Flutter apps](/guides/flutter/instant-synchronization/annotation-sync.md)
- [Instant sync and document state in Flutter](/guides/flutter/instant-synchronization/document-state.md)
- [Client authentication in Nutrient Instant](/guides/flutter/instant-synchronization/authentication.md)
- [Adding Instant comments to PDFs in Flutter](/guides/flutter/instant-synchronization/comments.md)
- [PDF collaboration library for Flutter](/guides/flutter/instant-synchronization.md)
- [Integrating real-time collaboration into your Flutter application](/guides/flutter/instant-synchronization/get-started.md)
- [Create PDF annotation layers in Flutter](/guides/flutter/instant-synchronization/instant-layers.md)
- [Offline PDF annotations with automatic sync](/guides/flutter/instant-synchronization/offline-support.md)
- [Nutrient Instant usage](/guides/flutter/instant-synchronization/usage.md)