> For the complete documentation index, see [llms.txt](https://devcenter.unico.io/unico-idpay/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://devcenter.unico.io/unico-idpay/en/integration/controlling-the-experience/mobile/flutter.md).

# Flutter

For the use case using Flutter, it is recommended to use **inappwebview**.

After creating the transaction and obtaining the transaction link, the following implementation is recommended:

* In your common flow (which includes IDPay), you will open the **inappwebview** with the link generated via the API;
* You can customize this opening as needed for your application;
* You will monitor if the URL changes (to the **redirectUrl**) and then close the **inappwebview**;

To open an **inappwebview** and control URL changes, you can do it as follows:

```dart
  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;
        },
      ),
    );
  }
```

To obtain camera permission, you can do it as follows:

```dart
  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");
      }
    }
  }
```

To obtain camera permission, you can do it as follows:

<figure><img src="/files/CqyqA90qKrGqL9MFeYPJ" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
The following permissions are required for proper functioning, such as:

* Camera
* Geolocation
  {% endhint %}

For more information, we recommend reading the following articles and documentation:

* To access the official documentation, click [<mark style="color:blue;">**here**</mark>](https://pub.dev/packages/flutter_inappwebview).


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://devcenter.unico.io/unico-idpay/en/integration/controlling-the-experience/mobile/flutter.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.