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

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

1. Введение

Последнее обновление: 19 октября 2021 г.

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

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

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

Отображение веб-контента в WebView
Отображение виджетов Flutter поверх WebView
Реагировать на события процесса загрузки страницы
Управляйте WebView через WebViewController
Блокировка веб-сайтов с помощью NavigationDelegate
Оценка выражений JavaScript
Обработка обратных вызовов из JavaScript с помощью JavascriptChannels
Установить, удалить, добавить или показать файлы cookie
Загружать и отображать HTML из ресурсов, файлов или строк, содержащих HTML

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

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

Чему вы научитесь

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

Как настроить плагин webview_flutter
Как отслеживать события процесса загрузки страницы
Как управлять навигацией по страницам
Как дать команду WebView перемещаться вперед и назад по истории
Как оценить JavaScript, в том числе с использованием возвращаемых результатов
Как зарегистрировать обратные вызовы для вызова кода Dart из JavaScript
Как управлять файлами cookie
Как загружать и отображать HTML-страницы из ресурсов, файлов или строк, содержащих HTML

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

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

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

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

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

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

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

Начало работы с 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.

Добавление плагина WebView Flutter в качестве зависимости

Расширение возможностей приложения 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 , то увидите, что в разделе зависимостей есть строка для плагина webview_flutter .

Настройте 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 доступен выбор между виртуальными дисплеями (по умолчанию) и гибридной композицией. Однако в iOS всегда используется гибридная композиция.

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

Вывод веб-представления на экран

Замените содержимое 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, например, на URL-адрес вашего сайта.

$ 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

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

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

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

1. Введение

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

Чему вы научитесь

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

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

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

Начало работы с Flutter

Добавление плагина WebView Flutter в качестве зависимости

Настройте Android minSDK

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

Вывод веб-представления на экран

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

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

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

6. Работа с WebViewController

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

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

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

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

Регистрация пользовательского NavigationDelegate

8. Добавление кнопки меню в AppBar

9. Оценка JavaScript

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

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

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

Очистить все куки

Добавить куки

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

Удалить куки

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

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

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

Загрузить актив Flutter

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

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

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

13. Готово!