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:
- Удалите существующие файлы из вашего каталога
/web. - Выполните следующую команду в каталоге вашего проекта:
flutter create . --platforms=webЗаключение
Переход на Flutter 3.22 для веб-разработки предлагает улучшенную гибкость и возможность настройки инициализации приложений. Понимая и используя сценарий flutter_bootstrap.js, вы можете точно настроить процесс запуска в соответствии с конкретными потребностями вашего приложения. Независимо от того, настраиваете ли вы конфигурацию или обновляете старый проект, это руководство предоставляет подробные шаги для начала работы.
Источник: https://yawarosman.medium.com/switching-to-flutter-3-22-for-web-7e405e9b56f6
Гик, хакинтошник, линуксоид, считаю себя flutter разработчиком. Завёл канал, в котором изначально хотел показывать как я с нуля и до бесконечности погрузился в дорвей тематику, а в итоге просто рассказываю о себе, своих успехах и неудачах в сайтах, приложениях, офлайн проектах. Добро пожаловать в