Flutter中有WebView吗？ [复制]

Question

我正在寻找 WebView。如何在颤振中显示我的 Html 内容？ 实际上我们的书籍格式是 Html，所以我需要 WebView 或在 Flutter 编程中解析 Html 的方法。

Answer 1

一个提供webview 小部件的 Flutter 插件现在可用于开发者预览版

用法

return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter WebView example'),
      ),
      body: const WebView(
        initialUrl: 'https://flutter.io',
        javaScriptMode: JavaScriptMode.unrestricted,
      ),
    );

full code

Answer 2

你可以使用

> flutter_webview_plugin

这是一个允许Flutter 与原生WebView 通信的插件。

注意： webview 没有集成在 widget 树中，它是 Flutter 视图之上的原生视图。你将无法使用小吃吧、对话框...

Answer 3

你可以使用我的插件flutter_inappwebview，这是一个Flutter插件，可以让你添加inline webviews与widget树集成或打开一个应用内浏览器窗口！与其他 webview 插件相比，它提供了很多事件、方法和选项！

主要类：

• InAppWebView：Flutter Widget 用于添加 内联原生 WebView 集成到 Flutter 小部件树中。要在 iOS 上使用 InAppWebView 类，您需要通过向应用程序的 Info.plist 文件添加一个布尔属性（键为 io.flutter.embedded_views_preview 和值 YES）来选择嵌入视图预览。
• ContextMenu：这个类代表 WebView 上下文菜单。
• HeadlessInAppWebView：代表无头模式下的 WebView 的类。它可用于在后台运行 WebView，而无需将 InAppWebView 附加到小部件树。
• InAppBrowser：使用原生 WebView 的应用内浏览器。
• ChromeSafariBrowser：应用内浏览器在 Android 上使用 Chrome Custom Tabs / 在 iOS 上使用 SFSafariViewController。
• InAppLocalhostServer：这个类允许你在http://localhost:[port]/上创建一个简单的服务器。默认port 值为8080。
• CookieManager：这个类实现了一个单例对象（共享实例），它管理 WebView 实例使用的 cookie。
• HttpAuthCredentialDatabase：该类实现了一个管理共享 HTTP 身份验证凭据缓存的单例对象（共享实例）。
• WebStorageManager：这个类实现了一个单例对象（共享实例），它管理 WebView 实例使用的网络存储。

快速示例：

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';

Future main() async {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(new MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {

  InAppWebViewController webView;
  String url = "";
  double progress = 0;

  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('InAppWebView Example'),
        ),
        body: Container(
          child: Column(children: <Widget>[
            Container(
              padding: EdgeInsets.all(20.0),
              child: Text(
                  "CURRENT URL\n${(url.length > 50) ? url.substring(0, 50) + "..." : url}"),
            ),
            Container(
                padding: EdgeInsets.all(10.0),
                child: progress < 1.0
                    ? LinearProgressIndicator(value: progress)
                    : Container()),
            Expanded(
              child: Container(
                margin: const EdgeInsets.all(10.0),
                decoration:
                    BoxDecoration(border: Border.all(color: Colors.blueAccent)),
                child: InAppWebView(
                  initialUrl: "https://flutter.dev/",
                  initialHeaders: {},
                  initialOptions: InAppWebViewGroupOptions(
                    crossPlatform: InAppWebViewOptions(
                        debuggingEnabled: true,
                    )
                  ),
                  onWebViewCreated: (InAppWebViewController controller) {
                    webView = controller;
                  },
                  onLoadStart: (InAppWebViewController controller, String url) {
                    setState(() {
                      this.url = url;
                    });
                  },
                  onLoadStop: (InAppWebViewController controller, String url) async {
                    setState(() {
                      this.url = url;
                    });
                  },
                  onProgressChanged: (InAppWebViewController controller, int progress) {
                    setState(() {
                      this.progress = progress / 100;
                    });
                  },
                ),
              ),
            ),
            ButtonBar(
              alignment: MainAxisAlignment.center,
              children: <Widget>[
                RaisedButton(
                  child: Icon(Icons.arrow_back),
                  onPressed: () {
                    if (webView != null) {
                      webView.goBack();
                    }
                  },
                ),
                RaisedButton(
                  child: Icon(Icons.arrow_forward),
                  onPressed: () {
                    if (webView != null) {
                      webView.goForward();
                    }
                  },
                ),
                RaisedButton(
                  child: Icon(Icons.refresh),
                  onPressed: () {
                    if (webView != null) {
                      webView.reload();
                    }
                  },
                ),
              ],
            ),
        ])),
      ),
    );
  }
}

截图：

Answer 4

如果你只是想显示一个静态的 html 内容，你可以试试这个包：flutter_html_view。 Flutter 只支持全屏 webview，暂不支持内联 webview。