Flutter

Nesta seção, você encontrará como implementar a webview no Flutter para uso do produto Unico IDPay

Para o cenário de uso utilizando Flutter, o uso da inappwebview é recomendado.

Após criar a transação e obter o link da transação, a seguinte implementação é recomendada:

Em seu fluxo comum (que está inserido o IDPay), você irá abrir a inappwebview com o link gerado via API;
Você poderá customizar essa abertura da maneira que for o ideal para seu aplicativo;
Irá monitorar se houve alteração de URL (para a redirectUrl) e então feche a inappwebview;

Para abrir uma inappwebview e controlar a alteração de URL pode ser feito da seguinte forma:

  import 'package:flutter_inappwebview/flutter_inappwebview.dart';  
  import 'package:unico_poc_id_pay_inappwebview/RedirectScreen.dart';
  import 'package:unico_poc_id_pay_inappwebview/service.dart';

  Widget setWebView(String URL_TO_LOAD) {
    InAppWebViewGroupOptions options = InAppWebViewGroupOptions(
        crossPlatform: InAppWebViewOptions(
          useShouldOverrideUrlLoading: true,
          mediaPlaybackRequiresUserGesture: false,
        ),
        android: AndroidInAppWebViewOptions(
          useHybridComposition: true,
        ),
        ios: IOSInAppWebViewOptions(
          allowsInlineMediaPlayback: true,
        ));

    return Expanded(
      child: InAppWebView(
        initialUrlRequest: URLRequest(
          url: Uri.parse(URL_TO_LOAD),
        ),
        initialOptions: options,
        androidOnPermissionRequest: (controller, origin, resources) async {
          return PermissionRequestResponse(
              resources: resources,
              action: PermissionRequestResponseAction.GRANT);
        },
        onWebViewCreated: (controller) {
          setState(() {
            _inAppWebViewController = controller;
          });
        },
        onLoadStart: (controller, url) {
          print('CARREGANDO');
          setState(() {
            _link = url.toString();
          });
        },
        onProgressChanged: (controller, progress) {
          setState(() {
            progress == 100 ? _isLoading = false : _isLoading = true;
          });
        },
        onLoadStop: (controller, url) {
          print('CARREGADO');
          setState(() {
            _link = url.toString();
          });
        },
        shouldOverrideUrlLoading: (controller, navigationAction) async {
          var uri = navigationAction.request.url;
          if (uri == Uri.parse("<URL_TO_OBSERVER>")) {
            setState(() {
              _link = "";
            });

            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => const RedirectSreen(),
              ),
            );
            return NavigationActionPolicy.CANCEL;
          }
          return NavigationActionPolicy.ALLOW;
        },
      ),
    );
  }

Para obter permissão de câmera é possível fazer da seguinte forma:

  import 'package:permission_handler/permission_handler.dart';

  void requestPermission() async {
    var status = await Permission.camera.status;
    if (status.isDenied) {
      if (await Permission.camera.request().isGranted) {
        print("ok");
      }
    }
  }

Exemplo de como deverá ficar no app:

É necessário algumas permissões para funcionar corretamente, tais como:

Câmera;
Geolocalização.

Para saber mais sobre, recomendamos uma leitura nos seguintes artigos e documentações:

PreviousAndroid NextiOS

Last updated 1 month ago

Was this helpful?

import 'package:flutter_inappwebview/flutter_inappwebview.dart'; import 'package:unico_poc_id_pay_inappwebview/RedirectScreen.dart'; import 'package:unico_poc_id_pay_inappwebview/service.dart'; Widget setWebView(String URL_TO_LOAD) { InAppWebViewGroupOptions options = InAppWebViewGroupOptions( crossPlatform: InAppWebViewOptions( useShouldOverrideUrlLoading: true, mediaPlaybackRequiresUserGesture: false, ), android: AndroidInAppWebViewOptions( useHybridComposition: true, ), ios: IOSInAppWebViewOptions( allowsInlineMediaPlayback: true, )); return Expanded( child: InAppWebView( initialUrlRequest: URLRequest( url: Uri.parse(URL_TO_LOAD), ), initialOptions: options, androidOnPermissionRequest: (controller, origin, resources) async { return PermissionRequestResponse( resources: resources, action: PermissionRequestResponseAction.GRANT); }, onWebViewCreated: (controller) { setState(() { _inAppWebViewController = controller; }); }, onLoadStart: (controller, url) { print('CARREGANDO'); setState(() { _link = url.toString(); }); }, onProgressChanged: (controller, progress) { setState(() { progress == 100 ? _isLoading = false : _isLoading = true; }); }, onLoadStop: (controller, url) { print('CARREGADO'); setState(() { _link = url.toString(); }); }, shouldOverrideUrlLoading: (controller, navigationAction) async { var uri = navigationAction.request.url; if (uri == Uri.parse("<URL_TO_OBSERVER>")) { setState(() { _link = ""; }); Navigator.push( context, MaterialPageRoute( builder: (context) => const RedirectSreen(), ), ); return NavigationActionPolicy.CANCEL; } return NavigationActionPolicy.ALLOW; }, ), ); }

import 'package:permission_handler/permission_handler.dart'; void requestPermission() async { var status = await Permission.camera.status; if (status.isDenied) { if (await Permission.camera.request().isGranted) { print("ok"); } } }