🕸️WebView no Flutter

Documentação Avançada de Uso de WebView com Flutter e Comunicação entre Canais JavaScript

1. Introdução

Esta documentação explica como criar uma aplicação em Flutter com uma WebView, focando principalmente na comunicação bidirecional entre a aplicação Flutter e a página web carregada. Especificamente, abordaremos os canais JavaScript para a comunicação entre as duas plataformas.

2. Configurações Iniciais

Dependências

Adicione as dependências necessárias ao seu pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^latest_version

Importações

Faça as importações apropriadas:

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

3. Implementação da WebView

A WebView pode ser implementada usando o widget WebView. No exemplo, uma WebView é colocada em um widget Stack para permitir animações de carregamento.

WebViewWidget(
  controller: _controller,
),

4. Comunicação Avançada com Canais JavaScript

Canais JavaScript para Comunicação Unidirecional (Web para Flutter)

Canais JavaScript são interfaces que permitem enviar mensagens do código JavaScript da página web para o código Dart na aplicação Flutter. No exemplo, três canais são definidos para diferentes ações: LOGOUT, LOGIN, e verifyIsWebview.

_controller
  ..addJavaScriptChannel(
    'LOGOUT',
    onMessageReceived: (message) {
      // O código Dart para deslogar o usuário é chamado aqui
      _loginStore.logout(context);
    },
  )
  // ...

Nesse caso, o código JavaScript no lado da web pode emitir um evento para o canal 'LOGOUT', e o método _loginStore.logout(context) será chamado no código Dart.

Comunicação Bidirecional com runJavaScriptReturningResult

Para enviar dados do Flutter para a WebView, você pode usar o método runJavaScriptReturningResult. No código Dart, após ouvir o canal 'verifyIsWebview' sendo acionado pela página web, o Flutter pode enviar dados de volta para a WebView usando este método.

No exemplo, um objeto UserWebView é usado para passar dados de um usuário autenticado para a página web. O trecho de código abaixo é executado quando o evento 'verifyIsWebview' é recebido:

_controller.addJavaScriptChannel(
  'verifyIsWebview',
  onMessageReceived: (message) async {
    if (isAuthenticated) {
      _controller.runJavaScriptReturningResult(
        '''onWebviewLogin = new CustomEvent('onWebviewLogin', {
            detail: '{
              "displayName": "${userWebView.displayName}",
              "email": "${userWebView.email}",
              "photoURL": "${userWebView.photoUrl}",
              "accessToken": "${userWebView.acessToken}",
              "uid": "${userWebView.uid}"
            }'
          })
          window.dispatchEvent(onWebviewLogin);'''
      );
    }
    // ... outros códigos
  },
)

Neste caso, se o usuário estiver autenticado (isAuthenticated == true), o evento 'onWebviewLogin' será disparado na página web, e o JavaScript na página web pode ouvir este evento para obter as informações do usuário.

Essa é uma forma de comunicação bidirecional: primeiro, a página web emite um evento 'verifyIsWebview', o Flutter ouve e responde enviando dados do usuário através de um novo evento JavaScript, 'onWebviewLogin'.

5. Eventos de Navegação e Carregamento

Monitoramento do Progresso de Carregamento

O método onProgress do NavigationDelegate é chamado sempre que há uma alteração no progresso de carregamento da página web. No exemplo, o estado showLoading é atualizado para controlar a visibilidade da animação de carregamento.

_controller.setNavigationDelegate(
  NavigationDelegate(
    onProgress: (int progress) {
      // ...
    },
    // ...
  ),
)

6. Conclusão

A integração da WebView com o Flutter é um recurso poderoso, especialmente quando combinado com canais JavaScript para comunicação. Este recurso permite criar experiências de usuário ricas e dinâmicas que tiram proveito tanto do ambiente nativo quanto das capacidades da web. Espera-se que esta documentação tenha fornecido insights detalhados sobre como estabelecer essa comunicação bidirecional eficazmente.