如何使用Flutter WebView插件渲染网页（详细介绍）

谷歌创立Flutter是为了简化咱们创立应用程序的方式，使咱们的应用程序能够在不同的平台上运转，而不需求移植代码或重写咱们已有的应用程序。

要做到这一点并不简单，由于每个原生操作系统都有其共同之处，而且数量很多。谷歌不可能支撑全部的系统。所以，谷歌让Flutter变得可装备，其方式是插件能够由其他开发者开发。

现在，咱们有一个常见的小部件是WebView小部件。这个WebView小组件答应咱们加载网页。

当咱们需求时，如安在Flutter中运用这个同样的部件？flutter.dev为咱们处理了这个问题。他们为此开发了一个Flutter插件：它就是webview_flutter 。

什么是Flutter WebView？

webview_flutter 是一个Flutter插件，它在Android和iOS上提供了一个WebView小部件。这个插件是用来在Android和iOS设备上显现网页的。

在这篇文章中，咱们将学习如安在Flutter项目中运用webview_flutter 。

咱们将学习怎么运用webview_flutter 插件从其URL或本地源加载网页。

要求

咱们将树立一个Flutter项目，所以咱们需求在咱们的机器上现已装置了一些东西。

Flutter

这是一个Flutter SDK，用于运转和编译Flutter项目。请到Flutter的文档中根据您的操作系统选择Flutter SDK。

• Windows
• macOS
• Linux
• Chrome OS

这些链接包括如安在您的机器上装置Flutter SDK的说明。装置完结后，保证flutter 在您的大局途径中。运转flutter --help ，测验Flutter SDK是否在您的机器上装置并被大局拜访。

VS代码

VS Code是微软为咱们带来的一个强壮的现代代码编辑器。它有一个扩展，能够协助您在VS Code中轻松地运用Flutter。在您的VS Code中装置Flutter的扩展。

安卓作业室

假如您想在 Android 中运转和测验您的应用程序，那么您需求在您的机器上装置 Android Studio。然后，咱们需求装置 Flutter 和 Dart 插件。

• Flutter插件
• Dart插件

保证全部都已装置并运转。在下一节，咱们将设置一个Flutter项目。

设置您的Flutter项目

现在，咱们将创立一个Flutter项目。咱们将运用flutter CLI东西来完结这项作业。
咱们的Flutter项目的名称将是webviewprj 。运转下面的指令。

flutter create webviewprj

Flutter将在文件夹webviewprj 中创立一个项目，然后装置依靠性。
在VS Code中翻开这个项目。假如你不运用VS Code，你能够在终端完结全部，但你必须在你喜欢的代码编辑器中翻开这个项目。

cd webviewprj

假如你运用的是VS Code，就不需求做上面的作业。只要在顶部菜单中的 “查看”，点击 “终端”，就能够翻开VS Code的集成终端。

增加webview_flutter 依靠性

接下来，咱们将增加webview_flutter 依靠联系到咱们的项目。

在你的项目根目录下翻开pubspec.yaml 文件，并增加以下几行。

dependencies:
  flutter:
    sdk: flutter
  webview_flutter:

保存pubspec.yaml 文件将导致VS Code装置该依靠联系。假如您没有运用VS Code，在您的终端运转以下指令来装置webview_flutter 依靠联系。

flutter pub get webview_flutter

flutter pub 包括办理Flutter软件包的指令。

flutter pub get 在Flutter项目中获取包。在本例中，它在咱们的Flutter项目中获取webview_flutter 包。

接下来，咱们设置webview_flutter 插件所需的最小SDK版别。在你的项目中翻开android/app/build.gradle ，并在android → defaultConfig 部分增加以下装备代码。

android {
    defaultConfig {
        minSdkVersion 19
    }
}

webview_flutter 从Android v19向上到最新的Android版别都能够运用。

运用webview_flutter

webview_flutter 输出一个WebView 类。这个类启动并创立一个新的Web视图，并在WebView小部件内烘托设定的网页（经过其URL）。WebView能够运用一个WebViewController ，一旦WebView被创立，它就被传递给onWebViewCreated 回调。
为了烘托WebView widget，咱们需求导入webview_flutter 包。

import 'package:webview_flutter/webview_flutter.dart';

然后，咱们像这样烘托WebView widget。

WebView(
    initialUrl: 'https://medium.com'
);

这将加载页面 [https://medium.com](https://medium.com)并在WebView widget中烘托。WebView 小组件将出现 [https://medium.com](https://medium.com)就像浏览器会烘托页面相同。WebView 传递给initialUrl 的参数告诉WebView 要加载和烘托的网页的URL。
还有其他参数，咱们能够传递给WebView 。让咱们看看下面的内容。

留意，下面的参数和它们的描述是从WebView类库文档中摘录的。

• onWebViewCreated: 这是一个函数，一旦网络视图被创立就会被调用。
• initialUrl: 这是一个字符串，用来保存网页的URL，以便在WebView上加载和出现。
• javascriptMode: 这是设置WebView中是否启用了JavaScript。
• javascriptChannels: 在WebView中运转的JavaScript代码可用的JavascriptChannels 。
• navigationDelegate: 一个决定怎么处理导航动作的托付函数
• onPageStarted ：当一个页面开端加载时被调用。
• onPageFinished ：当页面加载结束后被调用。
• onProgress ：当一个页面正在加载时被调用。
• debuggingEnabled: 操控是否启用WebView的调试。默许情况下，它被设置为false
• gestureNavigationEnabled: 一个布尔值，表明水平滑动手势是否会触发后退式列表导航。默许情况下，它被设置为false
• allowsInlineMediaPlayback: 操控iOS上是否答应HTML5视频的内联播映。这个字段在Android上被疏忽，由于Android默许答应。它的默许值是false

留意，javascriptMode 和autoMediaPlaybackPolicy 参数不能为空。

创立小组件页面

现在，咱们将在咱们的应用程序中创立两个widget页面：HomePage 和WebViewPage 。HomePage 页面将容纳两个按钮。每个按钮被点击后将翻开WebViewPage 页面。这个WebViewPage 页面将烘托一个WebView ，将网页的URL传递给WebView widget。

让咱们来创立它们。现已，Flutter为咱们生成了一些代码。除了MyApp widget，咱们将取消其他widget。
翻开lib/main.dart 文件，编辑成以下代码。

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'dart:io';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage()
    );
  }
}

请看，咱们在MyApp widget中烘托HomePage 。这使得HomePage 在应用程序被翻开时出现。

让咱们对HomePage widget进行编码。

class HomePage extends StatelessWidget {
  void _handleURLButtonPress(BuildContext context, String url, String title) {
    Navigator.push(context,
        MaterialPageRoute(builder: (context) => WebViewPage(url, title)));
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("WebView Flutter Example"),
      ),
      body: Center(
          child: Column(
        children: [
          MaterialButton(
            color: Colors.blue,
            child: Text(
              "Open pub.dev",
              style: TextStyle(color: Colors.white70, fontWeight: FontWeight.bold),
            ),
            onPressed: () {
              _handleURLButtonPress(
                  context, "https://pub.dev", "pub.dev");
            },
          ),
          MaterialButton(
            color: Colors.blue,
            child: Text(
              "Open Medium.com",
              style: TextStyle(color: Colors.white70, fontWeight: FontWeight.bold),
            ),
            onPressed: () {
              _handleURLButtonPress(
                  context, "https://medium.com", "Medium.com");
            },
          ),
        ],
      )),
    );
  }
}

看，这个HomePage 烘托了两个按钮MaterialButton 。每个按钮都被设置为在点击时调用函数_handleURLButtonPress 。

第一个按钮，Open pub.dev ，调用_handleURLButtonPress ，经过context ，"https://pub.dev" ，和"pub.dev" 。"https://pub.dev" 是由WebView 加载和烘托的网页的URL。"pub.dev" 将是AppBar 的标题WebViewPage 。

第二个按钮，Open Medium.com ，将调用函数_handleURLButtonPress ，参数context 。 [https://medium.com.com](https://medium.com.com)(WebView widget将加载和烘托的网页URL), 和Medium.com (WebViewPage 页面的标题)。

函数_handleURLButtonPress 启动了WebViewPage widget页面。它将把网页的URL和标题传递给WebViewPage 。

让咱们对WebViewPage widget进行编码。

class WebViewPage extends StatefulWidget {
  final String url;
  final String title;
  WebViewPage(this.url, this.title);
  @override
  WebViewPageState createState() =>
      WebViewPageState(this.url, this.title);
}
class WebViewPageState extends State<WebViewPage> {
  final String url;
  final String title;
  WebViewPageState(this.url, this.title);
  @override
  void initState() {
    super.initState();
    // Enable hybrid composition.
    if (Platform.isAndroid) WebView.platform = SurfaceAndroidWebView();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(this.title),
        ),
        body: Column(children: [
          Expanded(
              child: WebView(
                  initialUrl: this.url,
                  javascriptMode: JavascriptMode.unrestricted
              )
          )
        ])
    );
  }
}

WebViewPage 是一个有状态的部件，而WebPageState 是WebViewPage 的逻辑和内部状态。

WebViewPage 构造函数承受url 和title 。它在createState 办法中把它传递给WebViewPageState 。

当WebViewPageState 烘托WebView ，它将initialUrl 传递给WebView ，并将this.url 作为其值。

JavaScript形式javascriptMode 被设置为JavascriptMode.unrestricted 。这种JavaScript形式使网页能够运转JavaScript。

运转应用程序

现在，咱们现已完结了编码作业。咱们将运转该应用程序。要做到这一点，在终端运转以下指令。

flutter run

假如你运用的是VS Code，右键点击lib/main.dart ，然后点击Run Without Debugging 或Start Debugging 。

留意，请保证你的模拟器正在运转。

这将在你的手机模拟器上编译应用程序并运转它。

主页

点击进入Open pub.dev

点击Open Medium.com

总结

在本教程中咱们学到了很多东西。

首要，咱们开端介绍WebView ，以及怎么将其移植到Flutter。接下来，咱们介绍了webview_flutter ，还学习了怎么设置Flutter项目和装置webview_flutter 的依靠性。后来，咱们树立了小部件来烘托和显现网页 [https://blog.logrocket.com](https://blog.logrocket.com)和 [https://logrocket.com](https://logrocket.com)在一个来自webview_flutter 插件的WebView widget上。

有了这个webview_flutter 插件，咱们将能够在咱们的Flutter应用程序中烘托和显现网页。

请看GitHub中的源代码。

参考资料

• webview_flutter: v2.0.10
• 网页视图类

The postRender webpages using the Flutter WebView pluginappeared first onLogRocket Blog.