Renderize páginas da web usando o plug-in Flutter WebView

O Google criou o Flutter para simplificar a maneira como criamos aplicativos, possibilitando que nossos aplicativos sejam executados em diferentes plataformas sem a necessidade de portar código ou reescrever nossos aplicativos já existentes.

Fazer isso não é tarefa fácil, porque cada sistema operacional nativo tem algo único e são numerosos. O Google não pode oferecer suporte a todos eles. Então, o Google tornou o Flutter configurável, de forma que plugins podem ser desenvolvidos por outros desenvolvedores.

Agora, um dos widgets comuns que temos é o widget WebView. Este widget WebView nos permite carregar páginas da web.

Como podemos usar esse mesmo widget no Flutter quando precisamos dele? flutter.dev resolveu o problema para nós. Eles desenvolveram um plug-in Flutter para isso: é webview_flutter.

O que é Flutter WebView?

webview_flutter é um plug-in Flutter que fornece um widget WebView no Android e iOS. Este plug-in é usado para exibir páginas da web em dispositivos Android e iOS.

Neste artigo, aprenderemos como usar o webview_flutter em um projeto Flutter.

Aprenderemos como use o plug-in webview_flutter para carregar páginas da web de seu URL ou de uma fonte local.

Requisitos

Estaremos construindo um projeto Flutter, portanto, precisaremos de algumas ferramentas já instaladas em nossa máquina.

Flutter

Este é um SDK do Flutter usado para executar e compilar projetos do Flutter. Vá para os documentos do Flutter para selecionar o SDK do Flutter com base em seu sistema operacional:

Windows macOS Linux Chrome OS

Os links contêm instruções sobre como instalar o Flutter SDK em sua máquina. Após a instalação, certifique-se de que a vibração esteja em seu caminho global. Execute o comando flutter–help para testar se o Flutter SDK está instalado e acessado globalmente em sua máquina.

VS Code

VS Code é um poderoso editor de código moderno oferecido por Microsoft. Ele tem uma extensão que pode ajudá-lo a usar o Flutter do seu código VS com facilidade. Instale a extensão do Flutter em seu código VS.

Android Studio

Se deseja executar e testar seus aplicativos no Android, você precisa ter o Android Studio instalado em sua máquina . Em seguida, precisamos instalar os plug-ins Flutter e Dart:

plug-in Flutter pluginDart

Certifique-se de que tudo esteja instalado e funcionando. Na próxima seção, configuraremos um projeto Flutter.

Configurando seu projeto Flutter

Agora, criaremos um projeto Flutter. Usaremos a ferramenta CLI de flutter para fazer isso.
O nome do nosso projeto Flutter será webviewprj. Execute o comando abaixo:

flutter create webviewprj

Flutter criará um projeto na pasta webviewprj e então instalará as dependências.
Abra este projeto no VS Code. Se você não usa o VS Code, você pode fazer tudo a partir do terminal, mas você deve abrir o projeto em seu editor de código preferido:

cd webviewprj

Se você estiver usando o VS Code, não haverá necessidade para fazer o acima. Basta ir para Exibir no menu superior e clicar em Terminal para abrir o terminal integrado do VS Code.

Adicionando a dependência webview_flutter

A seguir, adicionaremos a dependência webview_flutter ao nosso projeto.

Abra o arquivo pubspec.yaml na raiz do seu projeto e adicione as linhas abaixo a ele:

dependencies: flutter: sdk: flutter webview_flutter:

Salvar o arquivo pubspec.yaml causará o VS Código para instalar a dependência. Se você não estiver usando o VS Code, execute o comando abaixo em seu terminal para instalar a dependência webview_flutter:

flutter pub get webview_flutter

flutter pub contém comandos para gerenciar pacotes Flutter.

flutter pub get obtém pacotes em um projeto Flutter. Nesse caso, ele obtém o pacote webview_flutter em nosso projeto Flutter.

Em seguida, definimos a versão mínima do SDK necessária para o plug-in webview_flutter. Abra android/app/build.gradle em seu projeto e adicione o código de configuração abaixo à seção android → defaultConfig:

android {defaultConfig {minSdkVersion 19}}

webview_flutter funciona a partir do Android v19 até a versão mais recente do Android.

Usando webview_flutter

webview_flutter exporta uma classe WebView. Esta classe inicia e cria uma nova visualização da web e renderiza a página da web definida (por meio de sua URL) dentro do widget WebView. O WebView pode ser controlado usando um WebViewController que é passado para o retorno de chamada onWebViewCreated assim que o WebView é criado.
Para renderizar o widget WebView, precisamos importar o pacote webview_flutter:

import’package: webview_flutter/webview_flutter.dardo’;

Em seguida, renderizamos o widget WebView assim:

WebView (initialUrl:’https://medium.com’);

Isso carregará a página https://medium.com e a renderizará no widget WebView. O widget WebView renderizará https://medium.com da mesma forma que um navegador renderiza a página. O parâmetro initialUrl passado para o WebView informa ao WebView a URL da página da Web a ser carregada e renderizada.
Existem outros parâmetros que podemos passar para o WebView. Vamos vê-los abaixo:

NB, os parâmetros abaixo e suas descrições foram selecionados de Documentos da biblioteca de classes do WebView .

onWebViewCreated: esta é uma função que é chamada assim que a visualização da web é criada initialUrl: esta é uma string que contém a URL da página da web a ser carregada e renderizada no WebView javascriptMode: define se o JavaScript está habilitado no WebView javascriptChannels: O conjunto de JavascriptChannels disponível para o código JavaScript em execução no WebView navigationDelegate: uma função delegada que decide como lidar com as ações de navegação emPageStarted: invocado quando uma página começa a carregar emPageFinished: invocado quando um a página terminou de carregar onProgress: Chamado quando uma página está carregando debuggingEnabled: Controla se a depuração do WebView está habilitada. Por padrão, é definido como false gestNavigationEnabled: Um valor booleano que indica se os gestos de deslizamento horizontal irão acionar as navegações para trás ou para frente na lista. Por padrão, é definido como false allowInlineMediaPlayback: Controla se a reprodução em linha de vídeos HTML5 é permitida no iOS. Este campo é ignorado no Android porque o Android permite isso por padrão. Seu valor padrão é false

NB, os parâmetros javascriptMode e autoMediaPlaybackPolicy não devem ser nulos.

Criando páginas de widget

Agora, criaremos duas páginas de widget em nosso aplicativo: HomePage e WebViewPage. A página inicial terá dois botões. Cada botão, quando clicado, abrirá a página WebViewPage. Esta página WebViewPage renderizará um WebView, passando a URL da página da web para o widget WebView.

Vamos criá-los. O Flutter já gerou algum código para nós. Eliminaremos outros widgets , exceto o widget MyApp.
Abra o arquivo lib/main.dart e edite-o com o código abaixo:

import’package: flutter/material.dart’; import’package: webview_flutter/webview_flutter.dart’; import’dart: io’; void main () {runApp (MyApp ()); } class MyApp extends StatelessWidget {//Este widget é a raiz do seu aplicativo. @override Widget build (BuildContext context) {return MaterialApp (title:’Flutter Demo’, theme: ThemeData (primarySwatch: Colors.blue,), home: HomePage ()); }}

Veja que renderizamos a HomePage no widget MyApp. Isso faz a HomePage renderizar quando o aplicativo é aberto.

Vamos codificar o widget HomePage:

class HomePage extends StatelessWidget {void _handleURLButtonPress (BuildContext context, String url, String title) {Navigator.push ( contexto, MaterialPageRoute (construtor: (contexto)=> WebViewPage (url, título))); } @override Widget build (BuildContext context) {return Scaffold (appBar: AppBar (title: Text (“WebView Flutter Example”),), body: Center (child: Column (children: [MaterialButton (color: Colors.blue, child: Text (“Open pub.dev”, style: TextStyle (color: Colors.white70, fontWeight: FontWeight.bold),), onPressed: () {_handleURLButtonPress (context,”https://pub.dev”,”pub.dev”);},), MaterialButton (color: Colors.blue, child: Text (“Open Medium.com”, style: TextStyle (color: Colors.white70, fontWeight: FontWeight.bold),), onPressed: ( ) {_handleURLButtonPress (contexto,”https://medium.com”,”Medium.com”);},),],)),); }}

Veja que esta HomePage renderiza dois botões MaterialButton. Cada botão é definido para chamar a função _handleURLButtonPress quando clicado.

O primeiro botão, Abrir pub.dev, chama _handleURLButtonPress, passando pelo contexto,”https://pub.dev”e”pub.dev”. O”https://pub.dev”é a URL da página da web carregada e renderizada pelo WebView.”pub.dev”será o título da AppBar da WebViewPage.

O segundo botão, Open Medium.com, chamará a função _handleURLButtonPress com o contexto params, https://medium.com.com (o URL da página da web que o widget WebView carregará e renderizará) e Medium.com (título da página WebViewPage).

A função _handleURLButtonPress abre a página do widget WebViewPage. Ele passará a URL e o título da página para a WebViewPage.

Vamos codificar o widget WebViewPage:

class WebViewPage extends StatefulWidget {final String url; título final da string; WebViewPage (this.url, this.title); @override WebViewPageState createState ()=> WebViewPageState (this.url, this.title); } a classe WebViewPageState extends State {URL final da String; título final da string; WebViewPageState (this.url, this.title); @override void initState () {super.initState ();//Habilita a composição híbrida. if (Platform.isAndroid) WebView.platform=SurfaceAndroidWebView (); } @override Widget build (BuildContext context) {return Scaffold (appBar: AppBar (title: Text (this.title),), body: Column (children: [Expanded (child: WebView (initialUrl: this.url, javascriptMode: JavascriptMode. irrestrito))])); }}

O WebViewPage é um widget com estado e WebPageState é a lógica e o estado interno do WebViewPage.

O construtor WebViewPage usa o url e o título. Ele o passa para WebViewPageState no método createState.

Quando o WebViewPageState renderiza WebView, ele passa initialUrl para WebView com this.url como seu valor.

O modo JavaScript javascriptMode é definido para JavascriptMode.unrestricted. Este modo JavaScript permite que as páginas da web executem JavaScript.

Executando o aplicativo

Agora, concluímos a codificação. Vamos executar o aplicativo. Para fazer isso, execute o comando abaixo no terminal:

flutter run

Se você estiver usando o VS Code, clique com o botão direito em lib/main.dart e clique em Run Without Debugging ou Start Debugging.

NB, certifique-se de ter seu emulador rodando.

Isso irá compilar o aplicativo ao executá-lo no emulador do seu telefone.

Página inicial

Clique em Abrir pub.dev

Clique em Abra Medium.com