Flutter 使用webview_flatter从本地文件呈现HTML
我正在尝试使用加载HTML代码 以下是位于资产文件夹中的我的Flutter 使用webview_flatter从本地文件呈现HTML,flutter,dart,mapbox,flutter-layout,mapbox-gl-js,Flutter,Dart,Mapbox,Flutter Layout,Mapbox Gl Js,我正在尝试使用加载HTML代码 以下是位于资产文件夹中的我的test.html文件的代码： <!DOCTYPE html> <html> <head> <meta charset='utf-8' /> <title>Add an image</title> <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-sc
test.html<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Add an image</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1Ijoid2F3YW5vcG91bG9zIiwiYSI6ImNqdGc3aTh4NTBpZzYzeXA2bG44NzAzYXcifQ.ltDQ5A9BesT6oRZmUauOEQ';
var map = new mapboxgl.Map({
container: 'map',
maxZoom: 22,
zoom: 18,
center: [-9.412696, 48.441571],
style: 'mapbox://styles/mapbox/streets-v9'
});
</script>
</body>
</html>
添加图像
正文{margin:0；padding:0；}
#映射{位置：绝对；顶部：0；底部：0；宽度：100%；}
mapboxgl.accessToken='pk.eyJ1Ijoid2F3YW5vcG91bG9zIiwiYSI6ImNqdGc3aTh4NTBpZzYzeXA2bG44NzAzYXcifQ.ltdq5a9best6orzmuaeq'；
var map=new mapboxgl.map({
容器：“映射”，
maxZoom:22，
缩放：18，
中心：[-9.412696，48.441571]，
风格：'mapbox://styles/mapbox/streets-v9'
});
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:webview_flutter/webview_flutter.dart';
class SignInPage extends StatefulWidget {
@override
SignInPageState createState() {
return SignInPageState();
}
}
class SignInPageState extends State<SignInPage> {
WebViewController _controller;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Help')),
body: WebView(
initialUrl: '',
onWebViewCreated: (WebViewController webViewController) {
_controller = webViewController;
_loadHtmlFromAssets();
},
),
);
}
_loadHtmlFromAssets() async {
String fileText = await rootBundle.loadString('assets/test.html');
_controller.loadUrl( Uri.dataFromString(
fileText,
mimeType: 'text/html',
encoding: Encoding.getByName('utf-8')
).toString());
}
}
导入'dart:convert'；
进口“包装：颤振/材料.省道”；
导入“包：flifter/services.dart”；
导入“package:webview_flatter/webview_flatter.dart”；
类签名页扩展StatefulWidget{
@凌驾
SignInPackageState createState（）{
返回符号妊娠期（）；
}
}
类signInPartate扩展状态{
WebViewController\u控制器；
@凌驾
小部件构建（构建上下文）{
返回脚手架(
appBar:appBar（标题：Text（'Help'）），
正文：WebView(
初始URL:“”，
onWebViewCreated:（WebViewController WebViewController）{
_控制器=webViewController；
_加载HtmlFromAssets（）；
},
),
);
}
_loadHtmlFromAssets（）异步{
String fileText=await rootBundle.loadString（'assets/test.html'）；
_controller.loadUrl（Uri.dataFromString(
文件文本，
mimeType:'text/html'，
编码：encoding.getByName（'utf-8'）
).toString（））；
}
}
我总是得到一个白色的页面，没有加载任何内容。当我用一行代码（
HELLOtest.html