Ya no tienes que buscar más por todo internet ya que has llegado al sitio perfecto, contamos con la solución que buscas y sin liarte.
Solución:
Esto podría hacer lo que quieras
Container(
child: WebView(
initialUrl: Uri.dataFromString('', mimeType: 'text/html').toString(),
javascriptMode: JavascriptMode.unrestricted,
)),
Esto pasa una URL de datos que contiene una página HTML con un iframe.
También puede usar mi complemento flutter_inappwebview, que es un complemento de Flutter que le permite agregar WebViews en línea o abrir una ventana del navegador en la aplicación y tiene muchos eventos, métodos y opciones para controlar WebViews.
Para cargar un iFrame en un WebView, puede cargar directamente una fuente HTML usando el initialData
parámetro de la InAppWebView
widget.
Ejemplo completo:
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
Future main() async
runApp(new MyApp());
class MyApp extends StatefulWidget
@override
_MyAppState createState() => new _MyAppState();
class _MyAppState extends State
@override
void initState()
super.initState();
@override
void dispose()
super.dispose();
@override
Widget build(BuildContext context)
return MaterialApp(
home: InAppWebViewPage()
);
class InAppWebViewPage extends StatefulWidget
@override
_InAppWebViewPageState createState() => new _InAppWebViewPageState();
class _InAppWebViewPageState extends State
InAppWebViewController webView;
String iframeUrl = "https://www.youtube.com/embed/sPW7nDBqt8w";
@override
Widget build(BuildContext context)
return Scaffold(
appBar: AppBar(
title: Text("InAppWebView")
),
body: Container(
child: Column(children: [
Expanded(
child: Container(
child: InAppWebView(
initialData: InAppWebViewInitialData(
data: """
Flutter InAppWebView
"""
),
initialHeaders: ,
initialOptions: InAppWebViewWidgetOptions(
inAppWebViewOptions: InAppWebViewOptions(
debuggingEnabled: true,
),
),
onWebViewCreated: (InAppWebViewController controller)
webView = controller;
,
onLoadStart: (InAppWebViewController controller, String url)
,
onLoadStop: (InAppWebViewController controller, String url)
,
),
),
),
]))
);
o cargar un archivo HTML desde la carpeta de activos (ver más aquí) y usar el initialFile
parámetro:
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
Future main() async
runApp(new MyApp());
class MyApp extends StatefulWidget
@override
_MyAppState createState() => new _MyAppState();
class _MyAppState extends State
@override
void initState()
super.initState();
@override
void dispose()
super.dispose();
@override
Widget build(BuildContext context)
return MaterialApp(
home: InAppWebViewPage()
);
class InAppWebViewPage extends StatefulWidget
@override
_InAppWebViewPageState createState() => new _InAppWebViewPageState();
class _InAppWebViewPageState extends State
InAppWebViewController webView;
@override
Widget build(BuildContext context)
return Scaffold(
appBar: AppBar(
title: Text("InAppWebView")
),
body: Container(
child: Column(children: [
Expanded(
child: Container(
child: InAppWebView(
initialFile: "assets/index.html",
initialHeaders: ,
initialOptions: InAppWebViewWidgetOptions(
inAppWebViewOptions: InAppWebViewOptions(
debuggingEnabled: true,
),
),
onWebViewCreated: (InAppWebViewController controller)
webView = controller;
,
onLoadStart: (InAppWebViewController controller, String url)
,
onLoadStop: (InAppWebViewController controller, String url)
,
),
),
),
]))
);
donde el index.html
archivo contiene el etiqueta.
Basado en @ Günter anterior, tuve pequeños ajustes porque no pude hacer que funcionara en ios. Esto se basa en la página oficial pub.dev de webview_flutter.
String html = """
_controller =
Completer();
final String contentBase64 =
base64Encode(const Utf8Encoder().convert(html));
return WebView(
initialUrl: 'data:text/html;base64,$contentBase64',
javascriptMode: JavascriptMode.unrestricted,
onWebViewCreated: (WebViewController webViewController)
_controller.complete(webViewController);
,
onPageStarted: (String url)
print('Page started loading: $url');
,
onPageFinished: (String url)
print('Page finished loading: $url');
,
gestureNavigationEnabled: true,
);
""";
final Completer
Luego usé la respuesta de @Lorenzo Pichilli para hacerlo en Android. Trabajé un poco más rápido para mí. Espero que esto ayude a alguien. Me tomó un día entero.
PD
Esto me ha permitido reproducir videos de youtube y vimeo en Android e iOS. Funciona bien hasta ahora
EDITAR:
Para agregar un cargador antes de que la vista web termine de cargarse, consulte esta pregunta sobre cómo agregar un indicador circular de progreso