Как развернуть веб-приложение Flutter

Как вы знаете, Flutter предоставляет прекрасную возможность иметь единую базу кода для всех платформ, таких как Android, iOS, Windows, Linux, Интернет и других. Кросс-платформенные фреймворки — вещь не новая, но инженеры Google поставили перед собой достаточно задач, чтобы следовать основному принципу Flutter — компилировать код Dart в настоящий нативный код для каждой поддерживаемой платформы. Как вы знаете, для веб-браузеров нативным кодом является JavaScript, HTML и CSS. Таким образом, вы готовитесь к развертыванию Progressive Web Application.

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

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

Перед развертыванием было бы неплохо иметь возможность обновить новую версию в веб-браузерах пользователей после развертывания. В настоящее время Flutter CLI не поддерживает именование хэшей или другой способ именования выходных пакетов.

Решение довольно простое — после включения Web в проекте Flutter у вас должен появиться файл web/index.html. По умолчанию он имеет следующую строку:

<script src="main.dart.js" type="application/javascript"></script> 

Перед выпуском новой версии просто добавьте/увеличьте суффикс версии main.dart.js следующим образом:

<script src="main.dart.js?v=1.0.1" type="application/javascript"></script>

Итак, возвращаясь к Верселю. В первую очередь нужно создать новый проект и подключить Git-репозиторий:

Поскольку у Vercel еще нет шаблона Flutter, нам нужно настроить несколько параметров в разделе Настройки сборки и вывода:

Команда сборки: flutter/bin/flutter build web --release

Выходной каталог: build/web

Команда установки:

if cd flutter; затем git pull && CD .. ; иначе git clone https://github.com/flutter/flutter.git -b стабильный; fi && лс && флаттер / мусорное ведро / флаттер доктор && флаттер / мусорное ведро / флаттер чистый && flutter/bin/flutter config --enable-web

Для команды flutter build есть один важный параметр: --web-renderer.

Параметр --web-renderer может быть следующим: auto, html или canvaskit.

• auto (по умолчанию) — автоматически выбирает, какой модуль визуализации использовать. Этот параметр выбирает средство визуализации HTML, когда приложение работает в мобильном браузере, и средство визуализации CanvasKit, когда приложение работает в браузере настольного компьютера.
• html – всегда использовать визуализатор HTML
• canvaskit — всегда используйте средство визуализации CanvasKit
.

Параметр auto работает хорошо, но если вам нужно ускорить время первой загрузки, вам поможет параметр html.

В конце концов, веб-приложение готово к развертыванию!

:::информация Также опубликовано здесь.

:::