Hola, Amigos! На связи Саша Чаплыгин, Flutter-dev Amiga и Тимур Моисеев, Teamlead Flutter Amiga. Мы продолжаем рассказывать об обновленной версии Flutter 3.10, и в этой части затронем разработку веб и мобильных приложений, Impeller, производительность и изменения в устаревших функциях.

Это статья-перевод от автора Кевина Чишолма. Оригинал статьи читайте по этой ссылке. Мы решили разбить материал на несколько частей для удобства восприятия.

Я и мои коллеги пишем о Flutter-разработке в телеграм-калане Flutter.Много. В мае рассказывали о личном опыте и делились полезными плагинами\библиотеками. В июне продолжим эти темы, а еще поделимся лайфхаками по прохождению собеседований. Если актуально — присоединяйтесь!

Веб-разработка

Для каких вариантов веб-разработки идеально подходит Flutter?

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

• прогрессивные веб-приложения;

• одностраничные веб-приложения;

• существующие мобильные приложения на Flutter.

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

Search Engine Optimization (SEO)

Flutter ориентирован преимущественно на создание динамических приложений,  и веб-разработка с помощью Flutter не является исключением. Основной упор в этом случае делается на производительность, точность воспроизведения и согласованность. Поэтому результаты работы приложения не соответствуют тому, что требуется поисковым системам для правильной индексации. Для веб-страниц, которые содержат статический контент в виде структурированного текста, рекомендовано использовать HTML — аналогично тому, как это сделано на сайтах flutter.dev, dart.dev и pub.dev. Также следует обдумать возможность отделения основного пользовательского интерфейса приложения на Flutter от посадочной страницы, страниц с маркетинговым контентом и справкой, создаваемых с помощью оптимизированного для поисковых систем языка HTML.

Сокращение времени загрузки веб-приложений Flutter 

В новом выпуске уменьшен размер файлов со шрифтами значков,  удалены неиспользуемые символы из Material и Cupertino. 

Уменьшение размера CanvasKit для всех браузеров

Браузеры на базе Chromium могут использовать еще более компактный пользовательский CanvasKit, для обслуживания которого используется лучшая в Google сеть доставки контента. Это позволит еще больше повысить производительность.

Встраивание элементов

Теперь можно встраивать веб-приложение Flutter в определенный элемент на странице. До этого выпуска приложения либо заполняли всю основную область страницы, либо размещались внутри элемента iframe. Примеры кода  можно найти на GitHub.

Поддержка шейдеров

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

Движок

Impeller

В стабильном выпуске 3.7 была показана предварительная версия  Impeller на iOS. Теперь Impeller-движок для рендеринга автоматически есть на iOS.  Все приложения для iOS, создаваемые с помощью Flutter 3.10, используют движок Impeller по умолчанию. В результате они будут иметь меньше ошибок и более стабильную производительность. 

Теперь Impeller на iOS занимает меньший объем памяти, использует меньше проходов рендеринга и промежуточных целевых буферов. На новых моделях iPhone используется сжатие текстур с потерями, что позволило уменьшить объем памяти без ухудшения качества изображения. Это повысило производительность на iPad.

С Impeller у разработчиков появляется возможность быстрее выполнять запросы на популярные функции. Один из примеров — поддержка более широкой цветовой палитры P3 на iOS. Описание этой функции будут ниже в статье.

Пользователи приложений могут заметить, что рендеринг с помощью Skia и Impeller имеет незначительные различия. В одном из будущих выпусков разработчики планируют удалить устаревший движок рендеринга Skia на iOS, чтобы уменьшить размер Flutter.

Продолжается работа над бэкэндом Vulkan для Impeller. Impeller для Android остается в разработке, его предварительная версия пока не готова. Чтобы отслеживать прогресс, заходите на доску проектов на GitHub.

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

Устранение зависаний и рывков при выводе изображения

Один из пользователей Flutter обнаружил, что можно сократить время получения следующего отрисовываемого слоя от драйвера Metal. Чтобы реализовать эту возможность, нужно установить цвет фона FlutterViews в ненулевое значение. Это позволит устранить снижение частоты кадров на новейших дисплеях iOS с частотой обновления 120 Гц.  В некоторых случаях удается увеличить частоту обновления в три раза. 

В выпуске 3.7 загрузку локальных изображений перенесли из потока платформы в поток Dart, чтобы избежать задержки событий vsync из потока платформы. Однако пользователи заметили, что эта дополнительная работа в потоке Dart в ряде случае вызывает  ошибки. В новом выпуске открытие и декодирование локальных изображений перенесли из потока Dart в фоновый поток. Это позволяет устранить возможные длительные паузы на экранах с большим количеством локальных изображений и избежать задержки событий vsync. Локальные тесты и автоматизированные бенчмарки показали, что время загрузки сразу нескольких изображений сократилось вдвое.

Продолжается оптимизация новой внутренней структуры DisplayList во Flutter. Теперь добавлен механизм выбраковки на основе R-дерева. Он позволяет заранее исключить выполнение механизмом ренедеринга операций по отрисовке изображений. Подобная оптимизация ускоряет работу пользовательского модуля отрисовки изображения, которое выходит за границы экрана. Микробенчмарки показали снижение времени обработки DisplayList до 50 %. Приложения, в которых использовались обрезанные цветовые гаммы, стали работать быстрее. Степень ускорения зависит от сложности и количества скрытых операций рисования. 

Сокращение задержки при запуске приложений на iOS 

Неэффективная стратегия поиска идентификаторов в пакетах приложений увеличивала время задержки при запуске приложения, причем пропорционально размеру приложения. Еще улучшена стратегия поиска идентификаторов в пакетах. В результате время задержки при запуске сократилось на 100 мс или примерно на 30 – 50 % при запуске большого ресурсоемкого приложения.

Уменьшение размера

Flutter использует SkParagraph в качестве библиотеки по умолчанию для формирования, компоновки и рендеринга текста. Ранее был добавлен флажок для возврата к устаревшим библиотекам libtxt и minikin. В обновлениях 3.10 удален флажок libtxt и minikin. Это дает уменьшение размера приложения на Flutter в сжатом виде на 30 Кб.

Стабильность

В версии 3.0 на поздней стадии процесса рендеринга включена функция Android, которая использовала расширенные возможности драйвера ГП. Эта функция перерисовывает не весь экран, а только ту его часть, которая действительно изменилась и содержит новую информацию. И хотя результаты бенчмарков впечатляют — возникли две проблемы.  Во-первых, даже самый лучший бенчмарк не способен охватить все практические варианты применения. Во-вторых, набор устройств и версий Android, поддерживающих эту функцию драйвера ГП, оказалось трудно найти. Учитывая ограниченность возможностей и поддержки, теперь отключена функция частичной перерисовки на Android.

Она остается включенной на iOS при использовании движка Skia. Планируется включить ее в Impeller в одном из будущих выпусков.

Улучшения в API 

Декодер APNG 

В версии Flutter 3.10 решена одна из самых популярных проблем. Была добавлена возможность декодирования изображений APNG. Теперь можно загружать изображения APNG с помощью существующих API Flutter.

Улучшения в API для загрузки изображений

Технический директор Flutter внес улучшения в API для загрузки изображений в dart:ui. Добавлен новый метод instantiateImageCodecWithSize. Он поддерживает загрузку изображения, которое удовлетворяет трем условиям:

• соотношение сторон неизвестно во время загрузки;

• есть ограничение на прямоугольную рамку;

• есть ограничение на исходное соотношение сторон.

Примером может служить ситуация, когда приложение пытается отобразить одно изображение из множества возможных, загруженных из сети.

Разработка мобильных приложений

iOS

Отладка по беспроводной сети

Теперь можно запускать приложения Flutter на iOS и выполнять их горячую перезагрузку без подключения устройства с помощью кабеля. После успешного сопряжения по беспроводной сети устройства iOS в Xcode можно развернуть на нем приложение с помощью команды flutter run. Если вдруг это не удается сделать, проверьте, появился ли значок сети рядом с устройством в меню Окно > Устройства и Симуляторы > Устройства. Более подробная информация доступна в документации.

Поддержка изображений с более широкой цветовой гаммой

Приложения Flutter для iOS теперь поддерживают точную цветопередачу изображений с широкой цветовой гаммой. Для этого нужно использовать Impeller и добавить флажок FLTEnableWideGamut в файл Info.plist.

Поддержка проверки орфографии

Виджет SpellCheckConfiguration() теперь по умолчанию поддерживает функцию проверки орфографии Apple на iOS. Для установки виджета используйте параметр spellCheckConfiguration в CupertinoTextField.

Адаптивные чекбоксы и переключатели

В этом обновлении в библиотеку Cupertino добавлены виджеты CupertinoCheckBox и CupertinoRadio. Они позволяют создавать чекбоксы и переключатели, соответствующие стилю Apple.

В виджеты Material Checkbox и Radio добавлены конструкторы .adaptive. На iOS and macOS эти конструкторы используют соответствующие виджеты Cupertino, на других платформах — виджеты Material.

Доработка анимации, переходов и цветов Cupertino 

В версии Flutter 3.10 улучшен ряд анимаций, переходов и цветов, чтобы привести их в соответствие с интерфейсом SwiftUI. В частности, был:

• обновлен  переход CupertinoPageRoute;

• добавлены анимации увеличения заголовка в CupertinoSliverNavigationBar;

• добавлено несколько новых системных цветов iOS  в CupertinoColors.

Производительность виджетов PlatformView 

Когда виджет PlatformViews появляется на экране, Flutter снижает частоту обновления на iOS, чтобы уменьшить зависания и задержки. Пользователи приложения заметят это, когда приложение будет отображать анимированные или прокручиваемые PlatformViews.

Использование в плагинах общего кода macOS и iOS  

Теперь Flutter поддерживает ключ sharedDarwinSource в файле pubspec.yaml для плагинов. Этот ключ указывает на то, что Flutter должен использовать общий код для iOS и macOS.

ios:
pluginClass: PathProviderPlugin
dartPluginClass: PathProviderFoundation
sharedDarwinSource: true

macos:
pluginClass: PathProviderPlugin
dartPluginClass: PathProviderFoundation
sharedDarwinSource: true

Новые ресурсы для расширений приложений

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

Чтобы упростить создание виджетов домашнего экрана и обмена данными, теперь добавлены новые методы в плагины path_provider и homescreen_widget.

Новые ресурсы для кроссплатформенного дизайна 

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

Android

Поддержка Android CameraX 

Camera X, библиотека Jetpack, упрощает добавление широкого спектра функций камеры в приложение для Android. Эти функции применимы к целому ряду камер на устройствах Android.  В новом выпуске появилась предварительная поддержка CameraX в плагине Flutter Camera,  которая охватывает следующие сценарии использования:

• захват изображения;

• запись видео;

• отображение предварительного просмотра камеры в реальном времени.

Чтобы опробовать эту функцию, дайте согласие на использование реализации CameraX. Для этого добавьте в файл pubspec.yaml следующую строку: 

Dependencies:
camera: ^0.10.4 # Latest camera version
camera_android_camerax: ^0.5.0

DevTools

DevTools — набор инструментов для повышения производительности и отладки Dart и Flutter. Вот перечень улучшений: 

• В пользовательском интерфейсе DevTools используется Material 3,   благодаря чему модернизируется внешний вид и улучшается доступность.

• Консоль DevTools поддерживает оценки для приложения, запущенного в режиме отладки. До этого выпуска оценку можно было делать только после приостановки приложения.

• Встроенный просмотрщик трассировки Perfetto заменяет собой предыдущий, поскольку обрабатывает более крупные наборы данных намного эффективнее. Perfetto включает больше функций:
  - возможность фиксировать интересующие потоки;
  - выбор нескольких событий временной шкалы из нескольких кадров с помощью щелчка кнопкой мыши и перетаскивания;
  - использование SQL-запросов для извлечения определенных данных из событий временной шкалы.

Чтобы получить больше информации, ознакомьтесь с примечаниями к выпуску DevTools 2.23.1, DevTools 2.22.2 и DevTools 2.21.1.

Устаревшие функции и критически важные изменения

Устаревшие API

Изменения в этом выпуске затрагивают устаревшие API, срок действия которых истек после выхода версии 3.7. Информация о затронутых API, дополнительный контекст и инструкции по миграции приведены в руководстве по функциям, устаревшим после появления этого выпуска. Dart Fix позволяет устранить многие из этих проблем, включая быстрые исправления в IDE и массовое применение с помощью команды dart fix.

Обновление Android Studio Flamingo 

После обновления Android Studio до версии Flamingo можно увидеть ошибку при попытке запуска или сборки приложения Flutter для Android. Она возникает из-за того, что Android Studio Flamingo обновляет поставляемый Java SDK с версии 11 до версии 17. Версии Gradle младше чем 7.3 не работают при использовании Java 17. Обновлена функция flutter analyze --suggestions, чтобы проверить, возникает ли эта ошибка из-за несовместимости между Java SDK и версией Gradle. Чтобы узнать о способах устранения этой ошибки, ознакомьтесь с руководством по миграции.

Устаревание шаблона Window singleton 

С выходом этого выпуска прекращается поддержка Window singleton.  Приложениям и библиотекам, которые используют этот шаблон, следует от него отказаться. Это поможет подготовить приложения к поддержке нескольких окон при запуске в будущей версии Flutter.

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