webview - 如何使用flutter dart webview渲染本地HTML文件

Question

我想使用 Flutter 和 dart 在 webview 中渲染存储在我手机内存中的本地 HTML 文件。

Answer 1

我正在使用 webview_flutter Flutter 团队的插件。

步骤

1. 将依赖添加到pubspec.yaml:

   dependencies:
     webview_flutter: ^0.3.20+2
   

2. 在 assets 文件夹中放置一个 html 文件(参见 this)。我将其命名为 help.html。

3. 获取代码中的html字符串并添加到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());
     }
   }
   

注意事项:

• 我需要将编码设置为 UTF-8，因为我遇到了非 ASCII 字符的崩溃。
• 在 iOS 中，您需要在 Info.plist 文件中将键 io.flutter.embedded_views_preview 添加为 true。查看docs有关此要求的任何更新。

另见

• The Power of WebViews in Flutter