Flutter中如何載入並預覽本地的html檔案的方法
阿新 • • 發佈:2020-01-07
直接進入主題,大概步驟如下
在 assets 建立需要訪問 html 檔案,如下
這裡建立一個files資料夾,專門來放這些靜態 html 檔案.
在 pubspec.yaml 中配置訪問位置
assets: - assets/images/ - assets/files/
在 pubspec.yaml 新增 webview_flutter 外掛依賴
webview_flutter: ^0.3.15+1 // 具體版本請檢視官網
進入實際的程式碼操作
import 'dart:convert'; import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; import 'package:webview_flutter/webview_flutter.dart'; class AgreementPage extends StatefulWidget { @override _AgreementPageState createState() => _AgreementPageState(); } class _AgreementPageState extends State<AgreementPage> { WebViewController _webViewController; String filePath = 'assets/files/agreement.html'; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('享你來服務條款')),body: WebView( initialUrl: '',javascriptMode: JavascriptMode.unrestricted,onWebViewCreated: (WebViewController webViewController) { _webViewController = webViewController; _loadHtmlFromAssets(); },) ); } _loadHtmlFromAssets() async { String fileHtmlContents = await rootBundle.loadString(filePath); _webViewController.loadUrl(Uri.dataFromString(fileHtmlContents,mimeType: 'text/html',encoding: Encoding.getByName('utf-8')) .toString()); } }
最終預覽的效果如下
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。