Google представил Flutter 2.8: что нового

Повышение производительности, новые функции и элементы Firebase, обновление статуса Desktop, улучшение инструментария. Flutter-команда Friflex рассказывает об обновлениях фреймворка.

В этом, возможно, последнем релизе года было объединено 2424 пул-реквестов и закрыто 2976 проблем. Разработчики заявляют увеличение производительности в движке и в инструментах Flutter DevTools, стабильный выпуск Google Mobile Ads SDK для Flutter, набор новых элементов и улучшений для Firebase, WebView 3.0, новую порцию пакетов Flutter Favorite, множество улучшений для Flutter Desktop в преддверии стабильной версии, а также новая версия DartPad, которая поддерживает много популярных пакетов, включая Firebase.

Этот релиз включает улучшения касательно задержки приложения при запуске. Тестирование этих улучшений проводилось на Google Pay, крупном, популярном приложении с более чем миллионом строк кода. Все улучшения привели к снижению задержки Google Pay на 50% при работе на более слабых устройствах Android и на 10%-ом улучшении на продвинутых устройствах.

В Flutter SDK улучшили принципы работы сборщика мусора, что помогает избежать несвоевременных циклов его запуска, когда приложение запущено. К примеру, перед отрисовкой первого кадра, Flutter теперь лишь оповещает Dart VM (виртуальная машина Dart) о нагрузке на оперативную память для TRIM_LEVEL_RUNNING_CRITICAL. При локальном тестировании эти изменения ускоряют отрисовку первого кадра до 300 мс на слабых устройствах.

Из-за чрезмерной осторожности в предыдущих релизах Flutter заблокировал платформенные потоки при создании платформенных View. Тщательная проверка и тестирование установили, что некоторая часть сериализации может быть удалена, что уменьшило на 100 мс задержку во время запуска Google Pay на слабых устройствах.

Ранее запуск стандартного менеджера шрифтов создавал искусственную задержку при запуске основного изолята Dart. Задержка запуска стандартного менеджера шрифтов вместе с основным изолятом Dart уменьшилась, что привело к улучшению оптимизации.

Flutter-разработчики, использующие устройства с ограниченным объемом памяти, сталкивались с проблемой отслеживания производительности, пока Flutter загружал сервисный изолят Dart VM, чей AOT-код связан с приложением так, что SDK считывал память обоих сразу. Для Android в релизе 2.8. сервисный изолят Dart VM’а был отделён в собственный пакет, который можно загрузить отдельно. Это привело к экономии памяти до 40 МБ. Ещё на 10% объем памяти удалось снизить благодаря информированию ОС Dart VM’ом о том, что страницы, используемые программой AOT, поддерживаются файлом, который скорее всего больше не понадобится к прочтению. Таким образом, страницы, которые держали копии с резервной информацией, могут быть использованы для других целей.

Иногда разработчикам необходимо посмотреть данные производительности приложения Flutter наряду с нативными от Android. Причем часто такие данные требуется для просмотра в релизных сборках, чтобы иметь общее представление о проблемах производительности в выпущенных приложениях. Для этого Flutter 2.8 теперь отправляет события трассировки в ASR (Android Systrace Recorder), при условии, что эта функция включена. Эта функция работает даже в релизных сборках.

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

Для решения проблем с производительностью в этот релиз DevTools была добавлена новая функцию «улучшение трассировки» (Enhance Tracing). Она помогает диагностировать проблемы c интерфейсом, связанные с операциями сборки, компоновки и рендеринга.

Когда какая-либо из этих функций трассировки включена, временная шкала включает новые события для созданных виджетов, визуализирует размещенные объекты и визуализирует окрашенные объекты, в зависимости от ситуации.

Кроме того, этот релиз DevTools добавляет новую поддержку для профилирования производительности запуска вашего приложения. Этот профиль содержит образцы CPU с начала инициализации Dart VM ровно до момента отрисовки первого кадра Flutter. После того, как вы нажали кнопку «запуск профиля приложения» (profile app start up), и профиль запуска приложения загрузился, вы увидите, что был выбран пользовательский тэг «AppStartUp». Вы также можете загрузить профиль запуска приложения через фильтр доступных пользовательских тэгов. Выбор этого тэга покажет данные вашего профиля по запуску вашего приложения.

Android и iOS – не единственные платформы, получившие улучшение производительности. Этот релиз также улучшает производительность Platform View для Flutter Web. Platform View – это способ, через который Flutter позволяет вам использовать нативные компоненты UI с выбранной вами платформы приложения. Flutter Web внедряет это с помощью виджета HtmlElementView, что позволяет вам использовать HTML-элементы в вашем веб-приложении Flutter. Если вы используете веб-версии плагина google_maps_flutter или video_player, или вы следуете совету команды Flutter об оптимизации отображения изображений в веб, тогда используйте platform views.

В предыдущих версиях Flutter запуск Platform View создавал новый холст, и при каждом новом создании формировался другой холст. Создание нового холста – дорогостоящая операция из-за своих размеров. В Flutter 2.8 реализован механизм повторного использования холста, созданного для предыдущего Platform View, так что вместо возросших в 60 раз затрат на отрисовку при создании нового холста, вам достаточно переиспользовать старый. Это означает, что у вас может быть несколько экземпляров для использования HtmlElementView в ваших веб-приложениях без видимого упадка производительности и с меньшими задержками при прокрутке, когда используется Platform View.

Flutter – это не просто фреймворк, движок и инструменты. На pub.dev существует более 20 тысяч совместимых с Flutter пакетов и плагинов, и каждый день их становится все больше. Значительная часть того, с чем повседневно взаимодействуют Flutter-разработчики, – часть большой экосистемы. Далее посмотрим, что изменилось в экосистеме Flutter с предыдущего релиза.

Первое и самое важное – выход Google Mobile SDK для Flutter в ноябре.

Этот релиз включает 5 рекламных форматов, интегрирует поддержку AdMob и Ad Manager, и включает mediation feature, чтобы помочь оптимизировать производительность рекламы. Для того, чтобы получить больше информации об интеграции рекламы Google в ваше Flutter-приложение, а также о других опциях монетизации, посмотрите правила монетизации на flutter.dev.

Еще одно нововведение, которое добавляет обновленный SDK, это обновление плагина webview_flutter до версии 3.0. Число версии стало на порядок выше из-за ряда новых функции, a также из-за потенциально серьезных изменений в том, как работают webview на Android. В предыдущих версиях webview_flutter, режим гибридной композиции был доступен, но не использован по умолчанию. Гибридная композиция исправляет часть проблем, которые были у предыдущих режимов виртуальных дисплеев. Базируясь на обратной связи от пользователей и отслеживании issue, теперь гибридная композиция становится режимом по умолчанию. Более того, webview_flutter также добавляет еще несколько функций:

Также в релизе 3.0, webview_flutter предлагает предварительную поддержку для Flutter Web. Многие разработчики просили о возможности использовать webview с веб-приложением на Flutter, что позволило бы писать приложение для мобильных устройств или интернет-страниц на одной кодовой базе. Как выглядит использование webview в веб-приложении Flutter? С перспективы кода, всё выглядит точно также:

Текущая реализация webview_flutter имеет некоторые ограничения из-за того, что оно построено с использованием iframe, которое поддерживает только простые URL-загрузки и не может контролировать или взаимодействовать с загруженным контентом (README к webview_flutter_web). Однако webview_flutter_web остается доступным из-за роста популярности как на неподтвержденный плагин и не входит во Flutter SDK. Если хотите попробовать, просто добавьте следующие строки в ваш pubspec.yaml:

Если вы не использовали webview ранее или желали бы освежить знания, разработчики рекомендуют попробовать новый webview codelab, который пошагово объяснит процесс использования веб-контента в вашем Flutter-приложении.

Комитет экосистемы Flutter вновь собрался, чтобы определить какие пакеты станут Flutter Favorites, среди них:

И еще несколько отличных пакетов для графического интерфейса: flex_color_scheme, flutter_svg, feedback, toggle_switch и auto_size_text.

Если вы автор пакета, вам нужно выбрать, какую платформу вы собираетесь поддерживать. Если вы создаете плагин со специфичным для платформы нативным кодом, вы можете это делать, используя pluginClass свойство в pubspec.yaml вашего проекта, которое указывает на нативный класс, предлагающий функциональные возможности:

Однако по мере того, как Dart FFI становится более зрелым, можно на 100% реализовать функциональность, зависящую от платформы в Dart, как это делает пакет path_provider_windows. Если у вас нет собственного класса для использования, но вы все равно хотите указать, что ваш пакет поддерживает только определенные платформы, используйте dartPluginClass вместо этого свойства:

С этим параметром вы можете назначить пакет как поддерживающий только определенные платформы, даже если не используете нативный код. Вы также должны указать класс плагинов Dart. Узнать больше можно в документах реализации платформы только для Dart на flutter.dev.

Другая большая часть экосистемы Flutter – FlutterFire, который используется в 2/3 всех Flutter-приложений. Этот релиз добавляет набор новых функций, которые упрощают построение приложений с использованием Flutter и Firebase:

Почти вcе плагины FlutterFire были переведены из бета-версий в стабильные выпуски.

Переведенные в стабильные версии плагины для Android, iOS и Web включают Analytics, Dynamic Links, In-App Messaging, Performance Monitoring, Realtime Database, Remote Config и Installations. Плагин App Check и поддержка платформы macOS остаются в бета-версии из-за самих библиотек Firebase, которые также в бете. Если вы беспокоитесь о том, выбрать ли Realtime Database, Analyrics или Remote Config, потому что библиотеки FlutterFire не готовы для работы, больше не беспокойтесь. Они теперь полностью поддерживаемые для работы плагины.

С тем, как пакеты продвинулись в версиях, разработчики добавили возможность инициализировать Firebase на любой поддерживаемой платформе от Dart:

Этот код инициализирует приложение Firebase, используя опции, подходящие для каждой из поддерживаемых платформ. Это определено в файле firebase_options.dart, который содержит структуры данных для каждой платформы, которые выглядят так:

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

Этот инструмент просматривает данные конкретной платформы, чтобы найти уникальный идентификатор пакета. Затем использует его для поиска сведений о проекте Firebase для соответствующих приложений конкретной платформы, даже для создания нового проекта Firebase и/или новых приложений для конкретной платформы, если таковых нет. Это означает, что больше не нужно загружать или добавлять json файл в свой проект Android, plist файл в свои проекты iOS и macOS, вставлять код в свой веб-проект index.html. Независимо от того, на какую поддерживаемую платформу Firebase вы ориентируетесь, этот единственный фрагмент кода Dart инициализирует Firebase для вашего приложения. Обратите внимание, что это может быть не единственная инициализация, которую вам нужно выполнить, чтобы ваше приложение FlutterFire заработало. Например, вы можете захотеть интегрировать создание символов Crashlytics в сборку Android или сборку iOS, но оно должно быть запущено в считанные минуты с любым новым проектом Firebase.

С помощью инициализации FlutterFire теперь вы можете использовать Firebase в DartPad.

Этот пример демонстрирует небольшое чат-приложение с использованием Flutter, Firebase и DartPad, которое вы можете использовать прямо сейчас без установки. Сегодня Firebase-поддержка DartPad’а уже включает ключевые API, Authentication и Firestore. Разработчики анонсируют появление большего числа Firebase-сервисов в DartPad.

Другая вещь, которая становится возможной с поддержкой FlutterFire в DartPad – это способность использовать встроенные варианты DartPad прямо в документах.

В этом примере вы видите документы Cloud Firestore с кодом для примера приложения, которое вы можете запустить и редактировать прямо в вашем браузере без установки, создать тест-проект или даже копировать/вставлять код.

При интеграции Firebase в приложение большинство приложений включают метод аутентификации. Это включает возможность пользователям входить через электронную почту и пароль или с социальным провайдером аутентификации вроде того, что предлагает Google. Аутентификация Firebase также позволяет создавать новые аккаунты с ходу, подтверждать адреса электронной почты, перезапускать пароли и даже может включать двухступенчатую аутентификацию через SMS, вход через мобильный номер или даже слияние нескольких пользовательских профилей в один. Аутентификация Firebase поддерживает весь этот функционал, но разработчики были ответственны за реализацию UI.

В этом релизе Google анонсирует, что пакет flutterfire_ui может создавать базовый макет аутентификации с минимумом кода. Как пример, представьте, что у вас есть Email и Google аутентификация в вашем проекте Firebase:

С помощью этой конфигурации вы можете запустить проверку подлинности следующим образом:

Здесь инициализируется Firebase и, если пользователь ещё не вошёл в систему, показывается экран входа. Виджет SigninScreen имеет конфигурацию, включающую Email и Google методы аутентификации. Код также наблюдает за статусом аутентификации пользователя с использованием пакета firebase_auth, так что как только пользователь войдёт, вы можете отобразить остальное приложение. С помощью этого кода вы можете построить работающую систему входа на всех платформах, поддерживаемых Firebase: Android, iOS, Web и macOS.

Немного изменив конфигурацию, вы можете легко добавить изображение и некоторый пользовательский текст (подробности доступны в документах), что обеспечивает полнофункциональный вход в систему:

Этот скриншот показывает мобильную версию, но поскольку экраны flutterfire_ui адаптированы для разных экранов, то на Desktop версии, можно увидеть следующее:

Если у пользователя уже есть электронная почта/пароль, он может сразу войти в систему. Если пользователь входит через аутентификацию Google, ему покажут обычный порядок Google-аутентификации вне зависимости от того, находится ли он на мобильном устройстве, вебе или десктопе. Если у него ещё нет аккаунта, он может нажать на кнопку на экране входа и перейти к экрану регистрации. Как только пользователь вошёл или зарегистрировался, есть процедуры для подтверждения адреса электронной почты, сброса пароля, выхода из системы и привязки учетной записи к социальной аутентификации. Вход через почту работает на всех платформах вместе с поддержкой социальной аутентификации для Google, Facebook и Twitter, с частичной поддержкой Apple (не работает на Android). Поддержка аутентификации в flutterfire_ui поддерживает ряд сценариев и схем навигации, а также параметры настройки и локализации. Посмотрите детализированные документы и примеры в документах firebase.flutter.dev.

Подробности по аутентификации, просмотру листов и таблиц данных, советуют посмотреть в документах flutterfire_ui. Так как это предварительный релиз, запланированы дополнительные функции. Если есть вопрос или реквест функции, рекомендуют обратиться на GitHub, чтобы указать проблемы или спросить вопросы в разделе обсуждения.

И последнее, но не менее важное: одна новая функция интеграции между Firebase и Flutter: альфа-версия средства отображения объектов/документов Firestore. ODM Firestore направлен на то, чтобы помочь разработчикам Flutter быть более продуктивными, упрощая использование Firestore с помощью знакомых типобезопасных структурированных объектов и методов. Используя генерацию кода, Firestore ODM улучшает синтаксис для взаимодействия с документами и коллекциями, позволяя моделировать данные безопасным для типов способом:

Когда эти типы на установлены, вы можете выполнять типобезопасные запросы:

ODM также поддерживает определение сильно типизированных вложенных коллекций и предлагает встроенные опции оптимизации перестроек виджетов с помощью функцией select. Подробнее – в документах Firestore ODM.

Релиз Flutter 2.8 включает ещё один большой шаг на пути к стабильному выпуску для Windows, macOS и Linux. Планка качества высока, включая поддержку интернациональности и локализации, как недавно запустились поддержка китайского IME, поддержка корейского IME и поддержка кандзи IME. Или как плотная интеграция, встроенная в поддержку доступности Windows. Для Flutter недостаточно работать на десктопе по стабильному каналу (что он уже делает в бета-статусе), ему нужно работать хорошо для множества мировых языков и культур для людей самых различных способностей. Он не совсем там, куда мы стремимся, но он в пути!

Один из примеров проходящей работы по подготовке десктопа к стабильному выпуску – полная ре-архитектура того, как Flutter воспринимает события клавиатуры, чтобы позволить ему реагировать синхронно. Это позволяет виджету обрабатывать нажатие клавиши и отменять его распространение по остальной части дерева Первоначальная работа, совершенная в Flutter 2.5 и в Flutter 2.8 добавляет правки проблем и регрессиям, приближая к стабильному выпуску. Это в дополнение к проходящей работе переработки того, как мы справляемся с уникальным для устройства вводом с клавиатуры и рефактором того, как Flutter справляется с редактированием текста – всё это необходимо для настольных приложений с интенсивным вводом с клавиатуры.

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

Команда Flutter – не единственные, кто работают над десктоп-Flutter. В качестве одного примера, десктоп-команда Canonical работает с Invertase над адаптацией под Linux и Windows самых популярных плагинов Firebase для Flutter. О превью релиза в блоге Invertase.

Релиз Flutter не мог бы быть полным без взгляда на улучшение инструментария. Самым большим улучшением в DartPad является поддержка большего числа пакетов. Действительно, возможно импортировать 23 пакета. В дополнение к нескольким сервисам Firebase это включает такие популярные пакеты как bloc, characters, collection, google_fonts и flutter_riverpod. Команда DartPad продолжает добавлять новые пакеты. Если вы хотите увидеть, какие пакеты сейчас поддерживаются, кликните на информационную иконку в нижнем правом углу.

Чтобы узнать планы о добавлении со временем новых пакетов в DartPad, посмотрите эту статью на Dart-вики.

Есть другая новая функция DartPad, которая тоже очень удобна. Ранее DartPad всегда запускал самый последний стабильный выпуск. С этим релизом можно выбрать последний канал бета-релизов, а также предыдущий стабильный выпуск (называемый «старым каналом») используя меню «Новый канал» в строке состояния.

«Канал» Flutter управляет тем, как часто Flutter обновляется на вашем устройстве, где stable представляет меньшее количество обновлений а master – большее. Из-за ресурсных ограничений, разработчики Flutter недавно перестали обновлять канал dev. По их словам, они обнаружили, что менее, чем 3% Flutter-разработчиков используют канал dev.

Вы можете определить, какой канал вы предпочитаете, используя flutter channel. Вот, чтокоманда Flutter думает о каждом из каналов:

Разработчики Flutter стремятся снизить число критических изменений в каждом релизе. В этом релизе Flutter 2.8 свободен от критических изменений, за исключением устаревших API, которые устарели и были убраны в соответствии с политикой критических изменений.

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

Источник – блог Flutter на Meduim