英文:
WebView in Flutter with html from a string
问题
I am trying to make an application with flutter and I need to pass html with a string to webviewer but I always get an error, I have tried this code but it tells me that the controller is not initialized, is there an easier way? The plugin's github doesn't make it clear to me. Thank you so much
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:webview_flutter/webview_flutter.dart';
class MyWebViewWidget extends StatefulWidget {
final String html;
MyWebViewWidget({required this.html});
@override
_MyWebViewWidgetState createState() => _MyWebViewWidgetState();
}
class _MyWebViewWidgetState extends State<MyWebViewWidget> {
late WebViewController _controller;
@override
void initState() {
super.initState();
late final PlatformWebViewControllerCreationParams params;
params = const PlatformWebViewControllerCreationParams();
final WebViewController controller =
WebViewController.fromPlatformCreationParams(params);
controller
..setJavaScriptMode(JavaScriptMode.unrestricted)
..setBackgroundColor(const Color(0x00000000))
..setNavigationDelegate(
NavigationDelegate(
onProgress: (int progress) {
debugPrint('WebView is loading (progress : $progress%)');
},
onPageStarted: (String url) {
debugPrint('Page started loading: $url');
},
onPageFinished: (String url) {
debugPrint('Page finished loading: $url');
},
onWebResourceError: (WebResourceError error) {
debugPrint('''
Page resource error:
code: ${error.errorCode}
description: ${error.description}
errorType: ${error.errorType}
isForMainFrame: ${error.isForMainFrame}
''');
},
onNavigationRequest: (NavigationRequest request) {
if (request.url.startsWith('https://www.youtube.com/')) {
debugPrint('blocking navigation to ${request.url}');
return NavigationDecision.prevent;
}
debugPrint('allowing navigation to ${request.url}');
return NavigationDecision.navigate;
},
),
)
..addJavaScriptChannel(
'Toaster',
onMessageReceived: (JavaScriptMessage message) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text(message.message)),
);
},
)
..loadRequest(Uri.parse('https://flutter.dev'));
_controller = controller;
}
@override
Widget build(BuildContext context) {
return WebViewWidget(
html: widget.html,
controller: _controller,
);
}
}
class WebViewWidget extends StatelessWidget {
final String html;
WebViewController controller;
WebViewWidget({required this.html, required this.controller});
@override
Widget build(BuildContext context) {
return WebView(
initialUrl: 'data:text/html;base64,' + base64Encode(const Utf8Encoder().convert('''
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
$html
</body>
</html>
''')),
onWebViewCreated: (WebViewController webViewController) {
controller = webViewController;
},
);
}
}
I have tried with different plugins like flutter_webviewplus, flutter_webview_plugin: ^0.4.0, and nothing works. Besides, I can't use webview as is.
英文:
I am trying to make an application with flutter and I need to pass html with a string to webviewer but I always get an error, I have tried this code but it tells me that the controller is not initialized, is there an easier way? The plugin's github doesn't make it clear to me. Thank you so much
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:webview_flutter/webview_flutter.dart';
class MyWebViewWidget extends StatefulWidget {
final String html;
MyWebViewWidget({required this.html});
@override
_MyWebViewWidgetState createState() => _MyWebViewWidgetState();
}
class _MyWebViewWidgetState extends State<MyWebViewWidget> {
late WebViewController _controller;
@override
void initState() {
super.initState();
// #docregion platform_features
late final PlatformWebViewControllerCreationParams params;
params = const PlatformWebViewControllerCreationParams();
final WebViewController controller =
WebViewController.fromPlatformCreationParams(params);
// #enddocregion platform_features
controller
..setJavaScriptMode(JavaScriptMode.unrestricted)
..setBackgroundColor(const Color(0x00000000))
..setNavigationDelegate(
NavigationDelegate(
onProgress: (int progress) {
debugPrint('WebView is loading (progress : $progress%)');
},
onPageStarted: (String url) {
debugPrint('Page started loading: $url');
},
onPageFinished: (String url) {
debugPrint('Page finished loading: $url');
},
onWebResourceError: (WebResourceError error) {
debugPrint('''
Page resource error:
code: ${error.errorCode}
description: ${error.description}
errorType: ${error.errorType}
isForMainFrame: ${error.isForMainFrame}
''');
},
onNavigationRequest: (NavigationRequest request) {
if (request.url.startsWith('https://www.youtube.com/')) {
debugPrint('blocking navigation to ${request.url}');
return NavigationDecision.prevent;
}
debugPrint('allowing navigation to ${request.url}');
return NavigationDecision.navigate;
},
),
)
..addJavaScriptChannel(
'Toaster',
onMessageReceived: (JavaScriptMessage message) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text(message.message)),
);
},
)
..loadRequest(Uri.parse('https://flutter.dev'));
// #docregion platform_features
// #enddocregion platform_features
_controller = controller;
}
@override
Widget build(BuildContext context) {
return WebViewWidget(
html: widget.html,
controller: _controller,
);
}
}
class WebViewWidget extends StatelessWidget {
final String html;
WebViewController controller;
WebViewWidget({required this.html, required this.controller});
@override
Widget build(BuildContext context) {
return WebViewWidget(
html: '''
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
$html
</body>
</html>
''',
controller: controller,
);
}
}
He probado con diferentes plugins como flutter_webviewplus, flutter_webview_plugin: ^0.4.0 y nada, además webview tal cual no me deja usarlo.
答案1
得分: 1
我也在我的应用程序中的 WebView 中显示一个静态 HTML 字符串。但我是以不同的方式实例化 WebView 控制器的，并使用控制器的 loadHtmlString 函数加载 HTML。
控制器
WebViewController wbController = WebViewController()
..enableZoom(true)
..setJavaScriptMode(JavaScriptMode.unrestricted)
..setBackgroundColor(const Color(0x00000000))
..setNavigationDelegate(
NavigationDelegate(
onNavigationRequest: (NavigationRequest request) {
if (request.url.startsWith("https://")) {
launchUrl(Uri.parse(request.url));
return NavigationDecision.navigate;
} else {
return NavigationDecision.prevent;
}
},
),
)
..loadHtmlString("""
<!DOCTYPE html>
<html>
<head><meta name="viewport" content="width=device-width, initial-scale=0.7"></head>
<body style='margin: 0; padding: 0;'>
${html.content}
</body>
</html>
""");
WebView
WebViewWidget(
controller: wbController,
)
英文:
I'm also showing a static html string in a webview in my application. But I'm instantiating the webview controller in a different way, and loading the html with the loadHtmlString function from controller.
Controller
WebViewController wbController = WebViewController()
..enableZoom(true)
..setJavaScriptMode(JavaScriptMode.unrestricted)
..setBackgroundColor(const Color(0x00000000))
..setNavigationDelegate(
NavigationDelegate(
onNavigationRequest: (NavigationRequest request) {
if (request.url.startsWith("https://")) {
launchUrl(Uri.parse(request.url));
return NavigationDecision.navigate;
} else {
return NavigationDecision.prevent;
}
},
),
)
..loadHtmlString("""
<!DOCTYPE html>
<html>
<head><meta name="viewport" content="width=device-width, initial-scale=0.7"></head>
<body style='"margin: 0; padding: 0;'>
${html.content}
</body>
</html>
""");
Webview
WebViewWidget(
controller: wbController,
)
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论