---
title: Flutter integration
slug: connect/flutter-integration
docTags: 
createdAt: 2024-04-08T08:59:52.302Z
---

# Accessing Link using webview

Use [webview\_flutter](https://github.com/flutter/packages/tree/main/packages/webview_flutter/webview_flutter)  as WebView component to load klavi Link for authorization and data sharing.

According to the original official openfinance article ([https://openfinancebrasil.atlassian.net/wiki/spaces/DraftOF/pages/7995738/Redirecionamento+App-to-App](https://openfinancebrasil.atlassian.net/wiki/spaces/DraftOF/pages/7995738/Redirecionamento+App-to-App)), we assume by default that all institutions implement deeplinks, so we only deal with deep links. and no longer deal with android 'intent://' or custom URL scheme. 

```dart
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:url_launcher/url_launcher.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:webview_flutter_wkwebview/webview_flutter_wkwebview.dart';

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

  @override
  State<WebPage> createState() => _WebPageState();
}

class _WebPageState extends State<WebPage> {
  late final WebViewController _webViewController;

  static const urlWhiteList = [
    'https://open-sandbox.klavi.ai',
    'https://open-testing.klavi.ai',
    'https://open.klavi.ai',
    'https://www.google.com/recaptcha',
    'https://recaptcha.google.com/recaptcha',
  ];

  bool isInWhitelistFn(String url) {
    return urlWhiteList.any((element) =>  url.startsWith(element));
  }
  
  @override
  void initState() {
    super.initState();

    late final PlatformWebViewControllerCreationParams params;
    if (WebViewPlatform.instance is WebKitWebViewPlatform) {
      params = WebKitWebViewControllerCreationParams(
        allowsInlineMediaPlayback: true,
        mediaTypesRequiringUserAction: const <PlaybackMediaTypes>{},
      );
    } else {
      params = const PlatformWebViewControllerCreationParams();
    }
    _webViewController = WebViewController.fromPlatformCreationParams(params);

    _webViewController
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setNavigationDelegate(NavigationDelegate(
          onNavigationRequest: (NavigationRequest request) async {
        if (request.url == 'about:blank') {
          return NavigationDecision.prevent;
        }
        try {
          Uri requestUri = Uri.parse(request.url);
          if (isInWhitelistFn(requestUri.toString())) {
            return NavigationDecision.navigate;
          }
          launchUrl(requestUri, mode: LaunchMode.externalApplication);
          return NavigationDecision.prevent;
        } catch (e) {
          debugPrint('e: $e');
          return NavigationDecision.prevent;
        }
      }));
  }

  @override
  Widget build(BuildContext context) {
    final String url = GoRouterState.of(context).extra! as String;
    _webViewController.loadRequest(Uri.parse(url));

    return Scaffold(
        appBar: AppBar(
          title: const Text('Web'),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Expanded(child: WebViewWidget(controller: _webViewController)),
          ],
        ));
  }
}

```

:::hint{type="warning"}
It is necessary to set up a whitelist containing the domain name of klavi. Otherwise the klavi link will be opened with the system browser.
:::

# GitHub

[GitHub - klaviai/KlaviLinkDemoFlutter](https://github.com/klaviai/KlaviLinkDemoFlutter)&#x20;

# Demo App Download

[klavi\_link\_demo\_flutter](https://www.pgyer.com/WHnXU8)  

::Image[]{src="https://api.archbee.com/api/optimize/3aXvvCPme0Nq_nC3YOUoN/MTGnlzB1Yb-V6NcAJPzoA_image.png" size="24" width="210" height="210" position="flex-start" darkWidth="210" darkHeight="210" showCaption="false"}