如何在Flutter中添加Webview？

Question

我知道可以将WebView添加为整页但无法找到任何示例代码.我假设你可以使用PageView作为它的基础,但不知道如何调用本机android WebView并将其添加到PageView.

谁能指出我正确的方向？

Answer 1

您可以使用https://pub.dartlang.org/packages/webview_flutter

例

import 'package:webview_flutter/webview_flutter.dart';

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

Answer 2

Flutter没有嵌入式WebView的内置支持.按照问题730进行更新.

您仍然可以在应用中显示网页内容,但您必须使用插件系统离开Flutter-land.

如果您只想打开浏览器,可以使用url_launcher Flutter插件.

如果你想做更好的事情(也许你不想要一个可见的地址栏),你可以实现一个自定义的UIViewController(iOS示例)和Activity(Android示例),并使用插件 API启动这些.

Answer 3

您可以使用下面的 dart 插件来显示 Webview。此外，您可以从这个 url 中找到 dart 插件：https ://pub.dartlang.org/packages/flutter_webview_plugin

new MaterialApp(
      routes: {
        "/": (_) => new WebviewScaffold(
          url: "https://www.google.com",
          appBar: new AppBar(
            title: new Text("Widget webview"),
          ),
        ),
      },
    );

Answer 4

webview plugin效果很好，但是它将在应用程序的每一位的顶部创建，因此您必须添加额外的逻辑来显示和隐藏插件。您可以全屏显示或显示为大小的矩形。

https://pub.dartlang.org/packages/flutter_webview_plugin