Тема Material 3 по умолчанию, предварительное тестирование Impeller для Android, расширения DevTools и многое другое. Flutter Team Lead в Friflex Юрий Петров, автор Youtube-канала «Юрий Петров | Всё об IT», делится первым переводом официального релиза от Google. Давайте посмотрим, что добавили и улучшили во фреймворке за три месяца с момента релиза Flutter 3.13. 

Flutter

Material  3 — по умолчанию

Начиная с версии 3.10 (май 2023), библиотека Material была обновлена в соответствии с последней спецификацией Material Design. Изменения включают новые компоненты и темы компонентов, а также обновленные визуальные эффекты компонентов. До релиза 3.16 применение темы Material 3 было опциональным и устанавливалось через флаг: useMaterial3: true. 

В новой версии использование темы Material 3 установлено по умолчанию (#130764). Вы все еще можете отказаться от версии библиотеки материалов Material 3, указав флаг useMaterial3:false в вашей MaterialApp теме, но имейте в виду, что Material 2 в конечном итоге устареет и будет удален. 

Кроме того, некоторые виджеты нельзя было просто обновить, им требовалась совершенно новая реализация. По этой причине ваш пользовательский интерфейс может выглядеть немного странно, когда вы видите, что он работает, как Material 3. Чтобы исправить это, вручную перейдите на новые виджеты, такие как NavigationBar. С более подробной информацией по Material3 можно познакомиться на GitHub.

Демонстрационное приложение позволит вам опробовать все компоненты. В демоверсии поддерживается переключение на Material 3, так что вы можете сравнивать изменения.

Внешний вид компонентов Material 3 в основном определяется значениями [ThemeData.colorScheme] и [ThemeData.textTheme]. Предпочтительным способом создания цветовой схемы Material 3 является использование метода ColorScheme.fromSeed(). Он создает темные и светлые схемы, которые эстетически приятны, и соответствуют требованиям контрастности для доступности. 

Вы также можете создать цветовую схему на основе доминирующих цветов в изображении с помощью ColorScheme.fromImageProvider. Чтобы дополнительно настроить внешний вид компонентов Material 3, добавьте темы компонентов в свой ThemeData, такие как ThemeData.segmentedButtonTheme or ThemeData.snackBarTheme. Non-null компоненты переопределяют значения по умолчанию, указанные в API документации API.

Поддержка анимации в Material 3

Улучшения в анимации Material 3 включают в себя добавление классов Easing и Durations. Curves Material 2 были переименованы, чтобы включить слово «legacy», и в конечном итоге будут устаревать и удаляться. (#129942) 

Добавление дополнительных опций в меню редактирования

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

TextScaler для указания глобального коэффициента масштабирования текста

Для поддержки функции нелинейного масштабирования шрифта в Android 14, которая помогает людям с нарушениями зрения, новый класс TextScaler заменяет свойство Text.textScaleFactor. (#128522)

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

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

• Одиночный щелчок: установка свернутого выделения в месте щелчка.

• Двойной щелчок: выберите слово в месте щелчка.

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

Длинное нажатие + перетаскивание: расширяет выделение в блоках слов.

Элементы меню, работающие с активным виджетом

В этом обновлении реализована очистка изменений фокуса при использовании элементов меню: функция applyFocusChangesIfNeeded в FocusManager теперь восстанавливает фокус меню. При щелчке пользователя по элементу меню фокус уже будет установлен на элементе, который имел фокус до открытия меню. (#130536)

Анимация MatrixTransition

Новый виджет MatrixTransition позволяет выполнять преобразования при создании анимированных переходов. Основываясь на текущем значении анимации, вы можете предоставить матричное преобразование, которое применяется к дочернему виджету для создания эффектов, подобных показанным на следующем GIF-изображении. (Пример в DartPad). (#131084)

PaintPattern добавлен в flutter_test

В пакете flutter_test был добавлен новый класс PaintPattern, который позволяет проверять вызовы рисования, выполняемые на холсте виджетами, такими как CustomPainters и Decorations (используется в модульных тестах).

Ранее для проверки правильности рисования цвета и прямоугольника требовался «золотой файл», но теперь вы можете использовать PaintPattern. Следующий пример подтверждает, что виджет MyWidget на холсте нарисовал круг:

expect(
  find.byType(MyWidget),
  paints
    ..circle(
      x: 10,
      y: 10,
      radius: 20,
      color: const Color(0xFFF44336),
    ),
);
// Multiple paint calls can even be chained together.
expect(
  find.byType(MyWidget),
  paints
    ..circle(
      x: 10,
      y: 10,
      radius: 20,
      color: const Color(0xFFF44336),
    ),
    ..image(
      image: MyImage,
      x: 20,
      y: 20,
    ),
)

Этот API ранее существовал глубоко в тестовых файлах фреймворка, и команда Flutter заметила: некоторые разработчики нашли его настолько полезным, что скопировали его в свои собственные проекты. Если это относится к вам, то вы можете удалить копию из вашего проекта после обновления до Flutter 3.16.

Обновления в прокрутке

После первоначального выпуска 2D-прокрутки во Flutter 3.13 в этом релизе представлены новые функции и улучшения. Flutter 3.16 теперь поддерживает 2D-виджеты KeepAlive, а также имеет встроенную поддержку фокусного перехода и неявной прокрутки. 2D-виджеты, созданные на этой основе, автоматически получат эту поддержку. Для полного руководства по работе с 2D-прокруткой, ознакомьтесь с последним выпуском Flutter Build Show.

Вскоре после релиза 3.13 был опубликован пакет two_dimensional_scrollables. Этот пакет поддерживается командой Flutter и содержит первый из нескольких виджетов 2D-прокрутки, построенных на основе основе TableView. С момента первого релиза в него была добавлена поддержка оформления и стиля, а также внесены дополнительные исправления ошибок.

Графический движок (Engine)

«Важное нововведенье, начинается новая веха использования Impleller на Android. Мы, как и все сообщество Flutter, надеемся, что Impeller на Android будет работать так же хорошо как и на IOS».

Юрий Петров, Flutter Team Lead, Friflex.

Impeller, Android

В этом релизе команда Flutter рада поделиться информацией о том, что Impeller на Android готов к предварительному тестированию на стабильном канале. С начала этого года команда усердно работала над серверной частью Vulkan для Impeller, и эта предварительная версия включает сбор обратной связи о характеристиках Impeller на устройствах, поддерживающих Vulkan.

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

Разработчики Flutter могут попробовать Impeller на устройствах Android, поддерживающих Vulkan, добавив флаг --enable-impeller при запуске flutter run или следующую настройку в файл AndroidManifest.xml своего проекта под тегом <application>:

<meta-data
 android:name="io.flutter.embedding.android.EnableImpeller"
 android:value="true" />

Для определения поддержки Vulkan на устройстве, Impeller использует тесты, описанные в документации репозитория Impeller. Как правило, Impeller использует серверную часть Vulkan на устройствах, работающих под управлением 64-разрядной ОС на уровне API Android 29 или более новой версии. Пользователи также могут определить, поддерживает ли их устройство Vulkan, следуя советам по проверке поддержки Vulkan.

Несмотря на уверенность в прогрессе, достигнутом на данный момент в разработке серверной части Vulkan Impeller, есть несколько известных проблем в период предварительного тестирования.

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

• Пользовательские шейдеры пока не реализованы.

• Для полного списка известных ошибок и отсутствующих функций наиболее актуальная информация содержится на доске проекта Impeller на GitHub. Многие из этих проблем уже имеют исправления, которые появятся в бета-версии 3.17, поэтому, пожалуйста, попробуйте ее.

Команда Flutter в целом довольна прогрессом в точности и производительности Impeller на устройствах Android, поддерживающих Vulkan, которые они уже опробовали. Однако, по сравнению с iOS, аппаратная экосистема Android намного более разнообразна, и разработчики ожидают более длительный период предварительного тестирования для Android, чем для iOS, перед тем, как сделать его по умолчанию на стабильном канале. 

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

Кроме того, Vulkan Impeller включает дополнительные возможности отладки в debug сборках, превышающие те, что используются с Skia, и эти возможности добавляют дополнительную нагрузку на производительность во время выполнения. Поэтому важно, чтобы обратная связь о производительности Impeller была получена из профильной или релизной сборки и включала временные характеристики из DevTools, а также сравнение со Skia на том же устройстве. 

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

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

Кроме работы над серверной части Vulkan, начиная с этого года, команда также провела ряд улучшений в производительности текста в Impeller, что оказало положительное воздействие как на Android, так и на iOS. В частности были внесены улучшения в управление атласом глифов Impeller и способом распределения нагрузки текстовых задач между пользовательским интерфейсом (UI) и растровыми потоками Engine. В результате этого пользователи заметят уменьшение рывков при работе с текстовой нагрузкой.

Команда также усердно работала над улучшением точности и стабильности как для Android, так и для iOS, особенно учитывая запросы пользователей. В частности, за три месяца этого стабильного цикла выпуска команда внесла 209 коммитов, связанных с Impeller, в репозиторий flutter/engine, закрыла 217 задач, включая 42 сообщения пользователей о проблемах с точностью, стабильностью или производительностью.

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

Чтобы обеспечить более высокую производительность на мобильных устройствах с гетерогенной многопроцессорной обработкой, команда Flutter модифицировала механизм таким образом, чтобы потоки, чувствительные к производительности (потоки пользовательского интерфейса и растровые потоки) имели привязку к более мощным ядрам устройства. 

Разработчики заметили, что это изменение оказало положительное влияние на ряд тестов и устройств. В некоторых случаях улучшение было значительным: время кадра 99% или 90% файла сократилось вдвое или даже больше. Команда ожидает, что после этого изменения пользователи заметят меньше зависаний как при работе с серверными модулями Skia, так и с Impeller на Android. Эффект менее заметен на устройствах iOS, где разница между более мощными и менее мощными ядрами меньше.

Улучшения API и точности воспроизведения

Наложение производительности Impeller

В предыдущих версиях функция оверлея производительности Flutter не отображалась с Impeller. В этом релизе этот недочет устранен. Оверлей производительности теперь корректно отображается при включенном Impeller. Сглаживание теперь отображается корректно.

В этом релизе свойство Paint.enableDithering установлено в true и устарело в соответствии с политикой устаревания Flutter. Теперь сглаживание включено по умолчанию (настраиваемое разработчиком сглаживание больше не поддерживается), и вы больше не увидите проблем с полосами. Для полного объяснения этого изменения и руководства по миграции смотрите страницу об изменениях на docs.flutter.dev.

Игры

Набор инструментов для создания игр на Flutter

За последние несколько лет сильно выросло сообщество разработчиков игр в жанре casual. Десятки тысяч игр были опубликованы с использованием Flutter: от простых, но увлекательных головоломок, до более сложных аркадных игр. Некоторые из наших любимых включают Trivia Crack от Etermax, 4 Pics 1 Word от Lotum (игра на угадывание слов), Brick Mania от Dong Digital (аркадная игра), StopotS от Onrizon, ретроигру в пинбол от Flutter, созданную для I/O, и PUBG Mobile, который использует Flutter в своих социальных сервисах.

Чтобы помочь разработчикам игр стать более продуктивными, Flutter выпускает крупное обновление своего набора инструментов для казуальных игр. Это коллекция новых ресурсов, которые помогут вам перейти от концепции к запуску с помощью более специфичных для жанра шаблонов, таких как карточная игра, бесконечный раннер, а также интеграция сервисов Play Games Services (покупки в приложении, реклама, достижения, отчетность об ошибках и поддержка многопользовательских режимов). Для получения дополнительной информации ознакомьтесь с сообщением о запуске игрового инструментария, написанным Zoey Fan.

Web

События Flutter Timeline в Chrome DevTools

События Flutter Timeline теперь отображаются в разделе производительности Chrome DevTools. (#130132) Чтобы узнать больше, ознакомьтесь с руководством по отладке производительности в веб-приложениях.

Android

Поддержка колесика прокрутки мыши

В ходе оптимизации приложения Wonderous для соответствия рекомендациям Android по использованию больших экранов была выявлена одна проблема: колесико прокрутки мыши плохо работало на планшетах и устройствах с гибкими экранами. Пользователю нужно сделать значительное количество движений колесика прокрутки, чтобы экран начал реагировать. В этом релизе скорость прокрутки с помощью мыши на виджете Flutter соответствует скорости прокрутки на устройствах Android. (#44724)

Предиктивная навигация назад

Релиз Android 14 включил функцию предиктивного жеста назад, которая позволяет использовать жест назад на устройстве для «подглядывания» на домашний экран за текущим экраном. Это обновление вносит предиктивные жесты назад во Flutter. Ознакомьтесь с руководством по миграции.

iOS

Расширения приложений

Теперь Flutter можно использовать для направления на некоторые расширения приложений iOS. Это означает, что вы можете создавать пользовательский интерфейс для определенных типов расширений приложений iOS с использованием виджетов Flutter. Это не работает для всех типов расширений приложений из-за возможных ограничений API (например, виджетов на домашнем экране) или ограничений по памяти.

Узнайте больше и посмотрите пример того, как настроить расширение Share на платформе iOS в документации на сайте docs.flutter.dev.

Экосистема пакетов для Flutter

Новые избранные пакеты во Flutter

Команда Flutter перезагрузила Flutter Favorite. На этот раз комитет экосистемы Flutter выбрал эти пакеты flame, flutter_animate, flutter_rust_bridge, riverpod, video_player, macos_ui и fpdart, как новых Flutter Favorite.

Чтобы предложить пакет или плагин в качестве потенциального будущего Flutter Favorite или задать вопрос комитету, можно отправить электронное письмо на flutter-committee@googlegroups.com.

Облачные стили Google Карт

Платформа Google Карты предлагает возможность настроить стиль вашей карты со помощью страницы «Стили Карт» в Консоли Google Cloud. Это позволяет создавать индивидуализированный пользовательский интерфейс без необходимости обновления кода вашего приложения каждый раз, когда вы вносите изменения в стиль карты.

Чтобы использовать эту функцию во Flutter, вы просто обращаетесь к вашей карте, применяя идентификатор карты, установленный в консоли:

GoogleMap(
       onMapCreated: _onMapCreated,
       initialCameraPosition: const CameraPosition(
         target: _kMapCenter,
         zoom: 7.0,
       ),
       key: _key,
       cloudMapId: _mapId
);

Улучшения Camera X

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

С этим релизом команда Flutter добавила большинство функций, необходимых любому приложению, использующему камеру. CameraX решает многие проблемы, существующие с реализацией Camera 2 в плагине.

Рекомендуется использовать плагин CameraX. Чтобы включить его, добавьте следующую строку в ваш файл pubspec.yaml.

Dependencies:
camera: ^0.10.4 # Or try the latest camera version
camera_android_camerax: ^0.5.0

macOS Видеоплеер

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

Чтобы узнать больше, посмотрите плагин видеоплеера на сайте pub.dev.

DevTools — инструменты разработчика

«Интересное нововведенье, уже сейчас можно легко отслеживать объекты Provider. И я думаю, в дальнейшем такие расширения будут появляться и для других популярных пакетов».

Юрий Петров, Flutter Team Lead, Friflex.

Расширения для DevTools

Новая система расширений для DevTools позволяет авторам пакетов:

• разрабатывать мощные инструменты, использующие существующие фреймворки и утилиты из DevTools;

• создавать специальные инструменты для своих пакетов, которые интегрируются непосредственно в DevTools;

• разработчикам на Dart и Flutter, которые отлаживают приложение с помощью DevTools, получать доступ к инструментам, специфическим для их случаев использования (в зависимости от приложения и предоставляемых расширений для DevTools).

Благодаря авторам пакетов Provider, Drift и Patrol, эта экосистема уже начала развиваться, и вы можете использовать расширения для DevTools для этих пакетов уже сегодня.

Для подробного изучения расширений DevTools ознакомьтесь с объявлением о расширениях DevTools для Dart и Flutter от Кензи Дэвиссона.

Обновления DevTools

Основные моменты для DevTools в этом релизе:

• добавлена поддержка расширений DevTools;

• добавлен новый экран «Главная», который показывает сводку по подключенному приложению.

Другие улучшения включают в себя:

1. Общую производительность.

2. Надежность горячего перезапуска.

3. Поведение выделения текста и копирования.

4. Улучшение просмотра ответов в сетевом профилировщике.

Чтобы узнать больше, ознакомьтесь с примечаниями к релизам DevTools 2.26.1, 2.27.0 и 2.28.1.

Обновление пользовательского интерфейса Flutter-плагина в VS Code

«Мне как разработчику, который использует VSCode для работы, приятно видеть, как развивается Flutter-плагин. Будем пробовать новый функционал».

Юрий Петров, Flutter Team Lead, Friflex.

Благодаря замечательной работе члена сообщества Flutter DanTup расширение Flutter для VS Code теперь имеет боковую панель Flutter, которая предоставляет удобный доступ к:

• открытию экранов Flutter DevTools;

• просмотру активных сессий отладки;

• просмотру доступных устройств;

• созданию новых проектов;

• горячей перезагрузке и перезапуске;

• запуску Flutter Doctor -v;

• и многому другому.

Устаревшие функции и изменения, ломающие совместимость

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

Как всегда, большое спасибо сообществу за вклад в тестирование — это помогает команде определять изменения, ломающие совместимость. Чтобы узнать больше, ознакомьтесь с политикой изменений, ломающих совместимость у Flutter.

В следующем релизе планируется расширить политику устаревания для покрытия пакета flutter_driver в дополнение к уже поддерживаемым пакетам flutter и flutter_test.

Заключение

Команда Flutter упомянула участников в релизе, и это сделано намеренно. Flutter не был бы таким приятным и продуктивным инструментом, каким он является сегодня, без усилий всех участников сообщества.

Ознакомиться с примечаниями к релизу и журналом изменений можно по ссылке.

Flutter 3.16 доступен на стабильном канале сегодня и включает Dart 3.2. Чтобы начать работу с последними обновлениями, необходимо выполнить команду flutter upgrade.

Как вам обновление? Уже планируете переход? Делитесь в комментариях.