Эта страница переведена с помощью Cloud Translation API.

Добавление WebView в ваше приложение Flutter

1. Введение

Last Updated: 2021-10-19

С помощью плагина WebView Flutter вы можете добавить виджет WebView в свое приложение Flutter для Android или iOS. На iOS виджет WebView основан на WKWebView , а на Android — на WebView . Плагин может отображать виджеты Flutter поверх веб-представления. Например, можно отобразить выпадающее меню поверх веб-представления.

Что вы построите

В этом практическом занятии вы шаг за шагом создадите мобильное приложение с использованием WebView и Flutter SDK. Ваше приложение будет:

Отображение веб-контента в WebView
Display Flutter widgets stacked over the WebView
React to page load progress events
Управляйте WebView через WebViewController
Block websites using the NavigationDelegate
Evaluate JavaScript expressions
Обработка обратных вызовов из JavaScript с помощью JavascriptChannels
Set, remove, add or show cookies
Загрузка и отображение HTML-кода из ресурсов, файлов или строк, содержащих HTML-код.

Симулятор iPhone, запускающий приложение Flutter со встроенным веб-представлением, отображающим домашнюю страницу Flutter.dev.

Эмулятор Android, запускающий приложение Flutter со встроенным веб-представлением, отображающим домашнюю страницу Flutter.dev.

Что вы узнаете

В этом практическом занятии вы узнаете, как использовать плагин webview_flutter различными способами, в том числе:

How to configure the webview_flutter plugin
Как отслеживать события, связанные с прогрессом загрузки страницы
How to control page navigation
Как заставить WebView перемещаться вперед и назад по своей истории
Как выполнить JavaScript-код, в том числе используя возвращаемые результаты.
Как зарегистрировать коллбэки для вызова кода Dart из JavaScript
Как управлять файлами cookie
Как загрузить и отобразить HTML-страницы из ресурсов, файлов или строк, содержащих HTML-код.

Что вам понадобится

Android Studio 4.1 или более поздняя версия (для разработки под Android)
Xcode 12 or later (for iOS development)
Flutter SDK
Редактор кода, например, Android Studio или Visual Studio Code .

2. Настройте среду разработки Flutter.

Для выполнения этой лабораторной работы вам понадобятся два программных компонента: Flutter SDK и редактор .

Вы можете выполнить это практическое задание, используя любое из следующих устройств:

Физическое устройство Android или iOS , подключенное к компьютеру и настроенное на режим разработчика.
Симулятор iOS (требуется установка инструментов Xcode).
Эмулятор Android (требуется настройка в Android Studio).

3. Начало работы

Getting started with Flutter

Существует несколько способов создания нового проекта Flutter, и для этой задачи существуют инструменты как в Android Studio, так и в Visual Studio Code. Вы можете либо следовать инструкциям по созданию проекта, либо выполнить следующие команды в удобном терминале командной строки.

$ 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.

Adding WebView Flutter plugin as a dependency

Наилучший способ добавления дополнительных функций в Flutter-приложение — использование пакетов Pub . В этом практическом занятии вы добавите плагин webview_flutter в свой проект. Выполните следующие команды в терминале.

$ 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.

Если вы проверите свой файл pubspec.yaml , то увидите, что в разделе dependencies появилась строка, посвященная плагину webview_flutter .

Configure Android minSDK

Для использования плагина webview_flutter на Android необходимо установить minSDK равным 20 Измените файл android/app/build.gradle следующим образом:

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. Добавление виджета WebView в приложение Flutter

На этом шаге вы добавите WebView в свое приложение. WebView — это встроенные представления, и у вас, как у разработчика приложения, есть выбор, как разместить эти встроенные представления в своем приложении. На Android вы можете выбрать между виртуальными дисплеями (по умолчанию для Android) и гибридной композицией. Однако iOS всегда использует гибридную композицию.

Для более подробного обсуждения различий между виртуальными дисплеями и гибридной композицией ознакомьтесь с документацией по размещению нативных представлений Android и iOS в вашем приложении Flutter с помощью Platform Views .

Putting a Webview on the screen

Замените содержимое файла lib/main.dart следующим:

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

При запуске на iOS или Android WebView будет отображаться в полноэкранном режиме, без каких-либо границ или полей. При прокрутке вы можете заметить, что некоторые части страницы выглядят немного странно. Это связано с тем, что JavaScript отключен, а для корректной отрисовки flutter.dev требуется JavaScript.

Запуск приложения

Запустите приложение Flutter на iOS или Android, чтобы увидеть WebView, отображающий веб-сайт flutter.dev . В качестве альтернативы запустите приложение в эмуляторе Android или симуляторе iOS. Вы можете заменить исходный URL WebView, например, на адрес своего собственного веб-сайта.

$ flutter run

Предполагая, что у вас запущен соответствующий симулятор или эмулятор, или подключено физическое устройство, после компиляции и развертывания приложения на вашем устройстве вы должны увидеть примерно следующее:

5. Отслеживание событий загрузки страницы

Виджет WebView предоставляет несколько событий, отслеживающих ход загрузки страницы, которые может прослушивать ваше приложение. Во время цикла загрузки страницы WebView срабатывают три различных события: onPageStarted , onProgress и onPageFinished . На этом шаге вы реализуете индикатор загрузки страницы. В качестве бонуса это покажет, что вы можете отображать контент Flutter поверх области контента WebView .

Добавление событий загрузки страницы в ваше приложение

Создайте новый исходный файл в папке lib/src/web_view_stack.dart и заполните его следующим содержимым:

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

В этом коде виджет WebView обернут в Stack , и при необходимости поверх WebView отображается LinearProgressIndicator , когда процент загрузки страницы меньше 100%. Поскольку это связано с изменяющимся со временем состоянием программы, вы сохранили это состояние в классе State , связанном с StatefulWidget .

Чтобы использовать этот новый виджет WebViewStack , измените файл lib/main.dart следующим образом:

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

При запуске приложения, в зависимости от состояния вашей сети и от того, кэшировал ли браузер страницу, на которую вы переходите, вы увидите индикатор загрузки страницы, наложенный поверх области содержимого WebView .

6. Работа с WebViewController

Виджет WebView обеспечивает программное управление с помощью WebViewController . Этот контроллер становится доступен после создания виджета WebView через функцию обратного вызова. Асинхронный характер доступности этого контроллера делает его идеальным кандидатом для асинхронного класса Completer<T> в Dart.

Обновите lib/src/web_view_stack.dart следующим образом:

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

Теперь виджет WebViewStack использует контроллер, созданный в окружающем виджете. Это позволит использовать контроллер WebViewWidget совместно с другими частями приложения.

Наличие работающего WebView — это одно, но возможность перемещаться вперед и назад по истории страниц и перезагружать страницу была бы полезным дополнением. К счастью, с помощью WebViewController вы можете добавить эту функциональность в свое приложение.

Создайте новый исходный файл в lib/src/navigation_controls.dart и заполните его следующим содержимым:

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

Этот виджет использует WebViewController , предоставленный ему на этапе создания, чтобы пользователь мог управлять WebView с помощью ряда IconButton .

Имея на руках обновленный WebViewStack и новые NavigationControls , пришло время объединить все это в обновленное WebViewApp . Именно здесь мы создаем общий WebViewController . Поскольку WebViewApp находится в верхней части дерева виджетов в этом приложении, логично создавать его именно на этом уровне.

Обновите файл lib/main.dart следующим образом:

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

При запуске приложения должна отобразиться веб-страница с элементами управления:

Симулятор iPhone, запускающий приложение Flutter со встроенным веб-представлением, отображающим домашнюю страницу Flutter.dev с элементами управления «Предыдущая страница», «Следующая страница» и «Перезагрузка страницы».

Эмулятор Android, запускающий приложение Flutter со встроенным веб-представлением, отображающим домашнюю страницу Flutter.dev с элементами управления «Предыдущая страница», «Следующая страница» и «Перезагрузка страницы».

7. Отслеживание навигации с помощью NavigationDelegate

WebView предоставляет вашему приложению NavigationDelegate, который позволяет отслеживать и управлять навигацией по страницам виджета WebView . Когда WebView, например, когда пользователь щелкает по ссылке, вызывается NavigationDelegate . Коллбэк NavigationDelegate можно использовать для управления тем, продолжит ли WebView навигацию.

Зарегистрируйте пользовательский NavigationDelegate

На этом шаге вы зарегистрируете функцию обратного вызова NavigationDelegate для блокировки перехода на YouTube.com . Обратите внимание, что эта упрощенная реализация также блокирует встроенный контент YouTube, что указано на различных страницах документации Flutter API.

Обновите файл lib/src/web_view_stack.dart следующим образом:

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

На следующем шаге вы добавите пункт меню, позволяющий тестировать ваш NavigationDelegate с помощью класса WebViewController . В качестве упражнения читателю предлагается дополнить логику обратного вызова, чтобы блокировать только полноэкранную навигацию на YouTube.com, но при этом разрешить отображение встроенного контента YouTube в документации API.

8. Добавление кнопки меню на панель приложений.

На следующих этапах вы создадите кнопку меню в виджете AppBar , которая будет использоваться для выполнения JavaScript-кода, вызова JavaScript-каналов и управления файлами cookie. В целом, это действительно полезное меню.

Создайте новый исходный файл в lib/src/menu.dart и заполните его следующим содержимым:

Добавление WebView в ваше приложение Flutter

1. Введение

Что вы построите

Что вы узнаете

Что вам понадобится

2. Настройте среду разработки Flutter.

3. Начало работы

Getting started with Flutter

Adding WebView Flutter plugin as a dependency

Configure Android minSDK

4. Добавление виджета WebView в приложение Flutter

Putting a Webview on the screen

Запуск приложения

5. Отслеживание событий загрузки страницы

Добавление событий загрузки страницы в ваше приложение

6. Работа с WebViewController

Доступ к WebViewController из виджета WebView

Создание элементов управления навигацией

Добавление элементов управления навигацией в панель приложений.

7. Отслеживание навигации с помощью NavigationDelegate

Зарегистрируйте пользовательский NavigationDelegate

8. Добавление кнопки меню на панель приложений.

9. Оценка JavaScript

10. Работа с каналами JavaScript

11. Управление файлами cookie

Получить список всех файлов cookie

Очистить все файлы cookie

Добавить файл cookie

Установка cookie-файла с помощью CookieManager

Удалить cookie

Добавление пунктов меню CookieManager

Использование CookieManager

12. Загрузка ресурсов Flutter, файлов и HTML-строк в WebView.

Загрузить ресурс Flutter

Загрузить локальный файл

Загрузить HTML-строку

Добавить пункты меню

13. Всё готово!