Friflex_dev 7 авг в 18:29

Flutter 3.24: что нового

Простой

8 мин

Перевод

Предварительный просмотр Flutter GPU для продвинутой графики и 3D, поддержка Multi-View Embedding в веб-приложениях, монетизация видеорекламы.

Команда Flutter-разработчиков Friflex делится переводом официального релиза новой версии фреймворка.

Flutter

Новые слайверы (slivers)

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

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

Новые слайверы похожи на прежние, SliverPersistentHeader и SliverAppBar, но у них более простые API.

У новых слайверов новый образец кода. В документации API PinnedHeaderSliver есть пример, который воссоздает эффекты, как в панели приложений «Настройки iOS».

Обновление Cupertino library

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

Добавили новые свойства для работы с фокусом для CupertinoButton (focusNode, focusColor, onFocusChange, autofocus). Также теперь можно настроить цвет отключенного CupertinoTextField.

TreeView

У пакета two_dimensional_scrollables появился виджет TreeView вместе с несколькими вспомогательными классами, которые позволяют создавать высокопроизводительные скользящие деревья (performant scrolling trees). Они по мере роста могут прокручиваться во всех направлениях. В обновлении есть несколько примеров, как использовать виджеты TableView и TreeView.

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

CarouselView

В обновлении появился CarouselView — виджет для Material Design carousel. Он представляет собой Бесконечный список элементов: список элементов, который можно прокрутить до края контейнера. Крайние элементы могут динамически менять размер при прокрутке.

Другие возможности виджетов

Перенесли из 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 используют новые жесты по умолчанию.

Тройной клик

Тройной щелчок + перетаскивание: расширяет выделение в блоках абзаца.
Тройной щелчок: выбирает блок абзаца в позиции касания.

Двойное касание

Двойное касание + перетаскивание: расширяет выделение в блоках слов. Поддерживается на нативных Android/Fuchsia/iOS и iOS web.
Двойное касание: выбирает слово в позиции касания. Поддерживается на нативных Android/Fuchsia/iOS и Android/Fuchsia web.

Engine

Повышение производительности и точности

Мы все еще ждем, когда в стабильной версии удалят опцию «Отказаться от использования Impeller на iOS». А пока команда усердно работала над улучшением производительности и точности Impeller. Например, в рендеринге текста выросла производительность прокрутки эмодзи. Для этого при прокрутке большой коллекции эмодзи устранили задержки, что стало отличным стресс-тестом возможностей рендеринга текста Impeller.

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

Предварительный просмотр 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), который в основном поддерживает форматы дисплейной рекламы.

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

Преимущества 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.

Исправили критические ошибки в Network profiler и Flutter Deep Links tool и внесли общие улучшения. Теперь можно использовать все инструменты DevTools прямо внутри IDE.

Улучшили боковую панель Flutter в VS Code, чтобы сделать доступ к нужным инструментам проще. Обновите до последних версий VS Code и расширений Flutter и Dart.

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

Чтобы узнать больше обо всех обновлениях во Flutter 3.24, ознакомьтесь с примечаниями к релизу DevTools 2.35.0, 2.36.0 и 2.37.2.

Критические изменения и прекращение поддержки

Появились критические изменения в API страниц Navigator, обобщенных типах в PopScope, рендере по умолчанию для Flutter web. Полный список рекомендаций по миграции можно найти на странице с критическими изменениями.

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

P.S. Мы ведем дружелюбный канал про Flutter в Telegram. Присоединяйтесь!

Теги:

Хабы: