Trang này được dịch bởi Cloud Translation API.

Thêm WebView vào ứng dụng Flutter

1. Giới thiệu

Lần cập nhật gần đây nhất: ngày 19 tháng 10 năm 2021

Với trình bổ trợ WebView Flutter, bạn có thể thêm một tiện ích WebView vào ứng dụng Flutter Android hoặc iOS. Trên iOS, tiện ích WebView được hỗ trợ bởi WKWebView, còn trên Android, tiện ích WebView được hỗ trợ bởi WebView. Trình bổ trợ này có thể kết xuất các tiện ích Flutter trên chế độ xem web. Ví dụ: bạn có thể hiển thị một trình đơn thả xuống trên chế độ xem web.

Sản phẩm bạn sẽ tạo ra

Trong lớp học lập trình này, bạn sẽ từng bước xây dựng một ứng dụng di động có WebView bằng Flutter SDK. Ứng dụng này sẽ:

Hiển thị nội dung web trong WebView
Hiển thị các tiện ích Flutter xếp chồng lên nhau trên WebView
Phản ứng với các sự kiện tiến trình tải trang
Kiểm soát WebView thông qua WebViewController
Chặn các trang web bằng NavigationDelegate
Đánh giá biểu thức JavaScript
Xử lý lệnh gọi lại từ JavaScript bằng JavascriptChannels
Đặt, xoá, thêm hoặc hiện cookie
Tải và hiển thị HTML từ các thành phần, tệp hoặc chuỗi chứa HTML

Trình mô phỏng iPhone đang chạy một ứng dụng Flutter có webview được nhúng, cho thấy trang chủ của Flutter.dev

Trình mô phỏng Android đang chạy một ứng dụng Flutter có webview được nhúng cho thấy trang chủ Flutter.dev

Kiến thức bạn sẽ học được

Trong lớp học lập trình này, bạn sẽ tìm hiểu cách sử dụng trình bổ trợ webview_flutter theo nhiều cách, bao gồm:

Cách định cấu hình trình bổ trợ webview_flutter
Cách theo dõi các sự kiện tiến trình tải trang
Cách kiểm soát hoạt động điều hướng trang
Cách điều khiển WebView để di chuyển qua lại trong nhật ký
Cách đánh giá JavaScript, bao gồm cả việc sử dụng kết quả được trả về
Cách đăng ký lệnh gọi lại để gọi mã Dart từ JavaScript
Cách quản lý cookie
Cách tải và hiển thị các trang HTML từ thành phần, tệp hoặc chuỗi chứa HTML

Bạn cần có

Android Studio 4.1 trở lên (để phát triển ứng dụng Android)
Xcode 12 trở lên (để phát triển iOS)
SDK Flutter
Một trình soạn thảo mã, chẳng hạn như Android Studio hoặc Visual Studio Code.

2. Thiết lập môi trường phát triển Flutter

Bạn cần có 2 phần mềm để hoàn thành bài thực hành này: Flutter SDK và một trình chỉnh sửa.

Bạn có thể chạy lớp học lập trình này bằng bất kỳ thiết bị nào sau đây:

Một thiết bị Android hoặc iOS thực được kết nối với máy tính và được đặt ở Chế độ nhà phát triển.
Trình mô phỏng iOS (bạn cần cài đặt các công cụ Xcode).
Trình mô phỏng Android (cần thiết lập trong Android Studio).

3. Bắt đầu

Làm quen với Flutter

Có nhiều cách để tạo một dự án Flutter mới, cả Android Studio và Visual Studio Code đều cung cấp công cụ cho tác vụ này. Hãy làm theo các quy trình được liên kết để tạo một dự án hoặc thực thi các lệnh sau trong một thiết bị đầu cuối dòng lệnh tiện dụng.

$ flutter create --platforms=android,ios webview_in_flutter
Creating project webview_in_flutter...
Resolving dependencies in `webview_in_flutter`...
Downloading packages...
Got dependencies in `webview_in_flutter`.
Wrote 74 files.

All done!
You can find general documentation for Flutter at: https://docs.flutter.dev/
Detailed API documentation is available at: https://api.flutter.dev/
If you prefer video documentation, consider: https://www.youtube.com/c/flutterdev

In order to run your application, type:

  $ cd webview_in_flutter
  $ flutter run

Your application code is in webview_in_flutter/lib/main.dart.

Thêm trình bổ trợ WebView Flutter làm phần phụ thuộc

Cách tốt nhất để thêm chức năng bổ sung vào ứng dụng Flutter là sử dụng các gói Pub. Trong lớp học lập trình này, bạn sẽ thêm trình bổ trợ webview_flutter vào dự án của mình. Chạy các lệnh sau trong dòng lệnh.

$ cd webview_in_flutter
$ flutter pub add webview_flutter
Resolving dependencies...
Downloading packages...
  collection 1.18.0 (1.19.0 available)
  leak_tracker 10.0.5 (10.0.7 available)
  leak_tracker_flutter_testing 3.0.5 (3.0.7 available)
  material_color_utilities 0.11.1 (0.12.0 available)
+ plugin_platform_interface 2.1.8
  string_scanner 1.2.0 (1.3.0 available)
  test_api 0.7.2 (0.7.3 available)
+ webview_flutter 4.9.0
+ webview_flutter_android 3.16.7
+ webview_flutter_platform_interface 2.10.0
+ webview_flutter_wkwebview 3.15.0
Changed 5 dependencies!
6 packages have newer versions incompatible with dependency constraints.
Try `flutter pub outdated` for more information.

Nếu kiểm tra pubspec.yaml, bạn sẽ thấy tệp này có một dòng trong phần dependencies (phần phụ thuộc) cho trình bổ trợ webview_flutter.

Định cấu hình minSDK Android

Để sử dụng trình bổ trợ webview_flutter trên Android, bạn cần đặt minSDK thành 20. Sửa đổi tệp android/app/build.gradle như sau:

android/app/build.gradle

android {
    //...

    defaultConfig {
        applicationId = "com.example.webview_in_flutter"
        minSdk = 20                                         // Modify this line
        targetSdk = flutter.targetSdkVersion
        versionCode = flutterVersionCode.toInteger()
        versionName = flutterVersionName
    }

4. Thêm tiện ích WebView vào ứng dụng Flutter

Trong bước này, bạn sẽ thêm một WebView vào ứng dụng của mình. WebView là các khung hiển thị tích hợp được lưu trữ và bạn (nhà phát triển ứng dụng) có thể chọn cách lưu trữ các khung hiển thị tích hợp này trong ứng dụng của mình. Trên Android, bạn có thể chọn giữa Màn hình ảo (mặc định cho Android) và Thành phần kết hợp. Tuy nhiên, iOS luôn sử dụng thành phần kết hợp Hybrid.

Để biết thông tin chi tiết về sự khác biệt giữa Màn hình ảo và Thành phần kết hợp, hãy đọc tài liệu về Lưu trữ khung hiển thị Android và iOS gốc trong ứng dụng Flutter bằng Khung hiển thị nền tảng .

Đặt một Webview trên màn hình

Thay thế nội dung của lib/main.dart bằng nội dung sau:

lib/main.dart

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

void main() {
  runApp(
    MaterialApp(
      theme: ThemeData(useMaterial3: true),
      home: const WebViewApp(),
    ),
  );
}

class WebViewApp extends StatefulWidget {
  const WebViewApp({super.key});

  @override
  State<WebViewApp> createState() => _WebViewAppState();
}

class _WebViewAppState extends State<WebViewApp> {
  late final WebViewController controller;

  @override
  void initState() {
    super.initState();
    controller = WebViewController()
      ..loadRequest(
        Uri.parse('https://flutter.dev'),
      );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter WebView'),
      ),
      body: WebViewWidget(
        controller: controller,
      ),
    );
  }
}

Khi chạy trên iOS hoặc Android, thao tác này sẽ hiển thị WebView dưới dạng cửa sổ trình duyệt tràn lề trên thiết bị của bạn. Điều này có nghĩa là trình duyệt sẽ xuất hiện trên thiết bị ở chế độ toàn màn hình mà không có bất kỳ đường viền hoặc lề nào. Khi cuộn, bạn sẽ nhận thấy những phần trông có vẻ hơi lạ trên trang. Điều này là do JavaScript bị tắt và việc kết xuất flutter.dev đúng cách đòi hỏi phải có JavaScript.

Chạy ứng dụng

Chạy ứng dụng Flutter trên iOS hoặc Android để xem một WebView hiển thị trang web flutter.dev. Ngoài ra, hãy chạy ứng dụng trong trình mô phỏng Android hoặc trình mô phỏng iOS. Bạn có thể thay thế URL WebView ban đầu bằng trang web của riêng mình.

$ flutter run

Giả sử bạn đang chạy trình mô phỏng thích hợp hoặc đã đính kèm một thiết bị thực, sau khi biên dịch và triển khai ứng dụng vào thiết bị, bạn sẽ thấy một số nội dung như sau:

Trình mô phỏng iPhone đang chạy một ứng dụng Flutter có webview được nhúng, cho thấy trang chủ của Flutter.dev

Trình mô phỏng Android đang chạy một ứng dụng Flutter có webview được nhúng cho thấy trang chủ Flutter.dev

5. Theo dõi sự kiện tải trang

Tiện ích WebView cung cấp một số sự kiện tiến trình tải trang mà ứng dụng của bạn có thể theo dõi. Trong chu kỳ tải trang WebView, có 3 sự kiện tải trang khác nhau được kích hoạt: onPageStarted, onProgress và onPageFinished. Ở bước này, bạn sẽ triển khai một chỉ báo tải trang. Ngoài ra, thao tác này sẽ cho thấy rằng bạn có thể kết xuất nội dung Flutter trên vùng nội dung WebView.

Thêm sự kiện tải trang vào ứng dụng

Tạo một tệp nguồn mới tại lib/src/web_view_stack.dart và điền nội dung sau vào tệp đó:

lib/src/web_view_stack.dart

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

class WebViewStack extends StatefulWidget {
  const WebViewStack({super.key});

  @override
  State<WebViewStack> createState() => _WebViewStackState();
}

class _WebViewStackState extends State<WebViewStack> {
  var loadingPercentage = 0;
  late final WebViewController controller;

  @override
  void initState() {
    super.initState();
    controller = WebViewController()
      ..setNavigationDelegate(NavigationDelegate(
        onPageStarted: (url) {
          setState(() {
            loadingPercentage = 0;
          });
        },
        onProgress: (progress) {
          setState(() {
            loadingPercentage = progress;
          });
        },
        onPageFinished: (url) {
          setState(() {
            loadingPercentage = 100;
          });
        },
      ))
      ..loadRequest(
        Uri.parse('https://flutter.dev'),
      );
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        WebViewWidget(
          controller: controller,
        ),
        if (loadingPercentage < 100)
          LinearProgressIndicator(
            value: loadingPercentage / 100.0,
          ),
      ],
    );
  }
}

Mã này đã bao bọc tiện ích WebView trong một Stack, có điều kiện phủ lớp WebView bằng một LinearProgressIndicator khi tỷ lệ phần trăm tải trang nhỏ hơn 100%. Vì điều này liên quan đến trạng thái chương trình thay đổi theo thời gian, nên bạn đã lưu trạng thái này trong một lớp State được liên kết với một StatefulWidget.

Để sử dụng tiện ích WebViewStack mới này, hãy sửa đổi lib/main.dart như sau:

lib/main.dart

import 'package:flutter/material.dart';

import 'src/web_view_stack.dart';

void main() {
  runApp(
    MaterialApp(
      theme: ThemeData(useMaterial3: true),
      home: const WebViewApp(),
    ),
  );
}

class WebViewApp extends StatefulWidget {
  const WebViewApp({super.key});

  @override
  State<WebViewApp> createState() => _WebViewAppState();
}

class _WebViewAppState extends State<WebViewApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter WebView'),
      ),
      body: const WebViewStack(),
    );
  }
}

Khi chạy ứng dụng, tuỳ thuộc vào điều kiện mạng và việc trình duyệt có lưu trang mà bạn đang chuyển đến vào bộ nhớ đệm hay không, bạn sẽ thấy chỉ báo tải trang được phủ lên trên vùng nội dung WebView.

6. Xử lý WebViewController

Tiện ích WebView cho phép kiểm soát theo phương thức lập trình bằng WebViewController. Bộ điều khiển này được cung cấp sau khi tạo tiện ích WebView thông qua một lệnh gọi lại. Bản chất không đồng bộ của tính khả dụng của bộ điều khiển này khiến nó trở thành ứng cử viên hàng đầu cho lớp Completer<T> không đồng bộ của Dart.

Cập nhật lib/src/web_view_stack.dart như sau:

lib/src/web_view_stack.dart

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

class WebViewStack extends StatefulWidget {
  const WebViewStack({required this.controller, super.key}); // MODIFY

  final WebViewController controller;                        // ADD

  @override
  State<WebViewStack> createState() => _WebViewStackState();
}

class _WebViewStackState extends State<WebViewStack> {
  var loadingPercentage = 0;
  // REMOVE the controller that was here

  @override
  void initState() {
    super.initState();
    // Modify from here...
    widget.controller.setNavigationDelegate(
      NavigationDelegate(
        onPageStarted: (url) {
          setState(() {
            loadingPercentage = 0;
          });
        },
        onProgress: (progress) {
          setState(() {
            loadingPercentage = progress;
          });
        },
        onPageFinished: (url) {
          setState(() {
            loadingPercentage = 100;
          });
        },
      ),
    );
    // ...to here.
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        WebViewWidget(
          controller: widget.controller,                     // MODIFY
        ),
        if (loadingPercentage < 100)
          LinearProgressIndicator(
            value: loadingPercentage / 100.0,
          ),
      ],
    );
  }
}

Tiện ích WebViewStack hiện sử dụng một bộ điều khiển được tạo trong tiện ích xung quanh. Thao tác này sẽ cho phép chia sẻ bộ điều khiển cho WebViewWidget với các phần khác của ứng dụng.

Có một WebView đang hoạt động là một chuyện, nhưng có thể điều hướng qua lại trong nhật ký trang và tải lại trang sẽ là một bộ tính năng bổ sung hữu ích. Rất may là bạn có thể thêm chức năng này vào ứng dụng của mình bằng WebViewController.

Tạo một tệp nguồn mới tại lib/src/navigation_controls.dart và điền nội dung sau vào tệp đó:

lib/src/navigation_controls.dart

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

class NavigationControls extends StatelessWidget {
  const NavigationControls({required this.controller, super.key});

  final WebViewController controller;

  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        IconButton(
          icon: const Icon(Icons.arrow_back_ios),
          onPressed: () async {
            final messenger = ScaffoldMessenger.of(context);
            if (await controller.canGoBack()) {
              await controller.goBack();
            } else {
              messenger.showSnackBar(
                const SnackBar(content: Text('No back history item')),
              );
              return;
            }
          },
        ),
        IconButton(
          icon: const Icon(Icons.arrow_forward_ios),
          onPressed: () async {
            final messenger = ScaffoldMessenger.of(context);
            if (await controller.canGoForward()) {
              await controller.goForward();
            } else {
              messenger.showSnackBar(
                const SnackBar(content: Text('No forward history item')),
              );
              return;
            }
          },
        ),
        IconButton(
          icon: const Icon(Icons.replay),
          onPressed: () {
            controller.reload();
          },
        ),
      ],
    );
  }
}

Tiện ích này sử dụng WebViewController được chia sẻ với tiện ích tại thời điểm tạo để cho phép người dùng kiểm soát WebView thông qua một loạt IconButton.

Với WebViewStack đã được cập nhật và NavigationControls mới được tạo, giờ là lúc bạn kết hợp tất cả vào một WebViewApp đã được cập nhật. Đây là nơi chúng ta tạo WebViewController dùng chung. Với WebViewApp ở gần đầu cây Tiện ích trong ứng dụng này, bạn nên tạo tiện ích ở cấp độ này.

Cập nhật tệp lib/main.dart như sau:

lib/main.dart

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

import 'src/navigation_controls.dart';                  // ADD
import 'src/web_view_stack.dart';

void main() {
  runApp(
    MaterialApp(
      theme: ThemeData(useMaterial3: true),
      home: const WebViewApp(),
    ),
  );
}

class WebViewApp extends StatefulWidget {
  const WebViewApp({super.key});

  @override
  State<WebViewApp> createState() => _WebViewAppState();
}

class _WebViewAppState extends State<WebViewApp> {
  // Add from here...
  late final WebViewController controller;

  @override
  void initState() {
    super.initState();
    controller = WebViewController()
      ..loadRequest(
        Uri.parse('https://flutter.dev'),
      );
  }
  // ...to here.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter WebView'),
        // Add from here...
        actions: [
          NavigationControls(controller: controller),
        ],
        // ...to here.
      ),
      body: WebViewStack(controller: controller),       // MODIFY
    );
  }
}

Khi chạy ứng dụng, bạn sẽ thấy một trang web có các chế độ điều khiển:

Trình mô phỏng iPhone đang chạy một ứng dụng Flutter có webview được nhúng, cho thấy trang chủ Flutter.dev với các nút điều khiển trang trước, trang tiếp theo và tải lại trang

Trình mô phỏng Android đang chạy một ứng dụng Flutter có một webview được nhúng, cho thấy trang chủ Flutter.dev với các nút điều khiển trang trước, trang tiếp theo và tải lại trang

7. Theo dõi hoạt động điều hướng bằng NavigationDelegate

WebView cung cấp cho ứng dụng của bạn một NavigationDelegate, cho phép ứng dụng theo dõi và kiểm soát thao tác điều hướng trang của tiện ích WebView. Khi một thao tác điều hướng được WebView, bắt đầu, chẳng hạn như khi người dùng nhấp vào một đường liên kết, NavigationDelegate sẽ được gọi. Bạn có thể dùng lệnh gọi lại NavigationDelegate để kiểm soát việc WebView có tiếp tục chỉ đường hay không.

Đăng ký một NavigationDelegate tuỳ chỉnh

Trong bước này, bạn sẽ đăng ký một lệnh gọi lại NavigationDelegate để chặn thao tác chuyển đến YouTube.com. Xin lưu ý rằng việc triển khai đơn giản này cũng chặn nội dung YouTube cùng dòng xuất hiện trên nhiều trang tài liệu về API Flutter.

Cập nhật lib/src/web_view_stack.dart như sau:

lib/src/web_view_stack.dart

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

class WebViewStack extends StatefulWidget {
  const WebViewStack({required this.controller, super.key});

  final WebViewController controller;

  @override
  State<WebViewStack> createState() => _WebViewStackState();
}

class _WebViewStackState extends State<WebViewStack> {
  var loadingPercentage = 0;

  @override
  void initState() {
    super.initState();
    widget.controller.setNavigationDelegate(
      NavigationDelegate(
        onPageStarted: (url) {
          setState(() {
            loadingPercentage = 0;
          });
        },
        onProgress: (progress) {
          setState(() {
            loadingPercentage = progress;
          });
        },
        onPageFinished: (url) {
          setState(() {
            loadingPercentage = 100;
          });
        },
        // Add from here...
        onNavigationRequest: (navigation) {
          final host = Uri.parse(navigation.url).host;
          if (host.contains('youtube.com')) {
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(
                content: Text(
                  'Blocking navigation to $host',
                ),
              ),
            );
            return NavigationDecision.prevent;
          }
          return NavigationDecision.navigate;
        },
        // ...to here.
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        WebViewWidget(
          controller: widget.controller,
        ),
        if (loadingPercentage < 100)
          LinearProgressIndicator(
            value: loadingPercentage / 100.0,
          ),
      ],
    );
  }
}

Trong bước tiếp theo, bạn sẽ thêm một mục trình đơn để kiểm thử NavigationDelegate bằng cách sử dụng lớp WebViewController. Bạn có thể tự mình bổ sung logic của lệnh gọi lại để chỉ chặn thao tác điều hướng toàn trang đến YouTube.com, đồng thời vẫn cho phép nội dung YouTube cùng dòng trong tài liệu API.

8. Thêm nút trình đơn vào AppBar

Trong một số bước tiếp theo, bạn sẽ tạo một nút trình đơn trong tiện ích AppBar. Nút này được dùng để đánh giá JavaScript, gọi các kênh JavaScript và quản lý cookie. Nhìn chung, đây là một trình đơn hữu ích.

Tạo một tệp nguồn mới tại lib/src/menu.dart và điền nội dung sau vào tệp đó:

Thêm WebView vào ứng dụng Flutter

1. Giới thiệu

Sản phẩm bạn sẽ tạo ra

Kiến thức bạn sẽ học được

Bạn cần có

2. Thiết lập môi trường phát triển Flutter

3. Bắt đầu

Làm quen với Flutter

Thêm trình bổ trợ WebView Flutter làm phần phụ thuộc

Định cấu hình minSDK Android

4. Thêm tiện ích WebView vào ứng dụng Flutter

Đặt một Webview trên màn hình

Chạy ứng dụng

5. Theo dõi sự kiện tải trang

Thêm sự kiện tải trang vào ứng dụng

6. Xử lý WebViewController

Truy cập vào WebViewController từ Tiện ích WebView

Tạo các nút điều khiển thao tác

Thêm các nút điều khiển thao tác vào AppBar

7. Theo dõi hoạt động điều hướng bằng NavigationDelegate

Đăng ký một NavigationDelegate tuỳ chỉnh

8. Thêm nút trình đơn vào AppBar

9. Đánh giá JavaScript

10. Làm việc với các kênh JavaScript

11. Quản lý cookie

Lấy danh sách tất cả cookie

Xoá tất cả cookie

Thêm cookie

Đặt cookie bằng CookieManager

Xoá cookie

Thêm các mục trong trình đơn CookieManager

Thực hiện CookieManager

12. Tải các thành phần, tệp và chuỗi HTML của Flutter trong WebView

Tải thành phần Flutter

Tải tệp cục bộ

Tải chuỗi HTML

Thêm các mục trong trình đơn

13. Đã xong!