### Initialize Nutrient Flutter SDK

Source: https://www.nutrient.io/sdk/flutter/getting-started

This code snippet demonstrates the basic initialization of the Nutrient Flutter SDK. Ensure you have the SDK installed as a dependency in your Flutter project.

```dart
import 'package:nutrient_sdk/nutrient_sdk.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await NutrientFlutterSDK.initialize(apiKey: 'YOUR_API_KEY');
  runApp(MyApp());
}
```

--------------------------------

### Initialize Nutrient Flutter SDK

Source: https://www.nutrient.io/sdk/flutter/getting-started

Initializes the Nutrient Flutter SDK, which is required since version 3.9.0. Pass a license key for production or null for trial (with a watermark). This setup is crucial before using any Nutrient functionalities.

```dart
import 'dart:io';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:nutrient_flutter/nutrient_flutter.dart';

const String documentPath = 'PDFs/Document.pdf';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  // Initialize Nutrient with the license key. Pass `null` to use the trial version.
  Nutrient.initialize(androidLicenseKey: null, iosLicenseKey: null);

  runApp(const MaterialApp(
    home: MyApp(),
  ));
}
```

--------------------------------

### Initialize Flutter App with Nutrient

Source: https://www.nutrient.io/sdk/flutter/getting-started

This is the main entry point for a Flutter application. It initializes the Nutrient library and starts the application's root widget.

```dart
void main(){
    Nutrient.initialize();
    runApp(const MyApp());
  }
```

--------------------------------

### Handle Document Load Events in Flutter

Source: https://www.nutrient.io/sdk/flutter/getting-started

This example shows how to listen for and react to document loading events using the Nutrient Flutter SDK. This is useful for showing loading indicators or performing actions once a document is ready.

```dart
import 'package:flutter/material.dart';
import 'package:nutrient_sdk/nutrient_sdk.dart';

NutrientPdfViewer(
  pdfUrl: 'your_pdf_url.pdf',
  onDocumentLoaded: () {
    print('Document loaded successfully!');
    // Perform actions after document is loaded
  },
  onDocumentError: (error) {
    print('Error loading document: $error');
    // Handle loading errors
  },
)
```

--------------------------------

### Include Nutrient Web SDK from Local Installation in HTML

Source: https://www.nutrient.io/sdk/flutter/getting-started

This snippet demonstrates how to include the Nutrient Web SDK in your HTML file after a local installation. It assumes the `nutrient-viewer.js` file is placed in your `assets` folder.

```html
<script src="assets/nutrient-viewer.js"></script>
```

--------------------------------

### Create New Flutter Project

Source: https://www.nutrient.io/sdk/flutter/getting-started

Command to create a new Flutter project named 'nutrient_demo' with a specified organization identifier. This is a foundational step for integrating new Flutter libraries.

```bash
flutter create --org com.example.nutrient_demo nutrient_demo
```

--------------------------------

### Run Flutter Application

Source: https://www.nutrient.io/sdk/flutter/getting-started

This terminal command executes the Flutter application on a connected device or emulator. Ensure that an emulator is running or a device is connected before executing this command.

```bash
flutter run
```

--------------------------------

### Add AppCompat Dependency to Gradle

Source: https://www.nutrient.io/sdk/flutter/getting-started

Include the AppCompat AndroidX library in your `android/app/build.gradle` file's dependencies. Replace `<version>` with the latest stable version from a Maven repository to leverage its features for UI compatibility.

```gradle
dependencies {
    ...
   implementation "androidx.appcompat:appcompat:<version>"
}
```

--------------------------------

### Create and Copy PDF Assets in Flutter

Source: https://www.nutrient.io/sdk/flutter/getting-started

These terminal commands demonstrate how to create a 'PDFs' directory and copy a PDF document into it, which is a necessary step for including assets in a Flutter application. This setup is crucial for displaying local PDF files within the app.

```bash
mkdir PDFs
```

```bash
cp ~/Downloads/Document.pdf PDFs/Document.pdf
```

--------------------------------

### Include Nutrient Web SDK via CDN in HTML

Source: https://www.nutrient.io/sdk/flutter/getting-started

This snippet shows how to add the Nutrient Web SDK to your HTML file using a CDN link. Ensure this is placed within the `<head>` section. Replace `<version>` with your desired SDK version.

```html
<!DOCTYPE html><html><head>
  <!-- ... other head elements ... -->
  <script src="https://cdn.cloud.pspdfkit.com/pspdfkit-web@1.8.0/nutrient-viewer.js"></script></head><body>
  <!-- ... body content ... --></body></html>
```

--------------------------------

### Configure Android Launcher Activity for Flutter (XML)

Source: https://www.nutrient.io/sdk/flutter/getting-started

This XML snippet shows how to update the `AndroidManifest.xml` file to use `FlutterAppCompatActivity` as the launcher activity. This is necessary for integrating the Nutrient Android SDK with Flutter applications.

```xml
<activity
      android:name=".MainActivity"
      android:name="io.flutter.embedding.android.FlutterAppCompatActivity"
      android:launchMode="singleTop"
      android:theme="@style/LaunchTheme"
      android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
      android:hardwareAccelerated="true"
      android:windowSoftInputMode="adjustResize"
      android:exported="true">

```

--------------------------------

### Open AI Chat with Context (JavaScript)

Source: https://www.nutrient.io/sdk/flutter/getting-started

Generates a pre-filled prompt for AI chat services (ChatGPT, Claude, Grok) that includes the current page's URL and a request for assistance with the documentation. It opens the respective AI chat service in a new tab with the prompt ready.

```javascript
function v(i) {
    const t = "https://www.nutrient.io",
        o = window.location.pathname,
        r = `I'm looking at this Nutrient documentation: ${`${t}${o}`} Help me understand how to use it. Be ready to explain concepts, give examples, or help debug based on it.`;
    const s = `https://chatgpt.com/?q=${encodeURIComponent(r)}`;
    window.open(s, "_blank");
}

function x(i) {
    const t = "https://www.nutrient.io",
        o = window.location.pathname,
        r = `I'm looking at this Nutrient documentation: ${`${t}${o}`} Help me understand how to use it. Be ready to explain concepts, give examples, or help debug based on it.`;
    const s = `https://claude.ai/new?q=${encodeURIComponent(r)}`;
    window.open(s, "_blank");
}

function C(i) {
    const t = "https://www.nutrient.io",
        o = window.location.pathname,
        r = `I'm looking at this Nutrient documentation: ${`${t}${o}`} Help me understand how to use it. Be ready to explain concepts, give examples, or help debug based on it.`;
    const s = `https://grok.com/c?q=${encodeURIComponent(r)}`;
    window.open(s, "_blank");
}
```

--------------------------------

### Load and Configure Kapa.ai Chatbot Widget

Source: https://www.nutrient.io/sdk/flutter/getting-started

This JavaScript function dynamically creates and configures the Kapa.ai chatbot widget. It determines the appropriate disclaimer and example questions based on the current URL path and applies numerous attributes to customize the widget's appearance and behavior, such as colors, fonts, button styles, and z-index.

```javascript
function u(){
const a=d(),t=document.createElement("script");
t.async=!0,t.src="https://widget.kapa.ai/kapa-widget.bundle.js",t.setAttribute("data-website-id","ec76a086-c5ce-409a-91bb-bee358fdb208"),t.setAttribute("data-project-color","#1A1414"),t.setAttribute("data-text-color","#1A1414"),t.setAttribute("data-modal-override-open-id","nutrient-sdk-docs-ai"),t.setAttribute("data-button-hide","false"),t.setAttribute("data-modal-open-by-default","true"),t.setAttribute("data-user-analytics-fingerprint-enabled","true"),t.setAttribute("data-project-name","Nutrient"),t.setAttribute("data-modal-title","Nutrient AI"),t.setAttribute("data-modal-disclaimer",a.modalDisclaimer),t.setAttribute("data-example-questions",a.exampleQuestions),t.setAttribute("data-modal-disclaimer-bg-color","#EFEBE7"),t.setAttribute("data-modal-disclaimer-text-color","#67594B"),t.setAttribute("data-modal-disclaimer-font-size","14px"),t.setAttribute("data-modal-disclaimer-padding","0.875rem"),t.setAttribute("data-query-input-font-size","1rem"),t.setAttribute("data-query-input-text-color","#1A1414"),t.setAttribute("data-query-input-placeholder-text-color","#67594B"),t.setAttribute("data-query-input-border-color","#1A1414"),t.setAttribute("data-query-input-focus-border-color","#DE9DCC"),t.setAttribute("data-submit-query-button-bg-color","#1A1414"),t.setAttribute("data-example-question-button-height","40px"),t.setAttribute("data-example-question-button-padding-x","1.5rem"),t.setAttribute("data-example-question-button-padding-y","0.75rem"),t.setAttribute("data-example-question-button-border","1px solid #C2B8AE !important"),t.setAttribute("data-example-question-button-border-radius","8px"),t.setAttribute("data-example-question-button-text-color","#1A1414"),t.setAttribute("data-example-question-button-box-shadow","none"),t.setAttribute("data-example-question-button-font-size","0.875rem"),t.setAttribute("data-example-question-button-hover-bg-color","#EFEBE7"),t.setAttribute("data-modal-z-index","999999"),t.setAttribute("data-modal-border-radius","1.5rem"),t.setAttribute("data-modal-header-bg-color","#DE9DCC"),t.setAttribute("data-modal-header-border-bottom","none"),t.setAttribute("data-modal-header-padding","1.5rem"),t.setAttribute("data-modal-title-font-weight","400"),t.setAttribute("data-modal-title-font-size","1.5rem"),t.setAttribute("data-modal-title-color","#1A1414"),t.setAttribute("data-button-text","ASK AI"),t.setAttribute("data-button-height","5rem"),t.setAttribute("data-button-width","5rem"),t.setAttribute("data-button-bg-color","#1A1414"),t.setAttribute("data-button-border-radius","1rem"),t.setAttribute("data-button-text-shadow","none"),t.setAttribute("data-button-text-font-weight","400"),t.setAttribute("data-button-text-font-size","0.75rem"),t.setAttribute("data-button-image-height","1.5rem"),t.setAttribute("data-button-image-width","1.5rem"),t.setAttribute("data-thread-clear-button-height","40px"),t.setAttribute("data-thread-clear-button-padding-x","16px"),t.setAttribute("data-thread-clear-button-padding-y","8px"),t.setAttribute("data-thread-clear-button-border","none"),t.setAttribute("data-thread-clear-button-border-radius","8px"),t.setAttribute("data-thread-clear-button-bg-color","#EFEBE7"),t.setAttribute("data-thread-clear-button-hover-bg-color","#E2DBD9"),t.setAttribute("data-thread-clear-button-text-color","#1A1414"),t.setAttribute("data-thread-clear-button-font-size","12px"),t.setAttribute("data-thread-clear-button-icon-size","24px")
document.body.appendChild(t)}
```

--------------------------------

### Flutter PDF Display with Nutrient Package

Source: https://www.nutrient.io/sdk/flutter/getting-started

Demonstrates how to display a PDF document within a Flutter application using the Nutrient package. This involves importing the package and using the NutrientView widget, providing the path to the PDF file.

```dart
import 'package:nutrient_flutter/nutrient_flutter.dart';

// ... inside your Flutter widget ...
Scaffold(
  body: NutrientView(
    documentPath: 'file:///path/to/Document.pdf',
  ),
);
```

--------------------------------

### Display a PDF Document in Flutter

Source: https://www.nutrient.io/sdk/flutter/getting-started

This example shows how to display a PDF document using the Nutrient Flutter SDK's PDF viewer widget. You'll need to provide a valid PDF URL or file path.

```dart
import 'package:flutter/material.dart';
import 'package:nutrient_sdk/nutrient_sdk.dart';

class PdfViewerScreen extends StatelessWidget {
  final String pdfUrl;

  const PdfViewerScreen({Key? key, required this.pdfUrl}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('PDF Viewer'))
      body: NutrientPdfViewer(pdfUrl: pdfUrl),
    );
  }
}
```

--------------------------------

### Load and Display PDF in Flutter

Source: https://www.nutrient.io/sdk/flutter/getting-started

A Flutter widget that extracts a PDF document from assets and displays it using the NutrientView. Handles web and native platforms, temporary file creation, and loading states with error and progress indicators.

```dart
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  Future<String> extractAsset(BuildContext context, String assetPath) async {
    if (kIsWeb) {
      return assetPath;
    }
    final bytes = await DefaultAssetBundle.of(context).load(assetPath);
    final list = bytes.buffer.asUint8List();
    final tempDir = await Nutrient.getTemporaryDirectory();
    final tempDocumentPath = '${tempDir.path}/$assetPath';
    final file = File(tempDocumentPath);

    await file.create(recursive: true);
    file.writeAsBytesSync(list);
    return file.path;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FutureBuilder<String>(
          future: extractAsset(context, documentPath),
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              /// NutrientView is a widget that displays a PDF document.
              return NutrientView(
                documentPath: snapshot.data!,
              );
            } else if (snapshot.hasError) {
              return Center(
                child: Text('${snapshot.error}'),
              );
            } else {
              return const Center(
                child: CircularProgressIndicator(),
              );
            }
          }),
    );
  }
}
```

--------------------------------

### Initialize VWO with settings and script loading

Source: https://www.nutrient.io/sdk/flutter/getting-started

This snippet shows the initialization process for VWO. It checks for VWO disable flags, retrieves settings, and constructs a URL to load the VWO JavaScript. It then either loads the script directly or via an XHR request based on the URL parameters. Initialization is deferred to prevent render blocking.

```javascript
if(d.URL.indexOf('__vwo_disable__')>-1)return; var e=this.settings_tolerance(); w._vwo_settings_timer=setTimeout(function(){ 
_vwo_code.finish(); stT.removeItem(cK) },e); 

var o=window._vis_opt_url||d.URL, s='https://dev.visualwebsiteoptimizer.com/j.php?a='+account_id+'&u='+encodeURIComponent(o)+'&vn='+version; if(w.location.search.indexOf('_vwo_xhr')!==-1){ this.addScript({src:s}) }else{ this.load(s+'&x=true') } 

// Defer initialization to prevent render blocking if(d.readyState === 'loading') { d.addEventListener('DOMContentLoaded', function() { code.init(); }); } else { 
if('requestIdleCallback' in w) { requestIdleCallback(function() { code.init(); }, {timeout: 1000}); } else { setTimeout(function() { code.init(); }, 0); } }
```

--------------------------------

### Open Xcode Workspace

Source: https://www.nutrient.io/sdk/flutter/getting-started

Opens the Runner.xcworkspace file located in the ios folder of your project using the terminal. This action is typically performed to start development or make configuration changes within Xcode.

```bash
open ios/Runner.xcworkspace
```

--------------------------------

### Integrate Visual Website Optimizer (VWO) Script (JavaScript)

Source: https://www.nutrient.io/sdk/flutter/getting-started

This snippet initializes the VWO (Visual Website Optimizer) tracking script. It retrieves account ID and version from the inline script, then attempts to load VWO settings from local storage. It includes logic for managing settings tolerance and handling script loading, providing a fallback if VWO is not already present.

```javascript
window._vwo_code || (function() {
    var account_id = 892495,
        version = 2.1,
        settings_tolerance = 2000,
        hide_element = '', // Don't hide body to prevent flash
        hide_element_style = '',
        /* DO NOT EDIT BELOW THIS LINE */
        f = false,
        w = window,
        d = document,
        v = d.querySelector('#vwoCode'),
        cK = '_vwo_' + account_id + '_settings',
        cc = {};

    try {
        var c = JSON.parse(localStorage.getItem('_vwo_' + account_id + '_config'));
        cc = c && typeof c === 'object' ? c : {};
    } catch (e) {}

    var stT = cc.stT == 'session' ? w.sessionStorage : w.localStorage;

    var code = {
        nonce: v && v.nonce,
        library_tolerance: function() {
            return typeof library_tolerance !== 'undefined' ? library_tolerance : undefined;
        },
        settings_tolerance: function() {
            return cc.sT || settings_tolerance;
        },
        hide_element_style: function() {
            return '{' + (cc.hES || hide_element_style) + '}';
        },
        hide_element: function() {
            // Always return empty to prevent hiding
            return '';
        },
        getVersion: function() {
            return version;
        },
        finish: function(e) {
            if (!f) {
                f = true;
                var t = d.getElementById('_vis_opt_path_hides');
                if (t) t.parentNode.removeChild(t);
                if (e) (new Image).src = 'https://dev.visualwebsiteoptimizer.com/ee.gif?a=' + account_id + e;
            }
        },
        finished: function() {
            return f;
        },
        addScript: function(e) {
            var t = d.createElement('script');
            t.type = 'text/javascript';
            if (e.src) {
                t.src = e.src;
                t.async = true; // Make async
            } else {
                t.text = e.text;
            }
            v && t.setAttribute('nonce', v.nonce);
            d.getElementsByTagName('head')[0].appendChild(t);
        },
        load: function(e, t) {
            var n = this.getSettings(),
                i = d.createElement('script'),
                r = this;
            t = t || {};
            if (n) {
                i.textContent = n;
                d.getElementsByTagName('head')[0].appendChild(i);
                if (!w.VWO || VWO.caE) {
                    stT.removeI

```

--------------------------------

### Update App Theme for Nutrient Android SDK (XML)

Source: https://www.nutrient.io/sdk/flutter/getting-started

These XML snippets demonstrate how to update the theme in `styles.xml` and `styles-night.xml` to use `PSPDFKit.Theme.Default` as the parent. This customization is required for the Nutrient UI when using the Nutrient Android SDK.

```xml
<style name="NormalTheme" parent="Theme.AppCompat.Light.NoActionBar">
<style name="NormalTheme" parent="PSPDFKit.Theme.Default">

```

--------------------------------

### Flutter Migration Script Example Usage

Source: https://www.nutrient.io/guides/flutter/migration-guides/flutter-5-migration-guide

Demonstrates how to use the migration script in a terminal. Examples include previewing changes, applying migrations with API updates, migrating specific directories, and combining options.

```bash
# Preview changes first.dart migrate_to_nutrient.dart --dry-run
# Apply migration with new imports.dart migrate_to_nutrient.dart
# Full migration including API updates.dart migrate_to_nutrient.dart --update-apis
# Migrate specific directory.dart migrate_to_nutrient.dart lib/
# Combine options.dart migrate_to_nutrient.dart --dry-run --update-apis
```

--------------------------------

### Modify Gradle Build File for Android SDK Versions

Source: https://www.nutrient.io/sdk/flutter/getting-started

Update the `compileSdkVersion` and `minSdkVersion` in your `android/app/build.gradle` file. This ensures compatibility with the required Android SDK versions for your Flutter LLM integration. Additionally, adjust `sourceCompatibility`, `targetCompatibility`, and `jvmTarget` for optimal Java and Kotlin builds.

```gradle
android {
    compileSdkVersion flutter.compileSdkVersion
    compileSdkVersion 35...

    defaultConfig {
        minSdkVersion flutter.minSdkVersion
        minSdkVersion 21...
    }

    compileOptions {
       sourceCompatibility JavaVersion.VERSION_1_8
       targetCompatibility JavaVersion.VERSION_1_8
       sourceCompatibility JavaVersion.VERSION_17
       targetCompatibility JavaVersion.VERSION_17
    }

    // If you have this block, update the `jvmTarget` to 17.
    kotlinOptions {
        jvmTarget = '1.8'
        jvmTarget = '17'
    }
...
```

--------------------------------

### Update iOS Platform Version in Podfile

Source: https://www.nutrient.io/sdk/flutter/getting-started

Modifies the minimum required iOS platform version in the project's Podfile. This ensures compatibility with libraries and SDKs that require a newer iOS version, such as Nutrient iOS SDK which requires 16.0.

```ruby
# platform :ios, '9.0'
platform :ios, '16.0'
```

--------------------------------

### Open ChatGPT with Context (JavaScript)

Source: https://www.nutrient.io/guides/flutter/instant-synchronization/usage

Opens ChatGPT in a new tab with a pre-filled prompt that includes the current Nutrient.io documentation URL and a request for assistance. This allows users to quickly get AI help related to the documentation they are viewing.

```javascript
function v(i){const t="https://www.nutrient.io",o=window.location.pathname,r=`I'm looking at this Nutrient documentation: ${\`${t}${o}\`} Help me understand how to use it. Be ready to explain concepts, give examples, or help debug based on it.`,s=`https://chatgpt.com/?q=${encodeURIComponent(r)}`;window.open(s,"_blank")}
```

--------------------------------

### Initialize GTM and Synchronize Themes (JavaScript)

Source: https://www.nutrient.io/sdk/flutter/getting-started

This snippet initializes Google Tag Manager (GTM) asynchronously to avoid render blocking and handles theme synchronization based on HTML attributes. It sets the 'data-theme' attribute, defaulting to 'light' if not already present. It also includes logic for tracking 'Copy Code' clicks.

```javascript
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', function() {
    (function (w, d, s, l, i) {
      w[l] = w[l] || [];
      w[l].push({"gtm.start": new Date().getTime(), event: "gtm.js"});
      const f = d.getElementsByTagName(s)[0],
        j = d.createElement(s),
        dl = l != "dataLayer" ? "&l=" + l : "";
      j.async = true;
      j.src = "https://www.googletagmanager.com/gtm.js?id=" + i + dl;
      f.parentNode.insertBefore(j, f);
    })(window, document, "script", "dataLayer", "GTM-T6LGJJC");
  });
} else {
  (function (w, d, s, l, i) {
    w[l] = w[l] || [];
    w[l].push({"gtm.start": new Date().getTime(), event: "gtm.js"});
    const f = d.getElementsByTagName(s)[0],
      j = d.createElement(s),
      dl = l != "dataLayer" ? "&l=" + l : "";
    j.async = true;
    j.src = "https://www.googletagmanager.com/gtm.js?id=" + i + dl;
    f.parentNode.insertBefore(j, f);
  })(window, document, "script", "dataLayer", "GTM-T6LGJJC");
}

const html = document.documentElement;
const forcedTheme = html.getAttribute("data-forced-theme");
const currentTheme = html.getAttribute("data-theme");

if (forcedTheme) {
  html.setAttribute("data-theme", forcedTheme);
} else if (!currentTheme) {
  html.setAttribute("data-theme", "light");
}

window.plausible = window.plausible || function (...args) {
  (window.plausible.q = window.plausible.q || []).push(args);
};

document.addEventListener("DOMContentLoaded", function () {
  const observer = new MutationObserver(function (mutations) {
    mutations.forEach(function (mutation) {
      mutation.addedNodes.forEach(function (node) {
        if (node.nodeType === 1) {
          if (node.classList && node.classList.contains("copy")) {
            attachCopyTracking(node);
          }
          if (node.querySelectorAll) {
            const copyButtons = node.querySelectorAll("div.copy");
            copyButtons.forEach(attachCopyTracking);
          }
        }
      });
    });
  });

  function attachCopyTracking(copyDiv) {
    if (copyDiv.hasAttribute("data-plausible-tracked")) return;
    copyDiv.setAttribute("data-plausible-tracked", "true");
    copyDiv.setAttribute("id", "copy-click");
    copyDiv.addEventListener("click", function () {
      if (window.plausible) {
        window.plausible("Copy Code", {
          props: {
            location: window.location.pathname,
          },
        });
      }
      if (window.dataLayer) {
        window.dataLayer.push({
          event: "click_copy",
          click_id: "copy-click",
          location: window.location.pathname,
        });
      }
    });
  }

  const existingCopyButtons = document.querySelectorAll("div.copy");
  existingCopyButtons.forEach(attachCopyTracking);

  observer.observe(document.body, {
    childList: true,
    subtree: true,
  });
});
```

--------------------------------

### Install Nutrient Flutter SDK via CLI

Source: https://www.nutrient.io/guides/flutter/downloads

Command to add the Nutrient Flutter SDK to your project using the Flutter package manager.

```bash
flutter pub add nutrient_flutter
```

--------------------------------

### Open Grok with Context (JavaScript)

Source: https://www.nutrient.io/guides/flutter/instant-synchronization/instant-layers

Launches Grok AI in a new tab, including the current Nutrient IO documentation URL and a specific prompt to guide the AI's assistance. This allows users to get context-aware help from Grok.

```javascript
function C(i){
  const t="https://www.nutrient.io",
  o=window.location.pathname,
  r=`I'm looking at this Nutrient documentation: ${`${t}${o}`} Help me understand how to use it. Be ready to explain concepts, give examples, or help debug based on it.`;
  window.open(`https://grok.com/c?q=${encodeURIComponent(r)}`,"_blank")
}
```

--------------------------------

### Open ChatGPT with Context

Source: https://www.nutrient.io/guides/flutter/migration-guides/flutter-3-2-migration-guide

Opens ChatGPT in a new tab with a pre-filled prompt that includes the current Nutrient.io documentation URL and a request for assistance. This allows users to quickly get AI help related to the documentation they are viewing.

```javascript
function v(i) {
    const t = "https://www.nutrient.io",
        o = window.location.pathname,
        r = `I'm looking at this Nutrient documentation: ${`${t}${o}`}
 Help me understand how to use it. Be ready to explain concepts, give examples, or help debug based on it.`;
    const s = `https://chatgpt.com/?q=${encodeURIComponent(r)}`;
    window.open(s, "_blank")
}
```

--------------------------------

### Open Claude with Context

Source: https://www.nutrient.io/guides/flutter/migration-guides/flutter-3-2-migration-guide

Opens Claude.ai in a new tab with a pre-filled prompt that includes the current Nutrient.io documentation URL and a request for assistance. Similar to the ChatGPT function, this provides a quick way to get AI-powered help.

```javascript
function x(i) {
    const t = "https://www.nutrient.io",
        o = window.location.pathname,
        r = `I'm looking at this Nutrient documentation: ${`${t}${o}`}
 Help me understand how to use it. Be ready to explain concepts, give examples, or help debug based on it.`;
    const s = `https://claude.ai/new?q=${encodeURIComponent(r)}`;
    window.open(s, "_blank")
}
```

--------------------------------

### Open Grok with Documentation Context

Source: https://www.nutrient.io/guides/flutter/prebuilt-solutions/example-projects

Opens Grok AI in a new tab with a pre-filled prompt. The prompt includes the current page's URL and asks for help understanding and using the Nutrient documentation.

```javascript
function C(i){const t="https://www.nutrient.io",o=window.location.pathname,r=`I'm looking at this Nutrient documentation: ${`${t}${o}`} Help me understand how to use it. Be ready to explain concepts, give examples, or help debug based on it.`,s=`https://grok.com/c?q=${encodeURIComponent(r)}`
;window.open(s,"_blank")
}
```

--------------------------------

### Determine AI Chatbot Configuration Based on Path

Source: https://www.nutrient.io/sdk/flutter/getting-started

This JavaScript function determines which AI chatbot configuration to use based on the current URL's pathname. It checks if the pathname starts with any of the predefined workflow or low-code paths and returns the corresponding configuration object, defaulting to a general configuration if no match is found.

```javascript
function d(){
const a=window.location.pathname,
t=Object.entries(n.paths).find((
  [o,r]
)=>r.some(s=>a.startsWith(s))),
e=t?t[0].replace("Paths",""):"default";
return e==="workflow"?n.workflow:e==="lowCode"?n.lowCode:n.default
}
```

--------------------------------

### Flutter LLM Integration Example Projects

Source: https://www.nutrient.io/guides/flutter/customize

Provides links to example projects demonstrating how to integrate LLMs within Flutter applications using Nutrient IO. These examples showcase prebuilt solutions for common use cases.

```markdown
*   [Example projects](/guides/flutter/prebuilt-solutions/example-projects/)
```

--------------------------------

### Apply Code Classes with JavaScript

Source: https://www.nutrient.io/sdk/flutter/getting-started

This JavaScript function applies Tailwind CSS classes to code elements after ExpressiveCode renders them. It's designed to work immediately, on DOMContentLoaded, and during Astro page navigation.

```javascript
function applyCodeClasses() {
 document .querySelectorAll("\\[data-code-class\\]")
 .forEach(function (container) {
 const htmlContainer = container;
 const classes = htmlContainer.dataset?.codeClass;
 if (!classes || htmlContainer.dataset?.classesApplied) return;
 const codeElement = htmlContainer.querySelector("pre code");
 if (codeElement) {
 classes.split(" ").forEach(function (cls) {
 if (cls.trim())
 codeElement.classList.add(cls.trim());
 });
 htmlContainer.dataset.classesApplied = "true";
 }
 });
}

// Try immediately
applyCodeClasses();

// Also try on DOMContentLoaded
if (document.readyState === "loading") {
 document.addEventListener("DOMContentLoaded", applyCodeClasses);
}

// And on Astro page navigation
document.addEventListener("astro:page-load", applyCodeClasses);
```

--------------------------------

### Add Annotations to a PDF in Flutter

Source: https://www.nutrient.io/sdk/flutter/getting-started

This snippet illustrates how to enable annotation features for a PDF document within your Flutter application using the Nutrient SDK. Users can add text, drawings, and highlights.

```dart
import 'package:flutter/material.dart';
import 'package:nutrient_sdk/nutrient_sdk.dart';

class AnnotatablePdfScreen extends StatefulWidget {
  final String pdfUrl;

  const AnnotatablePdfScreen({Key? key, required this.pdfUrl}) : super(key: key);

  @override
  _AnnotatablePdfScreenState createState() => _AnnotatablePdfScreenState();
}

class _AnnotatablePdfScreenState extends State<AnnotatablePdfScreen> {
  late final NutrientPdfViewerController _controller;

  @override
  void initState() {
    super.initState();
    _controller = NutrientPdfViewerController(pdfUrl: widget.pdfUrl);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Annotatable PDF'))
      body: NutrientPdfViewer(
        controller: _controller,
        enableAnnotations: true,
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          await _controller.addTextAnnotation('Hello Annotation!', x: 100, y: 100);
        },
        child: Icon(Icons.edit),
      ),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}
```

--------------------------------

### Open Claude with Documentation Context

Source: https://www.nutrient.io/guides/flutter/prebuilt-solutions/example-projects

Opens Claude AI in a new tab with a pre-filled prompt. The prompt includes the current page's URL and requests assistance in understanding and using the Nutrient documentation.

```javascript
function x(i){const t="https://www.nutrient.io",o=window.location.pathname,r=`I'm looking at this Nutrient documentation: ${`${t}${o}`} Help me understand how to use it. Be ready to explain concepts, give examples, or help debug based on it.`,s=`https://claude.ai/new?q=${encodeURIComponent(r)}`
;window.open(s,"_blank")
}
```

--------------------------------

### Open Grok AI with Context (JavaScript)

Source: https://www.nutrient.io/guides/flutter/instant-synchronization/usage

Opens Grok AI in a new tab with a pre-filled prompt that references the current Nutrient.io documentation page and asks for assistance. This provides users with quick access to AI support for the documentation.

```javascript
function C(i){const t="https://www.nutrient.io",o=window.location.pathname,r=`I'm looking at this Nutrient documentation: ${\`${t}${o}\`} Help me understand how to use it. Be ready to explain concepts, give examples, or help debug based on it.`,s=`https://grok.com/c?q=${encodeURIComponent(r)}`;window.open(s,"_blank")}
```

--------------------------------

### Open ChatGPT with Documentation Context

Source: https://www.nutrient.io/guides/flutter/prebuilt-solutions/example-projects

Opens ChatGPT in a new tab with a pre-filled prompt. The prompt includes the current page's URL and asks for assistance in understanding and using the Nutrient documentation.

```javascript
function v(i){const t="https://www.nutrient.io",o=window.location.pathname,r=`I'm looking at this Nutrient documentation: ${`${t}${o}`} Help me understand how to use it. Be ready to explain concepts, give examples, or help debug based on it.`,s=`https://chatgpt.com/?q=${encodeURIComponent(r)}`
;window.open(s,"_blank")
}
```

--------------------------------

### Open Claude AI with Context (JavaScript)

Source: https://www.nutrient.io/guides/flutter/instant-synchronization/usage

Opens Claude AI in a new tab with a pre-filled prompt, including the current Nutrient.io documentation URL and a request for help. This facilitates seamless AI assistance for users reading the documentation.

```javascript
function x(i){const t="https://www.nutrient.io",o=window.location.pathname,r=`I'm looking at this Nutrient documentation: ${\`${t}${o}\`} Help me understand how to use it. Be ready to explain concepts, give examples, or help debug based on it.`,s=`https://claude.ai/new?q=${encodeURIComponent(r)}`;window.open(s,"_blank")}
```

--------------------------------

### Specify Assets Directory in pubspec.yaml

Source: https://www.nutrient.io/sdk/flutter/getting-started

This YAML snippet shows how to configure the `pubspec.yaml` file in a Flutter project to include the 'PDFs' directory in the assets. This declaration tells Flutter to bundle the contents of the 'PDFs' directory with the application, making them accessible at runtime.

```yaml
# The following section is specific to Flutter.
flutter:
  assets:
    - PDFs/...
```

--------------------------------

### Open Grok with Context (JavaScript)

Source: https://www.nutrient.io/guides/flutter/troubleshooting/what-is-a-bundle-id

Opens Grok.com in a new tab with a pre-filled prompt. The prompt includes the current Nutrient IO documentation URL and asks for help understanding and debugging it.

```javascript
function C(i){
const t="https://www.nutrient.io",
o=window.location.pathname,
r=`I'm looking at this Nutrient documentation: ${`${t}${o}`} Help me understand how to use it. Be ready to explain concepts, give examples, or help debug based on it.`,
s=`https://grok.com/c?q=${encodeURIComponent(r)}`;
window.open(s,"_blank")
}
```

--------------------------------

### Extend FlutterAppCompatActivity in MainActivity

Source: https://www.nutrient.io/sdk/flutter/getting-started

Change the base class of your `MainActivity` from `FlutterActivity` to `FlutterAppCompatActivity`. This change is crucial for ensuring that your Android Flutter application properly utilizes the AndroidX AppCompat library, enabling better UI consistency and access to modern Android features.

```java
import io.flutter.embedding.android.FlutterActivity;
import io.flutter.embedding.android.FlutterAppCompatActivity;

public class MainActivity extends FlutterActivity {
public class MainActivity extends FlutterAppCompatActivity {}

```

--------------------------------

### Run Flutter Migration Script

Source: https://www.nutrient.io/guides/flutter/migration-guides/flutter-5-migration-guide

This command-line instruction demonstrates how to download and execute the automated migration script for transitioning from `pspdfkit-flutter` to `nutrient-flutter`. It provides two methods: downloading the script using `curl` or running it directly if the repository has been cloned.

```bash
# Download and run the migration script.
curl -O https://raw.githubusercontent.com/PSPDFKit/pspdfkit-flutter/refs/heads/master/tools/migrate_to_nutrient.dart

# Or if you've cloned the repository.
dart path/to/pspdfkit-flutter/tools/migrate_to_nutrient.dart
```

--------------------------------

### Markdown Actions Dropdown (JavaScript)

Source: https://www.nutrient.io/sdk/flutter/getting-started

Handles the expansion and collapse of a dropdown menu associated with markdown actions, likely for editing or managing markdown content. It manages ARIA attributes for accessibility and focuses on the first option when the dropdown opens. It also includes keyboard navigation support.

```javascript
document.addEventListener("DOMContentLoaded", () => {
    I(), A();
});

function I() {
    document.querySelectorAll(' [id^="markdown-actions-container-"] ').forEach(t => {
        const o = t.getAttribute("aria-controls");
        if (!o) return;
        const e = document.getElementById(o),
            r = t.querySelector(".arrow-dropdown-icon");
        if (!e) return;
        t.addEventListener("click", function(n) {
            n.stopPropagation(), t.getAttribute("aria-expanded") === "true" ? s() : a();
        }), t.addEventListener("keydown", function(n) {
            if (n.key === "Enter" || n.key === " ") n.preventDefault(), t.getAttribute("aria-expanded") === "true" ? s() : a();
            else if (n.key === "ArrowDown") {
                n.preventDefault(), a();
                const c = e.querySelector(".markdown-actions-option");
                c && c.focus();
            }
        }), e.addEventListener("click", function(n) {
            n.target.closest(".markdown-actions-option") && (n.preventD
        });
    });
}
```

--------------------------------

### Consistent API Usage in Nutrient Flutter

Source: https://www.nutrient.io/guides/flutter/migration-guides/flutter-5-migration-guide

This example illustrates the importance of using consistent API styles when migrating to `nutrient_flutter`. It shows a deprecated approach that mixes old `Pspdfkit` initialization with new `Nutrient` import, leading to warnings. The recommended approach uses the `nutrient_flutter` import and the new `Nutrient.initialize()` method for a warning-free experience.

```dart
// ❌ Don't mix old and new APIs.
import 'package:nutrient_flutter/nutrient_flutter.dart';
await Pspdfkit.initialize(); // Will show deprecation warning

// ✅ Use consistent API style.
import 'package:nutrient_flutter/nutrient_flutter.dart';
await Nutrient.initialize(); // Recommended
```

--------------------------------

### Dynamic Header and Navigation Behavior (JavaScript)

Source: https://www.nutrient.io/sdk/flutter/getting-started

This script manages the visibility and expansion of the website header and navigation bar based on scroll position and mouse events. It ensures a responsive user experience by adjusting element transforms and classes. Dependencies include standard browser DOM APIs.

```javascript
document.addEventListener("DOMContentLoaded",()=>{
    const r=document.querySelector(".header"),a=document.querySelector("#top-nav-bar"),v=document.querySelector("main"),l=document.querySelector(".right-aside"),c=50;
    let o=!1,n=!1,t=null,h=!0;
    document.body.setAttribute("data-is-header-expanded","true"),r&&(r.style.transition="transform 0.3s ease-out"),v&&(v.style.transition="transform 0.3s ease-out");
    let L=0;
    a&&(L=a.offsetHeight);
    const s=document.querySelector(".header-nav-wrapper");
    s&&s.classList.add("header-transition");

    function i(e){
        if(h===e)return;
        h=e;
        const m=L;
        r&&requestAnimationFrame(()=>{
            r.style.transform=e?"translateY(0)":`translateY(-${m}px)`
        }),
        requestAnimationFrame(()=>{
            s&&(e?(s.classList.add("header-expanded"),s.classList.remove("header-collapsed"),document.body.setAttribute("data-is-header-expanded","true"),requestAnimationFrame(()=>{
                l&&(l.style.transform="translateY(0)")
            })):(s.classList.add("header-collapsed"),s.classList.remove("header-expanded"),document.body.setAttribute("data-is-header-expanded","false"),l&&(l.style.transform=`translateY(-${m-17}px)`)));
            const d=document.querySelector(".full-logo"),f=document.querySelector(".symbol-logo");
            d&&f&&setTimeout(()=>{
                requestAnimationFrame(()=>{
                    e?(d.classList.remove("navbar-hidden"),f.classList.remove("navbar-hidden")):(d.classList.add("navbar-hidden"),f.classList.add("navbar-hidden"))
                })
            },150)
        })
    }

    a&&(a.addEventListener("mouseenter",()=>{
        n=!0,t&&clearTimeout(t),t=setTimeout(()=>{
            n&&requestAnimationFrame(()=>{
                a.classList.add("nav-expanded")
            }),t=null
        },400)}
    ),a.addEventListener("mouseleave",()=>{
        n=!1,t&&(clearTimeout(t),t=null),o||requestAnimationFrame(()=>{
            a.classList.remove("nav-expanded")
        })}
    )),r&&(r.addEventListener("mouseenter",()=>{
        o=!0
    }),r.addEventListener("mouseleave",()=>{
        o=!1,!n&&a&&(t&&(clearTimeout(t),t=null),requestAnimationFrame(()=>{
            a.classList.remove("nav-expanded")
        })),window.scrollY>c&&i(!1)}
    }));

    let u=null;
    const p=10;
    window.addEventListener("scroll",()=>{
        u&&clearTimeout(u),u=setTimeout(()=>{
            const e=window.scrollY;
            if(e===0){i(!0);return}
            !o&&!n&&e>c&&i(!1)
        },p)},{passive:!0})

    document.addEventListener("click",e=>{
        e.target?.closest('a\[id^="toc-"]')&&(i(!1),setTimeout(()=>{
            window.scrollY<=c&&!o&&!n&&i(!0)
        },500))
    })
});
```

--------------------------------

### Copy Text to Clipboard (JavaScript)

Source: https://www.nutrient.io/sdk/flutter/getting-started

Provides a robust mechanism to copy text to the clipboard. It prioritizes the modern Clipboard API for secure contexts and specific browser compatibility (like Safari), falling back to an older execCommand method if the primary method fails. It returns a boolean indicating success.

```javascript
function g(i){
    const t = document.createElement("textarea");
    t.value = i;
    t.style.position = "fixed", t.style.top = "0", t.style.left = "-999999px", t.style.width = "2em", t.style.height = "2em", t.style.padding = "0", t.style.border = "none", t.style.outline = "none", t.style.boxShadow = "none", t.style.background = "transparent";
    document.body.appendChild(t), t.focus(), t.select();
    let o = !1;
    try {
        o = document.execCommand("copy");
    } catch (e) {
        console.error("Fallback copy failed:", e);
    }
    return document.body.removeChild(t), o;
}

async function b(i){
    const t = window.isSecureContext;
    if (navigator.clipboard && t) try {
        if (/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) {
            const e = new ClipboardItem({"text/plain": new Blob([i], {type: "text/plain"})});
            await navigator.clipboard.write([e]);
        } else await navigator.clipboard.writeText(i);
        return
    } catch (e) {
        console.warn("Clipboard API failed, trying fallback:", e);
    }
    if (!g(i)) throw new Error("Failed to copy to clipboard");
}
```

--------------------------------

### Open Claude with Context (JavaScript)

Source: https://www.nutrient.io/guides/flutter/troubleshooting/what-is-a-bundle-id

Opens Claude.ai in a new tab with a pre-filled prompt. The prompt includes the current Nutrient IO documentation URL and asks for help understanding and debugging it.

```javascript
function x(i){
const t="https://www.nutrient.io",
o=window.location.pathname,
r=`I'm looking at this Nutrient documentation: ${`${t}${o}`} Help me understand how to use it. Be ready to explain concepts, give examples, or help debug based on it.`,
s=`https://claude.ai/new?q=${encodeURIComponent(r)}`;
window.open(s,"_blank")
}
```

--------------------------------

### Initialize Event Listeners (JavaScript)

Source: https://www.nutrient.io/sdk/flutter/getting-started

Sets up event listeners for various UI interactions, including click handlers for copy buttons, dropdown items, and a specific 'view markdown' action. It ensures these listeners are attached after the DOM is fully loaded. This function is typically called once to bootstrap the application's interactive features.

```javascript
function E(i = {}) {
    document.addEventListener("DOMContentLoaded", () => {
        const t = document.querySelector(i.buttonSelector || ".copy-page-btn");
        t && t.addEventListener("click", r => {
            r.preventDefault(), w(i);
        });
        const o = document.querySelector(i.dropdownSelector || ".copy-dropdown-item");
        o && o.addEventListener("click", r => {
            r.preventDefault(), w(i);
        });
        const e = document.querySelector(".view-markdown-item");
        e && e.addEventListener("click", r => {
            r.preventDefault(), k();
        });
    });
}

E();
```

--------------------------------

### VWO Initialization and Script Loading (JavaScript)

Source: https://www.nutrient.io/guides/flutter/kb

This snippet demonstrates the core VWO initialization process. It includes functions for loading scripts remotely, handling network responses (both success and error), retrieving settings from local storage, and initiating the VWO setup by dynamically loading a JavaScript file from the VWO server. It also incorporates logic to defer execution until the DOM is ready or during idle periods.

```javascript
var code = { addScript: function(t) { var e = document.createElement('script'); e.async = !0; e.src = t.src || ''; if (t.text) { e.text = t.text; } e.onload = t.onload || null; e.onerror = t.onerror || null; document.head.appendChild(e); }, load: function(e, t) { t = t || {}; if (window.XMLHttpRequest) { var r = new XMLHttpRequest; r.open('GET', e, !0); r.withCredentials = !t.dSC; r.responseType = t.responseType || 'text'; r.onload = function() { if (t.onloadCb) { return t.onloadCb(r, e); } if (r.status === 200 || r.status === 304) { _vwo_code.addScript({ text: r.responseText }); } else { _vwo_code.finish('&e=loading_failure:' + e); } }; r.onerror = function() { if (t.onerrorCb) { return t.onerrorCb(e); } _vwo_code.finish('&e=loading_failure:' + e); }; r.send(); } else { var o = new XMLHttpRequest; o.open('GET', e, true); o.withCredentials = !t.dSC; o.responseType = t.responseType || 'text'; o.onload = function() { if (t.onloadCb) { return t.onloadCb(o, e); } if (o.status === 200 || o.status === 304) { _vwo_code.addScript({ text: o.responseText }); } else { _vwo_code.finish('&e=loading_failure:' + e); } }; o.onerror = function() { if (t.onerrorCb) { return t.onerrorCb(e); } _vwo_code.finish('&e=loading_failure:' + e); }; o.send(); } }, getSettings: function() { try { var e = stT.getItem(cK); if (!e) { return; } e = JSON.parse(e); if (Date.now() > e.e) { stT.removeItem(cK); return; } return e.s; } catch (e) { return; } }, init: function() { if (d.URL.indexOf('__vwo__disable__') > -1) return; var e = this.settings_tolerance(); w._vwo_settings_timer = setTimeout(function() { _vwo_code.finish(); stT.removeItem(cK); }, e); var o = window._vis_opt_url || d.URL, s = 'https://dev.visualwebsiteoptimizer.com/j.php?a=' + account_id + '&u=' + encodeURIComponent(o) + '&vn=' + version; if (w.location.search.indexOf('_vwo_xhr') !== -1) { this.addScript({ src: s }); } else { this.load(s + '&x=true'); } } }; w._vwo_code = code; if (d.readyState === 'loading') { d.addEventListener('DOMContentLoaded', function() { code.init(); }); } else { if ('requestIdleCallback' in w) { requestIdleCallback(function() { code.init(); }, { timeout: 1000 }); } else { setTimeout(function() { code.init(); }, 0); } } })();
```