Crear un WebView (visor web) en Flutter

Tiempo de lectura: 2 minutos

Hoy vamos a aprender a crear un Widget tipo WebView que nos permita visualizar URLs en forma de visor web con Flutter.

Primero vamos a instalar el paquete webview_flutter:

flutter pub add webview_flutter

Y ahora vamos a crear un widget que llamaremos WebViewCustomWidget.dart

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

class WebViewCustomWidget extends StatefulWidget {
  final String url;
  final String titulo;

  WebViewCustomWidget({required this.url, required this.titulo});

  @override
  _WebViewCustomWidgetState createState() => _WebViewCustomWidgetState();
}

class _WebViewCustomWidgetState extends State<WebViewCustomWidget> {
  late final WebViewController _controller;

  @override
  void initState() {
    super.initState();
    _controller = WebViewController()..loadRequest(Uri.parse(widget.url));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.titulo),
      ),
      body: WebViewWidget(controller: _controller),
    );
  }
}

Configuración para Android

Asegúrate de que tu proyecto esté configurado para soportar WebView en Android:

• Permisos de Internet: Asegúrate de que tienes el permiso de internet habilitado en tu archivo AndroidManifest.xml, ubicado en android/app/src/main/AndroidManifest.xml:

  <uses-permission android:name="android.permission.INTERNET"/>

• Soporte para Android 9.0 (API nivel 28) y superiores: Asegúrate de que estás utilizando un minSdkVersion de al menos 20 o superior. Esto ya está configurado en la mayoría de los proyectos nuevos de Flutter, pero puedes verificarlo en el archivo android/app/build.gradle:

  defaultConfig {
      minSdkVersion 20
      ...
  }

Configuración para iOS

Si estás desarrollando para iOS, sigue estos pasos adicionales:

• Habilitar soporte para WebView en iOS: Asegúrate de que tu proyecto esté configurado correctamente para iOS:

1. Abre tu proyecto en Xcode.
2. En la sección de Signing & Capabilities, selecciona la opción App Sandbox.
3. Marca las casillas Outgoing Connections (Client) para permitir que la aplicación se comunique a través de Internet.

• Agregar permisos al archivo Info.plist: Si necesitas cargar URLs no seguras, agrega lo siguiente en el archivo ios/Runner/Info.plist:

  <key>NSAppTransportSecurity</key>
  <dict>
      <key>NSAllowsArbitraryLoads</key>
      <true/>
  </dict>

Utilizar el WebViewer

Para usarlo haremos lo siguiente:

Navigator.of(context).push(MaterialPageRoute(
              builder: (context) => WebViewCustomWidget(url: 'https://flutter.dev', titulo:"Web View"),
            ));