Оригинальная статья: https://medium.com/iecse-hashtag/flutter-for-web-in-2022-a-deep-dive-96cf1b5695a9
Оригинальный текст говорит о глубоком исследовании, но лично мне кажется, что это скорее поверхностное исследование.

Кроссплатформенная разработка стала одной из основных тенденций последних нескольких лет. Без сомнения, большинство разработчиков полны энтузиазма относительно кроссплатформенной экосистемы, а Google в этом направлении представила свой UI-фреймворк — Flutter.

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

Обзор: что это и зачем?

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

Поддержка веба в Flutter обеспечивает аналогичный опыт разработки, как и для мобильной платформы, благодаря удобству использования языка программирования Dart, мощному веб-экосистеме и гибкости фреймворка Flutter. Теперь разработчики могут создавать веб-приложения помимо iOS и Android.Поскольку Flutter использует один и тот же фреймворк для iOS, Android и веба, вы можете скомпилировать существующий проект Flutter на Dart прямо в веб-приложение.В этой статье мы рассмотрим текущее состояние Flutter для веба (в сравнении с React, Angular и Vue и другими одностраничными приложениями — SPA-фреймворками), для рабочих станций (в сравнении с Electron и Qt) и будущие возможности совместимости с встраиваемыми устройствами и т.д.

Но... Как это работает?

Flutter (для мобильных устройств) имеет собственный движок рендеринга Skia, который предоставляет полный контроль над каждым пикселем экрана для Flutter SDK, обеспечивая высокую точность и скорость.

Для работы в вебе Flutter создаёт HTML-компоненты и использует весь экран как холст для полного контроля над каждым пикселем. Это реализовано с помощью HTML/CSS и JavaScript, что являются современными веб-технологияи. Таким образом, Flutter может использовать все свои функции, такие как анимация и маршрутизация, без необходимости адаптации кода.

Сейчас Flutter полностью совместим с вебом, включая базовый графический слой, построенный поверх традиционных веб-API, и компиляцию Dart в JavaScript вместо машинного кода ARM, используемого в мобильных приложениях. Объединяя DOM, Canvas и WebAssembly, Flutter способна обеспечивать высокое качество и производительность пользовательского опыта на различных веб-браузерах.

Важные детали: преимущества и недостатки

**Хорошо, а значит ли это, что Flutter – ещё один фреймворк, пытающийся снизить влияние React и Angular на веб-рынок?**Да, но и нет.

Рассмотрим, что предлагает нам Flutter Web, и попробуем понять этот вопрос через его недостатки.

Преимущества:

• 1. Поддержка большинства контролов, аналогичных тем, которые используются в мобильной версии Flutter.
• 2. Почти все известные библиотеки поддерживают работу как на мобильных устройствах, так и в вебе.

60,04% пакетов pub.dev совместимы с вебом.

• 3. Ощутимое снижение времени разработки при работе с тремя платформами.
• 4. Пользовательская настройка: Flutter также предоставляет возможность создания кастомизированной версии для веба, адаптированной под конкретную операционную систему, точно так же, как он делает это для Android и iOS.

Итак, это означает ли, что Flutter Web со всеми своими преимуществами станет идеальным инструментом для создания многоплатформенных приложений (включая веб)?

Не совсем, Flutter Web имеет и серьёзные недостатки:

• 1. Недружественная поддержка SEO.
• 2. Отсутствие возможности модификации генерируемого HTML, CSS и JavaScript кода.

Flutter Web неготов к SEO, что является одной из причин, почему он становится менее подходящим для крупных коммерческих продуктов.

Производительность и отрисовка

Flutter предоставляет два варианта рендера:

• 1. HTML рендер
• 2. Canvas Kit

HTML рендер оптимизирует размер загрузки, а не первоначальную производительность.CanvasKit предпочитает высокую производительность и пиксельную точность, но увеличивает размер загрузки более чем на 400%, хотя и значительно повышает производительность.

Примечание: По умолчанию используется автоматический режим, который выбирает HTML для мобильных браузеров и CanvasKit для десктопных.

Если вы хотите протестировать каждый рендер отдельно:

HTML

flutter run -d chrome --web-renderer html

CanvasKit:

flutter run -d chrome --web-renderer canvaskit

Инициализация и запуск веб-приложения

Шаги инициализации веба:

Все проекты, созданные начиная с Flutter 2.0, уже имеют встроенную поддержку Flutter Web, поэтому можно использовать следующие команды для инициализации и запуска Flutter Web проекта

flutter create app_name
flutter devices

Команда devices должна выводить по крайней мере:

1 connected device:
Chrome (web) • chrome • web-javascript • Google Chrome 88.0.4324.150

Затем запустите в Chrome:

flutter run -d chrome

Чтобы добавить поддержку веба для более ранних версий Flutter, выполните следующую команду из проектной директории:

flutter create .

Структура папок

Выполнение команды flutter create . создаст папку с названием "web" и заполнит её необходимыми файлами для работы в вебе.

Кстати, вы не можете редактировать файлы index.html и javascript.

ДемоЭто очень простое приложение для списка задач, сравнение его работы на мобильном устройстве и в вебе:

Код: https://github.com/geekyprawins/Todo-List-App

Заключение

На текущей стадии использование Flutter Web для удовлетворения всех потребностей в веб-разработке маловероятно, но если вы хотите использовать его для создания веб-приложений, он всё ещё полезен и эффективен:

• Поддержка интеграции прогрессивных веб-приложений (PWA).
• Реализация некоторых внутренних приложений, таких как панели управления.
• Генерация соответствующих веб-версий существующего кода Flutter-мобильных приложений, что позволяет быстрее создавать веб-приложения с использованием уже имеющегося логического и графического контента, обычно веб-версия не требует реализации всех функций мобильного приложения.

Flutter Web позволяет разработчикам создавать высокопроизводительные и интерактивные веб-приложения, однако он не подходит для статических веб-страниц.

Flutter Web идеально подходит для одностраничных приложений с анимациями и сложными графическими элементами, если ваш сайт нуждается в продвижении через поисковые системы (SEO), обязательно не используйте Flutter Web (по крайней мере, на текущий момент).Для статических веб-страниц с большим количеством плотного текстового содержимого традиционные методы веб-разработки обеспечивают более высокую скорость загрузки и легче поддерживаются.> В общем, Flutter Web является мощным конкурентом среди всех доступных на рынке фреймворков; как было указано выше, у него есть свои преимущества и недостатки, но он пока не达到了标准水平。→ В общем, Flutter Web является мощным конкурентом среди всех доступных на рынке фреймворков; как было указано выше, у него есть свои преимущества и недостатки, но он пока не достиг уровня стандарта.