Cómo insertar páginas web en Flutter con el complemento WebView

Introducción

El WebViewcomplemento le permite mostrar una página web dentro de su aplicación Flutter.

En este tutorial, creará una aplicación personalizada Widgetque podrá usar en toda su aplicación para iniciarla WebViewdesde cualquier lugar.

Prerrequisitos

Para completar este tutorial, necesitarás:

• Para descargar e instalar Flutter .
• Para descargar e instalar Android Studio o Visual Studio Code .
• Se recomienda instalar complementos para su editor de código:
  • Fluttery Dartcomplementos instalados para Android Studio.
  • Flutterextensión instalada para Visual Studio Code.

Este tutorial fue verificado con Flutter v1.22.2, Android SDK v30.0.2 y Android Studio v4.1.

Paso 1: Configuración del proyecto

Una vez que haya configurado su entorno para Flutter, puede ejecutar lo siguiente para crear una nueva aplicación:

flutter create flutter_webview_example

Navegue hasta el nuevo directorio del proyecto:

cd flutter_webview_example

El uso flutter createproducirá una aplicación de demostración que mostrará la cantidad de veces que se hace clic en un botón.

Ábrelo pubspec.yamlen tu editor de código y agrega el siguiente complemento:

archivo pubspec.yaml

dependencies:  flutter:    sdk: flutter  webview_flutter: ^1.0.5

Una vez completada esta configuración, puedes crear el widget que activará y mostrará el WebView.

Paso 2: Andamiaje del proyecto

A continuación, deberá actualizar el archivo y crear un archivo main.dartnuevo .home_page.dart

Ábralo main.darten su editor de código e importe home_page.darty cambie el homede MyHomePagea HomePage:

lib/main.dart

import 'package:flutter/material.dart';import 'home_page.dart';void main() {  runApp(MyApp());}class MyApp extends StatelessWidget {  @override  Widget build(BuildContext context) {    return MaterialApp(      title: 'Flutter Demo',      theme: ThemeData(        primarySwatch: Colors.blue,        visualDensity: VisualDensity.adaptivePlatformDensity,      ),      home: HomePage(),    );  }}

Luego, crea un nuevo home_page.dartarchivo y agrega el siguiente código:

lib/página_de_inicio.dart

import 'package:flutter/material.dart';class HomePage extends StatelessWidget {  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text("Home Page"),      ),      body: Center(        child: FlatButton(          child: Text("Open Webpage"),          onPressed: () {},        ),      ),    );  }}

Compila tu código y ejecútalo en un emulador. Este código creará un FlatButtoncon el mensaje "Open Webpage".

Paso 3: uso del WebViewcomplemento

El siguiente paso será crear un StatelessWidgetnombre MyWebViewpara mostrar WebViewlos datos.

Crea un nuevo my_webview.dartarchivo y agrega el siguiente código:

lib/mi_vista_web.dart

import 'package:flutter/material.dart';import 'package:webview_flutter/webview_flutter.dart';class MyWebView extends StatelessWidget {  final String title;  final String selectedUrl;  final CompleterWebViewController _controller = CompleterWebViewController();  MyWebView({    @required this.title,    @required this.selectedUrl,  });  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text(title),      ),      body: WebView(        initialUrl: selectedUrl,        javascriptMode: JavascriptMode.unrestricted,        onWebViewCreated: (WebViewController webViewController) {          _controller.complete(webViewController);        },      ));  }}

En este tutorial, dirigirás al usuario a https://www.digitalocean.com/. Utilizar Navigator.pushcon selectedUrlel valor establecido en "https://www.digitalocean.com/".

Revisar home_page.darty agregar MyWebView:

lib/página_de_inicio.dart

import 'package:flutter/material.dart';import my_webview.dart;class HomePage extends StatelessWidget {  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text("Home Page"),      ),      body: Center(        child: FlatButton(          child: Text("Open Webpage"),          onPressed: () {            Navigator.of(context).push(MaterialPageRoute(              builder: (BuildContext context) = MyWebView(                title: "DigitalOcean",                selectedUrl: "https://www.digitalocean.com",              )            ));          },        ),      ),    );  }}

Compila tu código y ejecútalo en un emulador:

Después de interactuar con el botón Abrir página web , verá el sitio web de DigitalOcean mostrado en su aplicación Flutter.

Conclusión

En este tutorial, utilizó el WebViewpaquete para mostrar una página web en su aplicación Flutter.

Si desea obtener más información sobre Flutter, consulte nuestra página de temas de Flutter para ver ejercicios y proyectos de programación.