Что нового в Flutter 3.24

Hola, Amigos! На связи Павел Гершевич, Mobile Team Lead агентства продуктовой разработки Amiga. В режиме торнадо перевели для вас статью о нововведениях в Flutter 3.24: Flutter GPU, Multi-View Embedding и многое другое. А ещё оставили несколько восторженных комментариев о виджетах, которые так давно ждали!

В этом релизе представлена предварительная версия Flutter GPU, которая позволяет использовать продвинутую графику и 3D-сцены прямо из Flutter. Web-приложения теперь могут встраивать несколько Flutter View, что улучшает их гибкость. А ещё добавлена монетизация с видео рекламой, чтобы получать максимальную выгоду.

Давайте окунемся в новое обновление и изучим все функции и улучшения, которые привнесло Flutter-коммьюнити!

Приходите обсуждать нововведения в Flutter. Много.

Новые Slivers

Эта версия добавляет новые slivers, которые могут быть совмещены для динамического поведения app bar:

Новые slivers помогают сделать плавающие, закрепленные или меняющие размер заголовки при скролле. Новые slivers похожи на существующие SliverPersistentHeader и SliverAppBar, но имеют более простое API, которое можно совмещать для достижения крутых эффектов.

Новые slivers идут вместе с новыми примерами кода. В документацию API PinnedHeaderSliver входит пример, который воссоздает эффект как в app bar приложения Настройки на iOS:

Новые slivers позволят не использовать некоторые библиотеки, а перенести этот функционал на ванильный Flutter. Например, если нам нужны persistent headers.

Обновления в библиотеке Cupertino

В этом обновлении улучшилась точность CupertinoActionSheet. Проведение пальцем по кнопкам листа действий теперь обеспечивает тактильную обратную связь. Размер и жирность шрифта кнопок совпадают с нативными.

Также добавились новые свойства фокуса у CupertinoButton, и еще теперь можно кастомизировать цвет отключенного CupertinoTextField.

Обновление библиотеки Cupertino сейчас в разработке, поэтому больше информации будет в следующих релизах!

В пакет two_dimensional_scrollables добавлен виджет TreeView вместе с несколькими сопутствующими классами для создания производительных деревьев прокрутки, которые могут прокручиваться во всех направлениях по мере роста дерева.

Приложение-пример из пакета тоже было обновлено с добавлением нескольких случаев использования виджетов TableView и TreeView.

Еще был добавлен виджет TreeSliver для создания деревьев в одномерной прокрутке. API TreeView и TreeSliver совпадают, что делает проще их замену друг на друга.

В это обновление включен виджет карусели из Material Design: CarouselView. Он представляет собой «Uncontained» верстку: скроллящийся список элементов, который прокручивается от края контейнера, а предыдущий и следующий элементы могут изменять свой размер динамически, когда они пропадают или появляются на экране.

Этот релиз содержит некоторые работы по перемещению базовой логики виджетов, которые не зависят от дизайна, из библиотеки Material в библиотеку Widgets для более частого использования. Включая:

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

ToggleableStateMixin и ToggleablePainter базовые классы для создания переключаемых виджетов, таких как чекбоксы, switch и радио-кнопки.

Улучшения enum функций для AnimationStatus

Это фантастическое дополнение от члена сообщества @nate-thegrate, улучшения enum функций были добавлены в AnimationStatus, включая геттеры:

isDismissed,
isCompleted,
isRunning,
isForwardOrCompleted.

Некоторые из этих геттеров уже существовали в подклассах Animation, например AnimationController и CurvedAnimation. Теперь все они доступны в подклассах Animation, а также в AnimationStatus. Метод toggle был добавлен в AnimationController для изменения направления анимации.

Обновления в SelectionArea

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

Тройной клик

Тройной клик + перетаскивание: увеличивает выбранную область в параграфе.
Тройной клик: выбирает весь блок параграфа в месте, куда нажали.

Двойное нажатие

Двойное нажатие + перетаскивание: увеличивает область выбранных слов (поддерживается на нативных Android/Fuchsia/iOS и на iOS web).
Двойное нажатие: выделяет слово на месте нажатия (поддерживается на нативных Android/Fuchsia/iOS и на Android/Fuchsia web).

Impeller

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

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

Кроме этого, с решением некоторого числа issues, сильно улучшилась точность рендеринга текста в Impeller. Жирность текста, отступы и кернинг теперь полностью совпадают с прошлым рендерером.

До (пробелы вместо правильного кернинга и светлее, чем необходимая жирность шрифта)

До (неправильные отступы, например, в «vergelijken»)

Увеличился период preview из-за сложностей, вытекающих из бага в Android 14, который влияет на API, используемые Impeller для Platform Views. С тех пор команда Android исправила ошибку, однако в обозримом будущем многие развернутые устройства будут работать под управлением неисправленной версии Android. Работа с такими issues подразумевает дополнительную миграцию API и следовательно дополнительный цикл релиза. Из соображений предосторожности и для того, чтобы убедиться, что Flutter-приложения работают на как можно большем количестве устройств, переносится становление Impeller стандартным рендерером до момента стабильного релиза позже в этом году.

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

Улучшены настройки по умолчанию для уменьшенных изображений

В этом релизе стандартный FilterQuality для изображений изменился с FilterQuality.low на FilterQuality.medium. Когда изображение намного больше места его расположения, FilterQuality.low делает более «пикселизированное» изображение и медленнее отрисовывается, чем FilterQuality.medium. В дальнейшем образуются более подходящие названия для различных уровней FilterQuality.

Предварительная версия Flutter GPU

Это крупное обновление возможностей рендеринга на Flutter с Flutter GPU, доступным в main канале. Этот низкоуровневый графический API позволяет разработчикам создавать кастомные рендереры используя код на Dart и шейдеров GLSL без необходимости написания нативного кода.

Flutter GPU расширяет возможности рендеринга во Flutter, включая продвинутую графику и 3D-сцены. Это требует использование Impeller, что сейчас доступно на iOS, macOS и Android. Flutter GPU нацелен со временем поддерживать все платформы, на которых работает Flutter.

API позволяет полностью контролировать вложения прохода рендеринга, вершинную стадию и данные, которые передаются в GPU. Гибкость необходима для создания сложных решений рендеринга, от 2D анимаций персонажей до комплексных 3D-сцен.

Использование Flutter GPU можно начать, переключившись на main канал и добавив пакет flutter_gpu в проект. В ближайшие месяцы появится больше функциональных возможностей и улучшений стабильности с более высокоуровневыми библиотеками рендеринга, такими как flutter_scene, которые упрощают использование продвинутых функций.

Еще больше подробностей о Flutter GPU в статье. Особенно будет полезно для разработчиков игр или сложной графики.

Встраивание нескольких view

Web-приложения на Flutter могут использовать Multi-view встраивание, что позволяет разработчикам рендерить контент в несколько HTML-элементов одновременно. Эта функция, известная как «embedded mode» или «multi-view», добавляет гибкости в интеграцию Flutter view в существующее web-приложение.

В режиме multi-view, web-приложение на Flutter не отрисовывается сразу же после запуска. Наоборот, оно ждет, пока основное приложение добавит первое «view» при помощи метода addView. Основное приложение может динамически добавлять или убирать такие view, а Flutter соответствующим образом настроит свои виджеты.

Для включения режима multi-view нужно добавить multiViewEnabled: true в метод initializeEngine в файле flutter_bootstrap.js.View могут управляться из JavaScript, добавляя их к нужным HTML-элементам и убирая их, если необходимо. Каждое добавление или удаление view триггерит обновление внутри Flutter, позволяя динамически рендерить контент.

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

Для глубокого погружения в работу с добавлением multi-view в Flutter-приложение можно ознакомиться с документацией.

Поддержка монетизации видео-рекламы

Запущен новый плагин Interactive Media Ads (IMA) для поддержки монетизации потоковой видео-рекламы в мобильных приложениях на Flutter. IMA предоставляет новые возможности поверх существующего плагина Google Mobile Ads, который поддерживает другие форматы рекламы.

Потоковая видео-реклама обычно показывается пользователю в видео-плеере до (preroll), во время (midroll) или после (postroll) просмотра видео. Некоторые потоковые видео-рекламы также имеют возможность пропуска.

Плюсы Flutter IMA:

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

Те же преимущества, что и нативный IMA SDK, включая доступ к премиальному спросу на рекламу Google и соответствие отраслевым стандартам (например, IAB VAST).

Первая версия поддерживает только pre-roll видео-рекламу на Android и iOS. Скоро добавится поддержка midroll рекламы.

Ресурсы: руководство к плагину, приложение-пример, git репозиторий

Поддержка Swift Package Manager

Сейчас Flutter использует CocoaPods для управления нативными зависимостями iOS и macOS.

Flutter 3.24 добавляет раннюю поддержку Swift Package Manager. Это добавляет несколько плюсов, включая:

Доступ к экосистеме пакетов Swift. Flutter плагины смогут использовать развивающуюся экосистему пакетов Swift!
Упрощение установки Flutter. Swift Package Manager встроен в Xcode. В будущем будет не нужно устанавливать Ruby и CocoaPods для использования Flutter для платформ от Apple.

Обновление плагина Shared Preferences

Добавлено 2 новых API в плагин shared_preferences, SharedPreferencesAsync и SharedPreferencesWithCache. Самое главное изменение: на Android теперь используется Preferences DataStore вместо Shared Preferences.

SharedPreferencesAsync позволяет пользователям вызывать платформенный код сразу же для доступа к данным, хранящимся на устройстве асинхронно, что немного медленнее, чем использование кешированной версии. Это полезно для preferences, которые могут быть обновлены другими системами или изолятами, что делает кеш устаревшим.

SharedPreferencesWithCache работает поверх SharedPreferencesAsync и позволяет получить доступ к локальной копии preferences синхронно. Это аналогично старому API, но теперь может быть инициализировано несколько раз с разными параметрами.

Новые API призваны заменить текущий API SharedPreferences в будущем, хотя это один из наиболее используемых плагинов в экосистеме.

DevTools и IDE

В релиз вошли некоторые интересные улучшения набора инструментов Flutter DevTools.

Новая функция Rebuild Stats поможет получить информацию о том, сколько раз виджет собирался в приложении на определенном Flutter frame.

Скриншот инструмента DevTools Performance с отслеживанием статистики перерисовок

Исправлена работа и критические баги в таких инструментах, как Network Profiler и Flutter Deep Links tool. К тому же, можно использовать любой инструмент DevTools непосредственно внутри IDE.

Экран DevTools открытый внутри Android Studio

Внедрены улучшения в Flutter Sidebar в VS Code для легкого доступа к нужным инструментом. Доступ к новому Sidebar появится при обновлении до последних версий VS Code и расширений Dart и Flutter.

Flutter Sidebar адаптивна и масштабируется в соответствии с вашим рабочим пространством

Несколько крупных улучшений произошло в фреймворке DevTools Extensions. Теперь можно использовать расширения DevTools (инструменты, предоставляемые одной из зависимостей пакета) при отладке теста Dart или Flutter или просто при написании кода в IDE.

Больше информации в примечаниях к выпускам DevTools 2.35.0, 2.36.0 и 2.37.2.

К критическим изменениям в этом выпуске относятся изменения API страниц Navigator, generic типы в PopScope, стандартный рендерер Flutter Web и введение некоторых новых устаревших функций. Полный список рекомендаций по миграции можно посмотреть на странице критических изменений.

Полный список дополнений во Flutter 3.24 представлен в примечаниях и журнале изменений.

А Flutter 3.24 и Dart 3.5 доступны в stable канале. Всем хорошего кода!

Перевод подготовила команда мобильных разработчиков Amiga. Больше о Flutter разработке в телеграм-канале Flutter. Много.