如何使用Flutter Dart WebView呈现本地HTML文件 [英] How to render a local HTML file with flutter dart webview
本文介绍了如何使用Flutter Dart WebView呈现本地HTML文件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想使用flutter和dart渲染存储在手机视图中的本地HTML文件在Webview中。
I want to render a local HTML file stored in my phone memory in webview using flutter and dart.
推荐答案
我是使用Flutter团队的 webview_flutter 插件。
I am using the webview_flutter plugin from the Flutter Team.
-
将依赖项添加到 pubspec.yaml :
dependencies:
webview_flutter: ^0.3.20+2
在 assets
文件夹中放入一个html文件(请参见此)。我称它为 help.html
。
Put an html file in the assets
folder (see this). I'll call it help.html
.
获取代码中的html字符串并将其添加到
Get the html string in code and add it to the webview.
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:webview_flutter/webview_flutter.dart';
class HelpScreen extends StatefulWidget {
@override
HelpScreenState createState() {
return HelpScreenState();
}
}
class HelpScreenState extends State<HelpScreen> {
WebViewController _controller;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Help')),
body: WebView(
initialUrl: 'about:blank',
onWebViewCreated: (WebViewController webViewController) {
_controller = webViewController;
_loadHtmlFromAssets();
},
),
);
}
_loadHtmlFromAssets() async {
String fileText = await rootBundle.loadString('assets/help.html');
_controller.loadUrl( Uri.dataFromString(
fileText,
mimeType: 'text/html',
encoding: Encoding.getByName('utf-8')
).toString());
}
}
注意:
- 由于非ASCII字符崩溃,我需要将编码设置为UTF-8。
- 在iOS中,您需要将键
io.flutter.embedded_views_preview
添加为true
Info.plist 文件。检查文档以获得有关此要求的任何更新。 - I needed to set the encoding to UTF-8 because I was getting a crash for non-ASCII characters.
- In iOS you need to add the key
io.flutter.embedded_views_preview
astrue
in the Info.plist file. Check the docs for any update on this requirement. - The Power of WebViews in Flutter
Notes:
这篇关于如何使用Flutter Dart WebView呈现本地HTML文件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文