介绍

该WebView插件允许您在 Flutter 应用程序中显示网页。

在本教程中，您将创建一个Widget可在整个应用程序中用于WebView从任何地方启动的自定义。

先决条件

要完成本教程，您需要：

• 下载并安装Flutter。
• 下载并安装Android Studio 或 Visual Studio Code。
• 建议为您的代码编辑器安装插件：
  • Flutter和Dart为 Android Studio 安装的插件。
  • Flutter 为 Visual Studio Code 安装的扩展。

本教程通过 Flutter v1.22.2、Android SDK v30.0.2、Android Studio v4.1 验证。

步骤 1 — 设置项目

为 Flutter 设置环境后，您可以运行以下命令来创建新应用程序：

flutter create flutter_webview_example

导航到新的项目目录：

cd flutter_webview_example

使用flutter create将生成一个演示应用程序，该应用程序将显示单击按钮的次数。

pubspec.yaml在您的代码编辑器中打开并添加以下插件：

dependencies:
  flutter:
    sdk: flutter

  webview_flutter: ^1.0.5

完成此设置后，您可以创建将触发并显示WebView.

步骤 2 — 搭建项目

接下来，您需要更新main.dart文件并创建一个新home_page.dart文件。

main.dart在您的代码编辑器中打开并导入home_page.dart并将homefrom更改MyHomePage为HomePage：

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

void main() {
  runApp(MyApp());
}

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

然后，创建一个新home_page.dart文件并添加以下代码：

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: () {},
        ),
      ),
    );
  }
}

编译您的代码并让它在模拟器中运行。此代码将创建FlatButton带有消息的"Open Webpage"。

第 3 步 – 使用WebView插件

下一步将是创建一个StatelessWidget命名MyWebView来显示WebView数据。

创建一个新my_webview.dart文件并添加以下代码：

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);
        },
      ));
  }
}

在本教程中，您将把用户导航到https://www.digitalocean.com/. Navigator.push与selectedUrl设置为一起使用"https://www.digitalocean.com/"。

重新访问home_page.dart并添加MyWebView：

import 'package:flutter/material.dart';
import my_webview.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: () {
            Navigator.of(context).push(MaterialPageRoute(
              builder: (BuildContext context) => MyWebView(
                title: "DigitalOcean",
                selectedUrl: "https://www.digitalocean.com",
              )
            ));
          },
        ),
      ),
    );
  }
}

编译你的代码并让它在模拟器中运行：

与Open Webpage按钮交互后，您将在 Flutter 应用程序中看到 DigitalOcean 网站。

结论

在本教程中，您使用该WebView包在 Flutter 应用程序中显示网页。

如果您想了解有关 Flutter 的更多信息，请查看我们的 Flutter 主题页面以获取练习和编程项目。