Flutter：如何使用WebView插件

Displaying webpages inside of your Flutter applications is easy with the use of the WebView plugin. In our example application, we’ll look at how to create a custom Widget that can be used throughout our application to launch a WebView from anywhere.

显示网页的颤振应用中很容易与使用的WebView插件。在示例应用程序中，我们将研究如何创建可在整个应用程序中使用的自定义Widget ，以便从任何地方启动WebView 。

创建一个新的Flutter项目 (Creating a new Flutter Project)

As always, we’ll start off by setting up a new project and adding the plugin:

与往常一样，我们将从建立一个新项目并添加插件开始：

# New Flutter project
$ flutter create my_webview_project

# Open this up inside of VS Code
$ cd my_webview_project && code .

添加WebView插件 (Adding the WebView plugin)

Next up, we’ll need to add the webview_flutter plugin within our pubspec.yaml:

接下来，我们需要添加webview_flutter我们中的插件pubspec.yaml ：

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^0.3.14+1

We’ll then need to add the appropriate values to our Info.plist, opting into the embedded views preview:

然后，我们需要将适当的值添加到Info.plist ，以选择嵌入的视图预览：

<key>io.flutter.embedded_views_preview</key>
<true/>

That’s all the required plugin preparation, we can now open our application up in the iOS or Android simulator.

这就是所有必要的插件准备工作，我们现在可以在iOS或Android模拟器中打开应用程序。

脚手架我们的项目 (Scaffolding our Project)

We can now update main.dart to contain our HomePage widget that we’ll create in a second:

现在，我们可以更新main.dart包含我们的HomePage小工具，我们将在第二个创建：

import 'package:flutter/material.dart';
import 'package:my_webview_project/home_page.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter WebView',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: HomePage());
  }
}

The HomePage widget will simply consist of a FlatButton with an onPressed event:

该HomePage部件将仅包括一个的FlatButton与onPressed事件：

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Home Page"),
      ),
      body: Center(
        child: FlatButton(
          child: Text("Open Webpage"),
          onPressed: () {},
        ),
      ),
    );
  }
}

使用WebView插件 (Using the WebView Plugin)

Let’s create a StatelessWidget named MyWebView which we can use to navigate a user to this page whenever we want to display WebView data:

让我们创建一个StatelessWidget名为MyWebView我们可以用它来用户导航到该页面时，我们要显示WebView数据：

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

import 'package:webview_flutter/webview_flutter.dart';

class MyWebView extends StatelessWidget {
  final String title;
  final String selectedUrl;

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

  MyWebView({
    @required this.title,
    @required this.selectedUrl,
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: WebView(
          initialUrl: selectedUrl,
          javascriptMode: JavascriptMode.unrestricted,
          onWebViewCreated: (WebViewController webViewController) {
            _controller.complete(webViewController);
          },
        ));
  }
}

If we wanted to navigate the user to https://alligator.io, we could therefore use Navigator.push with the selectedUrl equal to https://alligator.io. Let’s update our FlatButton within the HomePage:

如果我们想将用户导航到https://alligator.io ，则可以使用Navigator.push ，并且selectedUrl等于https://alligator.io 。让我们在HomePage更新FlatButton ：

child: FlatButton(
  child: Text("Open Webpage"),
  onPressed: () {
    Navigator.of(context).push(MaterialPageRoute(
        builder: (BuildContext context) => MyWebView(
              title: "Alligator.io",
              selectedUrl: "https://alligator.io",
            )));
  },
),

And there we have it! Here’s our WebView showing the Alligator homepage:

我们终于得到它了！这是我们的WebView显示了鳄鱼主页：