如何在 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 的內置支持。 請關注issue 730以獲取更新。

您仍然可以在您的應用程序中顯示網絡內容，但您必須使用插件系統離開 Flutter 領域。

如果只想打開瀏覽器，可以使用url_launcher Flutter 插件。

如果您想做一些更高級的事情（也許您不想要一個可見的地址欄），您可以實現自定義 UIViewController（ iOS 示例）和 Activity（ Android 示例）並使用插件API 啟動它們。

Answer 3

您可以使用下面的 dart 插件來顯示 Webview。此外，您可以從這個網址找到 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

Answer 5

您可以使用 Flutter webview 插件。 這是插件的 url https://pub.dartlang.org/packages/webview_flutter

帶有 CircularProgressIndicator 的 Webview 下面是一些截圖。 前后_

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

class WebView extends StatefulWidget {
  @override
  _WebViewState createState() => _WebViewState();
}

class _WebViewState extends State<WebView> {

  final Completer<WebViewController> _controller =
      Completer<WebViewController>();

  num _stackToView = 1;

  void _handleLoad(String value) {
    setState(() {
      _stackToView = 0;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          leading: Builder(builder: (BuildContext context) {
            return IconButton(
              icon: Icon(Icons.volume_up, color: Colors.black,),
              onPressed: () {
                Navigator.pop(context);
              },
            );
          }),
          backgroundColor: Colors.white10,
          elevation: 0,
        ),
        body: IndexedStack(
          index: _stackToView,
          children: [
            Column(
              children: <Widget>[
                Expanded(
                    child: WebView(
                  initialUrl: "https://www.google.co.in/",
                  javascriptMode: JavascriptMode.unrestricted,
                  onPageFinished: _handleLoad,
                  onWebViewCreated: (WebViewController webViewController) {
                    _controller.complete(webViewController);
                  },
                )),
              ],
            ),
            Container(
              child: Center(child: CircularProgressIndicator(),)
            ),
          ],
        ));
  }
}

Answer 6

在 pubspec.yml 文件中添加依賴：

webview_flutter: ^0.1.1

對於 ios 應用程序，下面的鍵將 .plist 文件粘貼到 ios 項目文件夾中

<key>io.flutter.embedded_views_preview</key><string>yes</string>
<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
    <key>NSAllowsArbitraryLoadsInWebContent</key>
    <true/>
</dict>

這是類代碼：

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

class WebViewClass extends StatefulWidget {
  @override
  _WebViewClassState createState() => _WebViewClassState();
}

class _WebViewClassState extends State<WebViewClass> {
  Completer<WebViewController> _controller = Completer<WebViewController>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('WebView'),
      ),
      body: WebView(
        initialUrl: 'https://google.com',
        onWebViewCreated: (WebViewController webViewController) {
          _controller.complete(webViewController);
        },
      ),
    );
  }
}

Answer 7

您可以使用flutter_inappwebview插件，這是一個 Flutter 插件，允許您添加與 widget 樹集成的內聯 webview或打開應用內瀏覽器窗口，與其他 webview 插件相比，它提供了大量的事件、方法和選項！

主要課程：

• InAppWebView ：Flutter Widget，用於添加集成到 flutter widget 樹中的內聯原生 WebView 。 要在 iOS 上使用InAppWebView類，您需要通過向應用程序的Info.plist文件添加一個布爾屬性來選擇加入嵌入式視圖預覽，鍵io.flutter.embedded_views_preview ，值為YES 。
• ContextMenu ：此類表示 WebView 上下文菜單。
• HeadlessInAppWebView ：表示無頭模式下的 WebView 的類。 它可用於在后台運行 WebView，而無需將InAppWebView附加到小部件樹。
• InAppBrowser ：使用原生 WebView 的應用內瀏覽器。
• ChromeSafariBrowser ：在 Android 上使用Chrome 自定義選項卡的應用內瀏覽器/在 iOS 上使用SFSafariViewController 。
• InAppLocalhostServer ：此類允許您在http://localhost:[port]/上創建一個簡單的服務器。 默認port值為8080 。
• CookieManager ：此類實現了一個單例對象（共享實例），用於管理 WebView 實例使用的 cookie。
• HttpAuthCredentialDatabase ：此類實現了一個管理共享 HTTP 身份驗證憑據緩存的單例對象（共享實例）。
• WebStorageManager ：此類實現了一個單例對象（共享實例），該對象管理 WebView 實例使用的 Web 存儲。

這是一個將 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 _webViewController;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('InAppWebView Example'),
        ),
        body: Container(
            child: Column(children: <Widget>[
              Expanded(
                child:InAppWebView(
                    initialUrl: "https://flutter.dev/",
                    initialOptions: InAppWebViewGroupOptions(
                        crossPlatform: InAppWebViewOptions(
                          debuggingEnabled: true,
                        )
                    ),
                    onWebViewCreated: (InAppWebViewController controller) {
                      _webViewController = controller;
                    },
                    onLoadStart: (InAppWebViewController controller, String url) {

                    },
                    onLoadStop: (InAppWebViewController controller, String url) {

                    },
                ),
              ),
            ])),
      ),
    );
  }
}

截屏：

Answer 8

因為 'http' 在 Android 9 中被禁止

你可以設置：

在你的 android>app>src>main 文件夾中導航到 AndroidManifest.xml

   <application
    android:name="io.flutter.app.FlutterApplication"
    android:icon="@mipmap/ic_launcher"
    android:usesCleartextTraffic="true" />

Android 9 上的 Flutter WebView 插件錯誤

Answer 9

這是完整的代碼，如果您在將其添加到您的應用程序時遇到問題：

將 webview_flutter 添加到包的 pubspec.yaml 文件中，就在 dependencies 下：

pubspec.yaml：

dependencies:
  webview_flutter: 

主要飛鏢：

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: const WebView(
          initialUrl: 'https://flutter.io',
          javascriptMode: JavascriptMode.unrestricted,
        ),
      )
    );
  }
}

Answer 10

庫： https ://pub.dev/packages/webview_flutter

我的實現是這樣的：

import 'package:webview_flutter/webview_flutter.dart';
...
return Scaffold(
      appBar: AppBar(toolbarHeight: 0),
      body: Builder(builder: (BuildContext context) {
        return WebView(
          initialUrl: 'https://flutter.dev/',
          javascriptMode: JavascriptMode.unrestricted,
          gestureNavigationEnabled: true,
          backgroundColor: const Color(0x00000000),
        );
      }),
    );