Введение

Flutter, надежная среда пользовательского интерфейса, разработанная Google, произвела революцию в том, как мы создаем кроссплатформенные мобильные приложения. Одной из его исключительных особенностей является интеграция WebViews, позволяющая разработчикам беспрепятственно встраивать веб-контент в свои приложения Flutter. Хотя это открывает захватывающие возможности, что действительно отличает ваше приложение, так это когда вы включаете двустороннюю связь между вашим приложением и загруженной веб-страницей.

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

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

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

Итак, давайте углубимся и узнаем, как установить бесшовную связь между Flutter и веб-страницей в WebView, открывая двери для бесконечных возможностей для пользовательского интерфейса вашего приложения.

Чему научит этот блог?

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

Обзор интеграции WebView:

  • Понять роль WebView в отображении веб-контента в приложении Flutter.
  • Знакомство с подключаемым модулем webview_flutter для бесшовной интеграции с WebView.

Создание канала связи:

  • Установите двунаправленный канал связи между Flutter и веб-страницей.
  • Введение в JavascriptChannels во Flutter для управления общением.

Загрузка и взаимодействие с веб-страницей:

  • Пошаговое руководство по загрузке веб-страницы (файла HTML) в WebView.
  • Внедрение прослушивателей событий JavaScript для захвата взаимодействия с пользователем.

Отправка сообщений с веб-страницы в приложение Flutter:

  • Отправка сообщений с веб-страницы (JavaScript) в приложение Flutter с использованием JavascriptChannels.
  • Обработка и обработка этих сообщений в приложении Flutter.

Отправка сообщений из приложения Flutter на веб-страницу:

  • Отправка данных и сообщений из приложения Flutter на веб-страницу (JavaScript) через JavascriptChannels.
  • Реализация динамических обновлений на веб-странице на основе данных, полученных из приложения Flutter.

Настройка проекта:

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

Предварительные требования: прежде чем мы начнем, убедитесь, что в вашей системе настроено следующее:

  1. Flutter SDK: для разработки приложений Flutter на вашем компьютере должен быть установлен Flutter.
  2. Flutter IDE: любой текстовый редактор или IDE с поддержкой Flutter.

Шаг 1. Создайте новый проект Flutter Начните с создания нового проекта Flutter с помощью следующей команды в терминале или командной строке:

flutter create my_webview_app

Шаг 2. Добавьте зависимости. Затем перейдите к файлу pubspec.yaml в каталоге вашего проекта и добавьте зависимость webview_flutter:

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^4.2.2

Сохраните файл и запустите flutter pub get, чтобы получить добавленную зависимость.

Инициализировать WebViewController

Во Flutter WebViewController необходим для управления WebView и взаимодействия с ним, позволяя разработчикам контролировать его поведение и выполнять внутри него код JavaScript. В этом разделе мы проведем вас через процесс инициализации WebViewController в вашем приложении Flutter, используя предоставленный код в качестве примера.

Шаг 1. Импорт необходимого пакета Убедитесь, что вы импортировали необходимые пакеты для интеграции WebView в файл Dart:

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

Шаг 2. Создание StatefulWidget Для работы с WebView и его контроллером вам понадобится StatefulWidget. Создайте его, определив виджет MyHomePage как StatefulWidget, как показано в предоставленном коде:

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});
@override
  State<MyHomePage> createState() => _MyHomePageState();
}

Шаг 3: Определите переменную WebViewController Внутри состояния StatefulWidget определите переменную для хранения экземпляра WebViewController. В примере кода он называется _webViewController и изначально имеет значение null:

class _MyHomePageState extends State<MyHomePage> {
  WebViewController? _webViewController;
}

Загрузите файл HTML из ресурсов:

Шаг 1. Добавьте файл HTML в ресурсы Flutter. Убедитесь, что вы поместили файл HTML (в данном случае web_view.html) в папку assets вашего проекта Flutter. Если папка assets не существует, вы можете создать ее на корневом уровне вашего проекта и поместить в нее HTML-файл.

Шаг 2. Обновите pubspec.yaml В файле pubspec.yaml убедитесь, что вы объявили файл HTML в разделе assets. Добавьте следующую запись в свой pubspec.yaml:

flutter:
  assets:
    - assets/web_view.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Two-Way Communication</title>
</head>
<body>
<h1>Two-Way Communication</h1>

<p>Message from Flutter: <span id="messageFromFlutter"></span></p>
<button onclick="sendMessageToFlutter()">Send Message to Flutter</button>

<script>
    // Function to receive messages from Flutter
    function receiveMessageFromFlutter(message) {
      document.getElementById('messageFromFlutter').innerText = message;
    }

    // Function to send a message to Flutter
    function sendMessageToFlutter() {
      var message = "Hello from the web!";
      messageHandler.postMessage(message);
    }
  </script>
</body>
</html>

После добавления этой записи сохраните файл и запустите flutter pub get, чтобы убедиться, что актив правильно включен в ваш проект.

Отображение html-файла с использованием активов:

Чтобы отобразить HTML-представление, мы можем использовать метод loadFlutterAsset, который принимает путь к HTML-файлу ресурсов.

@override
void initState() {
  _webViewController = WebViewController()
    ..loadFlutterAsset("assets/web_view.html");
  super.initState();
}

Переход _webViewController в WebViewWidget :

Widget buildWebView() {
  return WebViewWidget(
    controller: _webViewController!,
  );
}
return Scaffold(
  appBar: AppBar(
    title: const Text("HTML-FLUTTER"),
  ),
  body: buildWebView(),
);

Теперь давайте вернемся к html-файлу и давайте разберемся, как мы будем устанавливать связь между HTML и приложением Flutter.

Здесь у нас есть две важные функции receiveMessageFromFlutterиsendMessageToFlutter, которые помогут нам установить связь.

function receiveMessageFromFlutter(message) { ... }

  • Это функция JavaScript, которая получает сообщения от приложения Flutter.
  • Он принимает параметр message, который представляет сообщение, отправленное из приложения Flutter на веб-страницу.
  • Внутри функции document.getElementById('messageFromFlutter') используется для получения HTML-элемента с идентификатором «messageFromFlutter».
  • innerText — это свойство элемента HTML, которое устанавливает текстовое содержимое внутри этого элемента.
  • Функция устанавливает для текстового содержимого элемента значение message, эффективно обновляя содержимое элемента полученным сообщением из приложения Flutter.

function sendMessageToFlutter() { ... }

  • Это функция JavaScript, которая отправляет сообщение в приложение Flutter.
  • Внутри функции создается переменная message, которой присваивается значение «Привет из Интернета!».
  • messageHandler.postMessage(message) используется для отправки сообщения в приложение Flutter.
  • Метод postMessage является частью интерфейса JavaScript Channel (в данном случае messageHandler), который обеспечивает связь между веб-страницей и приложением Flutter через WebView.

Ключевым моментом для понимания является то, что эти функции предоставляют механизм для веб-страницы и приложения Flutter для обмена сообщениями. Когда веб-страница хочет отправить сообщение в приложение Flutter, она использует messageHandler.postMessage(message) для запуска события отправки сообщения. Приложение Flutter может прослушивать это событие через JavaScriptChannel и соответствующим образом обрабатывать сообщение. Точно так же, когда приложение Flutter хочет отправить сообщение на веб-страницу, оно может использовать JavaScriptChannel для вызова функции receiveMessageFromFlutter с сообщением в качестве параметра, который затем обновляет содержимое HTML-элемента на веб-странице.

Эта двусторонняя связь позволяет приложению Flutter и веб-странице взаимодействовать друг с другом, обеспечивая плавную интеграцию веб-контента в приложение Flutter и наоборот.

Как отправить сообщение из Flutter в HTML?

Чтобы отправить сообщение из флаттера, мы можем использовать метод runJavaScript для отправки сообщения в html.

      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.send),
        onPressed: () {
          _webViewController!.runJavaScript(
              'receiveMessageFromFlutter("Hello from Flutter");');
        },
      ),

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

Убедитесь, что режим JavaScript установлен на неограниченный, установив JavaScriptMode на неограниченный с помощью setJavaScriptMode.

@override
void initState() {
  _webViewController = WebViewController()
    ..loadFlutterAsset("assets/web_view.html")
    ..setJavaScriptMode(JavaScriptMode.unrestricted);
  super.initState();
}

Когда мы нажмем на FloatingActionButton, мы отправим сообщение в html-код, и оно будет отображаться в веб-представлении.

Теперь давайте посмотрим, как мы можем отправить сообщение из html-кода в приложение флаттера.

Чтобы отправить сообщение в приложение флаттера, нам нужно убедиться, что sendMessageToFlutter добавлено внутри тега скрипта внутри html-кода.

    function sendMessageToFlutter() {
      var message = "Hello from the web!";
      messageHandler.postMessage(message);
    }

Эта функция будет выполнена, когда мы нажмем кнопку Send Message to Flutter, добавленную в html-код.

<button onclick="sendMessageToFlutter()">Send Message to Flutter</button>

Теперь, после настройки html-файла, нам нужно добавить канал JavaScript в наш _webViewController, чтобы добавить канал JavaScript, мы можем использовать addJavaScriptChannel для обработки сообщения.

@override
void initState() {
  _webViewController = WebViewController()
    ..loadFlutterAsset("assets/web_view.html")
    ..setJavaScriptMode(JavaScriptMode.unrestricted)
    ..addJavaScriptChannel(
      "messageHandler",
      onMessageReceived: (JavaScriptMessage javaScriptMessage) {
        print("message from the web view=\"${javaScriptMessage.message}\"");
      },
    );
  super.initState();
}

этот метод предоставляет нам имя канала, то есть свойство messageHandler и onMessageReceived, которое выполняется каждый раз, когда мы отправляем сообщение в приложение флаттера из html-кода.

Давайте нажмем на Send Message to Flutter и в консоли мы увидим message from the web view=”Hello from the web!” в консоли.

Теперь, чтобы отобразить сообщение на экране, мы можем создать переменную сообщения и использовать setState для обновления сообщения.

onMessageReceived: (JavaScriptMessage javaScriptMessage) {
  print("message from the web view=\"${javaScriptMessage.message}\"");
  setState(() {
    message = javaScriptMessage.message;
  });
},

и внутри тела мы можем добавить текст для отображения сообщения.

body: Column(
  children: [
    SizedBox(height: 300, child: buildWebView()),
    Text("Message from html:$message"),
  ],
),

Заключение

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

На протяжении всего руководства мы изучали реализацию двунаправленного канала связи с использованием JavascriptChannels. Этот канал позволяет приложению Flutter и веб-странице беспрепятственно обмениваться данными и сообщениями, создавая динамические и интерактивные приложения.

Освоив интеграцию WebView и двустороннюю связь, разработчики могут использовать сильные стороны как Flutter, так и веб-технологий, создавая многофункциональные приложения, в которых нативные элементы органично сочетаются с веб-контентом.

Благодаря этим новым знаниям вы теперь готовы создавать сложные приложения Flutter, которые легко взаимодействуют с веб-функциями, открывая бесконечные возможности для привлекательного и удобного дизайна приложений. Итак, приступайте к внедрению WebView в свои проекты Flutter, чтобы вывести свои приложения на новый уровень! Удачного кодирования!