Flutter integration

3min
Accessing Link using webview
Use 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), 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)),
          ],
        ));
  }
}

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)),
          ],
        ));
  }
}
﻿
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 
Demo App Download
﻿klavi_link_demo_flutter  
﻿
﻿
Updated 29 Sep 2024
Did this page help you?
React Native integration
WhiteLabel User Journey
Docs powered by Archbee
TABLE OF CONTENTS
Accessing Link using webview
GitHub
Demo App Download
Klavi Link docs

Flutter integration

Accessing Link using webview

GitHub

Demo App Download
