如何使用WebView插件在Flutter中嵌入网页

介绍

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

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

先决条件

要完成本教程，您需要：

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

本教程已使用 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 并添加以下插件：

发布规范.yaml

dependencies:
  flutter:
    sdk: flutter

  webview_flutter: ^1.0.5

完成此设置后，您可以创建将触发和显示 WebView 的小部件。

第 2 步——搭建项目的脚手架

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

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

lib/main.dart

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 文件并添加以下代码：

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

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

第 3 步 — 使用 WebView 插件

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

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

lib/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/。 在 selectedUrl 设置为 "https://www.digitalocean.com/%22 的情况下使用 Navigator.push。

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

lib/home_page.dart

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 按钮交互后，您将看到 DigitalOcean 网站显示在您的 Flutter 应用程序中。

结论

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

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