![](https://habrastorage.org/getpro/habr/upload_files/994/f8d/75a/994f8d75a5b7bf6e6df51a215e2f8899.jpg)
Предварительный просмотр Flutter GPU для продвинутой графики и 3D, поддержка Multi-View Embedding в веб-приложениях, монетизация видеорекламы.
Команда Flutter-разработчиков Friflex делится переводом официального релиза новой версии фреймворка.
Flutter
Новые слайверы (slivers)
Добавили слайверы, которые можно скомпоновать вместе для динамического поведения панели приложений:
Вы можете использовать новые слайверы, чтобы плавающие заголовки оставались закрепленными или изменяли размер, когда пользователь прокручивает страницу.
Новые слайверы похожи на прежние, SliverPersistentHeader
и SliverAppBar
, но у них более простые API.
У новых слайверов новый образец кода. В документации API PinnedHeaderSliver
есть пример, который воссоздает эффекты, как в панели приложений «Настройки iOS».
![](https://habrastorage.org/getpro/habr/upload_files/8bc/b23/136/8bcb231363806275fae6d76e2aca07bb.gif)
Обновление Cupertino library
Повысили точность CupertinoActionSheet
. Если скользить пальцем по кнопке действия, можно получить тактильную обратную связь. Размер и вес шрифта кнопок теперь соответствует их родным аналогам.
![](https://habrastorage.org/getpro/habr/upload_files/481/88b/325/48188b325d3bb72a2a6f708579a1c1dc.gif)
Добавили новые свойства для работы с фокусом для CupertinoButton
(focusNode
, focusColor
, onFocusChange
, autofocus
). Также теперь можно настроить цвет отключенного CupertinoTextField
.
TreeView
У пакета two_dimensional_scrollables
появился виджет TreeView
вместе с несколькими вспомогательными классами, которые позволяют создавать высокопроизводительные скользящие деревья (performant scrolling trees). Они по мере роста могут прокручиваться во всех направлениях. В обновлении есть несколько примеров, как использовать виджеты TableView
и TreeView
.
![](https://habrastorage.org/getpro/habr/upload_files/947/aa6/1f5/947aa61f580448059efe2e6fd4a1fed0.gif)
Добавили TreeSliver, чтобы строить деревья в одномерной прокрутке. API TreeView
и TreeSliver
совпадают. Переключаться между ними стало проще. Можно выбрать виджет, который подходит для вашего сценария использования.
CarouselView
В обновлении появился CarouselView
— виджет для Material Design carousel. Он представляет собой Бесконечный список элементов: список элементов, который можно прокрутить до края контейнера. Крайние элементы могут динамически менять размер при прокрутке.
![](https://habrastorage.org/getpro/habr/upload_files/db0/be1/0af/db0be10affb853530282043895f0e4d0.gif)
Другие возможности виджетов
Перенесли из Material library в Widgets library следующие виджеты:
Виджет Feedback — обеспечивает легкий доступ к тактильной и звуковой обратной связи от устройства в ответ на жесты, например, нажатие.
ToggleableStateMixin и ToggleablePainter — базовые классы для построения виджетов, таких как
checkboxes
,switches
, иradio buttons
.
Расширенные возможности для AnimationStatus
Благодаря фантастическому вкладу @nate-thegrate, были добавлены расширенные возможности для AnimationStatus:
isDismissed;
isCompleted;
isRunning;
isForwardOrCompleted.
Некоторые из этих получателей уже существуют в подклассах анимации, например, AnimationController и CurvedAnimation. Теперь getters доступны в подклассах анимации в дополнение к AnimationStatus. В AnimationController добавили метод toggle, чтобы можно было переключать направления анимации.
Обновления в SelectionArea
SelectionArea теперь поддерживает больше нативных жестов, которые связаны с тройным кликом мыши и двойным касанием сенсорного устройства. Виджеты SelectionArea и SelectableRegion используют новые жесты по умолчанию.
Тройной клик
Тройной щелчок + перетаскивание: расширяет выделение в блоках абзаца.
Тройной щелчок: выбирает блок абзаца в позиции касания.
![](https://habrastorage.org/getpro/habr/upload_files/73e/bad/210/73ebad21075dbf8e7088f32743c9c933.gif)
Двойное касание
Двойное касание + перетаскивание: расширяет выделение в блоках слов. Поддерживается на нативных Android/Fuchsia/iOS и iOS web.
Двойное касание: выбирает слово в позиции касания. Поддерживается на нативных Android/Fuchsia/iOS и Android/Fuchsia web.
![](https://habrastorage.org/getpro/habr/upload_files/b42/335/4cf/b423354cf7880ddc5b3d9a704a8e127a.gif)
Engine
Повышение производительности и точности
Мы все еще ждем, когда в стабильной версии удалят опцию «Отказаться от использования Impeller на iOS». А пока команда усердно работала над улучшением производительности и точности Impeller. Например, в рендеринге текста выросла производительность прокрутки эмодзи. Для этого при прокрутке большой коллекции эмодзи устранили задержки, что стало отличным стресс-тестом возможностей рендеринга текста Impeller.
Команда улучшила точность рендеринга текста Impeller. В частности, вес текста, интервал и кернинг теперь полностью соответствуют качеству текста, который отображается с помощью устаревшего рендерера.
![До До](https://habrastorage.org/getpro/habr/upload_files/2df/668/f05/2df668f059e8fd350f42049a5c16a873.png)
![ПослДо ПослДо](https://habrastorage.org/getpro/habr/upload_files/767/3da/a71/7673daa7107b9a7371430816b37c6ecb.png)
![После После](https://habrastorage.org/getpro/habr/upload_files/c0a/6b2/65c/c0a6b265c7aa11b51a170460ff963271.png)
![После После](https://habrastorage.org/getpro/habr/upload_files/53c/0e6/850/53c0e6850a702c057a633eacd4d76af9.png)
Предварительный просмотр Android
Предварительный просмотр Impeller на Android был продлен из-за ошибки в Android 14. Она влияет на API, которые Impeller использует для Platform Views. Ошибку исправила команда Android, но в ближайшем будущем многие развернутые устройства будут работать с непропатченной версией Android. Чтобы решить эту проблему, нужна дополнительная миграция API и, следовательно, дополнительный стабильный цикл выпуска. Чтобы Flutter-приложения работали на максимально широком спектре устройств, решили отложить переход Impeller в статус рендерера по умолчанию. Он появился в стабильном релизе позже в этом году.
Улучшенные значения по умолчанию для изображений с пониженным разрешением
Значение FilterQuality
по умолчанию изменено с FilterQuality.low
на FilterQuality.medium
для изображений. Когда они значительно больше своего целевого прямоугольника, что считается нормальным, FilterQuality.low
делает их более пиксельными и замедляет отрисовку. У FilterQuality.medium
таких проблем нет. В дальнейшем команда рассмотрит подходящие названия для разных уровней FilterQuality
.
Предварительный просмотр Flutter GPU
Появилось крупное обновление для возможностей рендеринга с помощью Flutter GPU, который доступен на главном канале. Этот низкоуровневый графический API позволяет создавать пользовательские рендереры при помощи кода Dart и шейдеров GLSL. Нативный код платформы для этого не нужен.
Flutter GPU расширяет возможности рендеринга и обеспечивает улучшенную графику и 3D-сцены. Для этого нужен рендеринг Impeller, который в настоящее время поддерживается на iOS, macOS и Android. В раннем предварительном просмотре Flutter GPU нацелен на поддержку всех платформ Flutter.
API предоставляет полный контроль над привязками рендер-пасса, вершинным этапом и загрузкой данных на GPU. Такая гибкость нужна для создания сложных рендеринговых решений: от 2D-анимаций персонажей до комплексных 3D-сцен.
Чтобы начать работать с Flutter GPU, нужно переключиться на main channel и добавить пакет flutter_gpu в свои проекты.
В ближайшие месяцы планируется реализовать новые функции и улучшить стабильность. А более высокоуровневые библиотеки рендеринга, например, flutter_scene, сделают работу с новыми возможностями проще.
Чтобы глубже погрузиться в Flutter GPU и узнать, как можно его использовать, читайте блог Flutter GPU.
Веб
Многовидовое встраивание (Multi-view embedding)
Веб-приложения на Flutter теперь могут использовать многовидовое встраивание, чтобы одновременно отображать контент в нескольких HTML-элементах. Функция предлагает гибкость для интеграции представлений Flutter в веб-приложения.
В режиме многовидового отображения веб-приложение на Flutter не отображается сразу после запуска. Вместо этого оно ожидает, пока хост-приложение добавит первое View с помощью метода addView. Хост-приложение может динамически добавлять или удалять эти виды, а Flutter, соответственно, настраивает свои виджеты.
Чтобы включить режим многовидового отображения, установите multiViewEnabled: true
в методе initializeEngine
в файле flutter_bootstrap.js
. Видами можно управлять из JavaScript, добавляя их в HTML-элементы и удаляя по мере необходимости. Flutter обновляется после каждого действия с видом, что позволяет динамически отображать контент.
Функция полезна для интеграции Flutter в сложные веб-приложения, где требуется несколько независимых представлений Flutter. Она также поддерживает пользовательские данные инициализации для каждого представления. Разработчики могут настраивать персонализированные конфигурации и интерактивные взаимодействия.
Для более глубокого погружения в тему реализации многовидового встраивания в веб-приложения на Flutter, ознакомьтесь с документацией.
Монетизация
Поддержка монетизации видеорекламы
Новый плагин Interactive Media Ads (IMA) поддерживает монетизацию видеорекламы в мобильных приложениях на Flutter. IMA дополняет плагин Google Mobile Ads (GMA), который в основном поддерживает форматы дисплейной рекламы.
Встраиваемую видеорекламу обычно показывают в видеоплеере до (преролл), во время (мидролл) или после (постролл) воспроизведения контента. Некоторую встраиваемую видеорекламу пользователь может пропускать.
![](https://habrastorage.org/getpro/habr/upload_files/e19/a0d/235/e19a0d235647271ce3a2d903cb75ca86.gif)
Преимущества Flutter IMA
Бесшовная монетизация видеоконтента в приложениях на Flutter. Например, можно показать пользователю 15-секундную рекламу перед началом ролика.
Преимущества нативного SDK IMA. У разработчика будет доступ к премиум-рекламе Google. Плагин соответствует отраслевым стандартам, таким как IAB VAST.
Начальная версия в настоящее время поддерживает преролл-формат на платформах Android и iOS. Скоро будет доступна поддержка мидролл-формата. Если возникнут проблемы при работе плагина IMA, пишите сюда.
Ресурсы: Plugin guide, Sample App, Git Repository.
iOS
Начальная поддержка Swift Package Manager
Flutter использует CocoaPods, чтобы управлять зависимостями нативных приложений на iOS и macOS.
Во Flutter 3.24 появилась начальная поддержка Swift Package Manager, которая предлагает несколько преимуществ:
1. Плагины Flutter смогут использовать экосистему пакетов Swift.
2. Простая установка Flutter. Swift Package Manager входит в состав Xcode. В будущем не нужно будет устанавливать Ruby и CocoaPods, чтобы использовать Flutter для платформы Apple.
Вы можете попробовать добавить поддержку Swift Package Manager в свои плагины и поделиться отзывами здесь.
Экосистема
Обновления плагина Shared Preferences
Добавили два новых API в плагин shared_preferences: SharedPreferencesAsync
и SharedPreferencesWithCache
. Важное изменение — реализация для Android использует Preferences DataStore
вместо Shared Preferences
.
SharedPreferencesAsync
дает возможность напрямую обращаться к платформе, чтобы получить актуальные настройки, сохраненные на устройстве. Этот способ асинхронный и медленный по сравнению с кэшированной версией. Он полезен для настроек, которые могут обновляться другими системами или изолятами.
SharedPreferencesWithCache
построен на основе SharedPreferencesAsync
. Он позволяет пользователям синхронно получать доступ к локально кэшированной копии настроек. SharedPreferencesWithCache
похож на старый API, но теперь его можно создавать несколько раз с разными параметрами.
Новые API предназначены для замены текущего API SharedPreferences
в будущем. SharedPreferences
— один из самых используемых плагинов в экосистеме. Поэтому потребуется время, чтобы перейти на новые API.
Инструменты DevTools и IDE
Если вы когда-либо задумывались, строит ли ваше Flutter-приложение больше виджетов, чем ожидалось, новая функция в DevTools Performance ответит на этот вопрос. С помощью Rebuild Stats можно узнать, сколько раз виджет был построен в приложении или даже в какой кадр Flutter.
![](https://habrastorage.org/getpro/habr/upload_files/d53/c7f/d68/d53c7fd6874cae882dc5641a3ae27a97.png)
Исправили критические ошибки в Network profiler и Flutter Deep Links tool и внесли общие улучшения. Теперь можно использовать все инструменты DevTools прямо внутри IDE.
![](https://habrastorage.org/getpro/habr/upload_files/886/7cc/f54/8867ccf54c1d75b1fd251cc89f14c50b.png)
![](https://habrastorage.org/getpro/habr/upload_files/2b9/111/b96/2b9111b96c469beef41bf2cabc4abec8.png)
Улучшили боковую панель Flutter в VS Code, чтобы сделать доступ к нужным инструментам проще. Обновите до последних версий VS Code и расширений Flutter и Dart.
![](https://habrastorage.org/getpro/habr/upload_files/74f/b00/ea4/74fb00ea49863bf890c906357462f864.gif)
Появились обновления в DevTools Extensions. Теперь вы можете использовать расширения DevTools, когда отлаживаете тесты Dart или Flutter или просто пишете код в IDE. Если вы хотели использовать инструмент (или создать его!) для одной из этих пользовательских задач, теперь это возможно.
Чтобы узнать больше обо всех обновлениях во Flutter 3.24, ознакомьтесь с примечаниями к релизу DevTools 2.35.0, 2.36.0 и 2.37.2.
Критические изменения и прекращение поддержки
Появились критические изменения в API страниц Navigator, обобщенных типах в PopScope, рендере по умолчанию для Flutter web. Полный список рекомендаций по миграции можно найти на странице с критическими изменениями.
Чтобы подробнее ознакомиться с обновлением, читайте примечания к релизу и журнал изменений.
lil_master
С каждым днём Flutter становится удобнее и функциональнее, особенно обрадовала потенциальная свобода от cocoapods, не знаю как вам, ребята, но я пошёл бухать от нововведений) Отличная статья, благодарю!
friflex_dev Автор
Спасибо за отклик, мы стараемся делать переводы быстро и качественно! Тоже заценили обновление и планируем внедрять