web

Переход на Flutter 3.22 для Web

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

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

Процесс инициализации веб-приложения
Процесс инициализации веб-приложения Flutter упрощен, но поддается настройке. Он вращается вокруг сценария flutter_bootstrap.js, который генерируется в процессе сборки и управляет последовательностью запуска приложения.

Сценарий flutter_bootstrap.js
Когда вы собираете свое веб-приложение Flutter с помощью команды flutter build web, в каталоге build/web создается сценарий flutter_bootstrap.js. Этот сценарий необходим для инициализации и запуска вашего приложения.

Чтобы включить этот сценарий в ваш index.html, добавьте следующий код:

<html>
  <body>
    <script src="flutter_bootstrap.js" async></script>
  </body>
</html>

Кроме того, вы можете встроить сценарий, вставив токен {{flutter_bootstrap_js}}:

<html>
  <body>
    <script>
      {{flutter_bootstrap_js}}
    </script>
  </body>
</html>

Настройка инициализации
По умолчанию команда flutter build web генерирует базовый сценарий flutter_bootstrap.js. Однако вам может понадобиться настроить эту инициализацию по различным причинам, таким как установка пользовательской конфигурации или изменение настроек сервис-воркера.

Для настройки процесса инициализации создайте собственный файл flutter_bootstrap.js в каталоге web вашего проекта. Этот пользовательский сценарий заменит стандартный, сгенерированный в процессе сборки.

Токены для настройки
В своем пользовательском файле flutter_bootstrap.js вы можете использовать несколько токенов:

  • {{flutter_js}}: Делает объект _flutter.loader доступным.
  • {{flutter_build_config}}: Устанавливает метаданные для FlutterLoader.
  • {{flutter_service_worker_version}}: Представляет версию сборки сервис-воркера.

Написание пользовательского flutter_bootstrap.js
Пользовательский сценарий flutter_bootstrap.js должен содержать три основных компонента:

  • Токен {{flutter_js}}.
  • Токен {{flutter_build_config}}.
  • Вызов _flutter.loader.load() для запуска приложения.

Базовый пример выглядит так:

{{flutter_js}}
{{flutter_build_config}}

_flutter.loader.load();

API _flutter.loader.load()
Функция _flutter.loader.load() может принимать необязательные аргументы для более индивидуализированной инициализации:

  • config: Объект конфигурации для вашего приложения.
  • onEntrypointLoaded: Функция обратного вызова, вызываемая при готовности движка к инициализации.
  • serviceWorkerSettings: Конфигурация для сервис-воркера.

Настройки конфигурации
Объект config может включать различные поля:

  • assetBase: Базовый URL для каталога с ресурсами.
  • canvasKitBaseUrl: Базовый URL для загрузки canvaskit.wasm.
  • canvasKitVariant: Указывает вариант CanvasKit (auto, full, или chromium).
  • canvasKitForceCpuOnly: Принудительное использование только CPU-рендеринга, если установлено значение true.
  • canvasKitMaximumSurfaces: Максимальное количество наложенных поверхностей.
  • debugShowSemanticNodes: Отображение дерева семантики на экране для отладки.
  • hostElement: HTML-элемент, в котором Flutter отрисовывает приложение.
  • renderer: Указывает веб-рендерер (canvaskit или html).

Настройка конфигурации Flutter на основе параметров URL-запроса
Вот пример, который настраивает конфигурацию на основе параметров URL-запроса:

{{flutter_js}}
{{flutter_build_config}}

const searchParams = new URLSearchParams(window.location.search);
const forceCanvaskit = searchParams.get('force_canvaskit') === 'true';
const userConfig = forceCanvaskit ? {'renderer': 'canvaskit'} : {};
_flutter.loader.load({
  config: userConfig,
  serviceWorkerSettings: {
    serviceWorkerVersion: {{flutter_service_worker_version}},
  },
});

Использование обратного вызова onEntrypointLoaded
Функция onEntrypointLoaded позволяет вам выполнять пользовательскую логику на различных этапах инициализации:

{{flutter_js}}
{{flutter_build_config}}

const loading = document.createElement('div');
document.body.appendChild(loading);
loading.textContent = "Загрузка точки входа...";
_flutter.loader.load({
  onEntrypointLoaded: async function(engineInitializer) {
    loading.textContent = "Инициализация движка...";
    const appRunner = await engineInitializer.initializeEngine();
    loading.textContent = "Запуск приложения...";
    await appRunner.runApp();
  }
});

Обновление старого проекта
Если вы обновляете проект с версии Flutter 3.21 или более ранней, выполните следующие шаги для создания нового файла index.html:

  1. Удалите существующие файлы из вашего каталога /web.
  2. Выполните следующую команду в каталоге вашего проекта:
   flutter create . --platforms=web

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

Источник: https://yawarosman.medium.com/switching-to-flutter-3-22-for-web-7e405e9b56f6

© 2018 All rights reserved Tehnojam.pro