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

3 марта международное Flutter-сообщество смотрело презентацию Flutter Engage, где представили Flutter 2. Стабильная поддержка на web, поддержка dart 2.12, создание и запуск рекламы, обновленный DevTools, Flutter Fix и новые виджеты. Подробнее в статье.

Image: Google
Image: Google
  • На Flutter можно разрабатывать для Web, Desktop, embedded и мобильных устройств.
  • Показан пример приложения, которое работает на всех платформах – Flutter Folio.
  • Уже опубликовано более 150 000 приложений на Flutter.

Web

Стабильная версия

Поддержка Flutter для Web перешла с бета-версии в стабильный релиз. Теперь Flutter, по уверению Google, также фреймворк для создания многофункциональных интерактивных веб-приложений. Посмотрим захватит ли теперь Flutter мир веб-разработки?:)

Кейс web-приложения на Flutter от оператора мобильной виртуальной сети Moi Mobiili Image: Google
Кейс web-приложения на Flutter от оператора мобильной виртуальной сети Moi Mobiili Image: Google

В первую очередь Google сосредоточился на производительности и улучшении точности рендеринга. В дополнение к модулю визуализации HTML, добавлен новый модуль визуализации на основе CanvasKit. Также добавлены специальные веб-функции, такие как виджет «Ссылка», чтобы приложение, работающее в браузере, выглядело как веб-приложение.

Вот тут и тут можно посмотреть пример создания веб-приложения.

Sound null safety

Долгожданное обновление – Sound null safety для Dart

Sound Null Safety – существенное дополнение к языку Dart, которое еще больше усиливает систему типов, отделяя типы, допускающие значение NULL, от типов, не допускающих значения NULL. Это позволяет разработчикам предотвращать сбои во время выполнения – частую причину сбоев приложений. Благодаря включению проверок в систему типов эти ошибки могут быть обнаружены во время разработки. Null safety полностью поддерживается в стабильной версии Flutter 2, которая содержит Dart 2.12.

В репозитории пакетов pub.dev уже опубликовано более 1000 null safety пакетов, в том числе сотни пакетов от команд Dart, Flutter, Firebase и Material.

Подробнее тут.

Flutter Desktop

Теперь разработчики могут опробовать Flutter Desktop

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

Были добавлены следующие изменения:

  • Улучшена работа с текстом, чтобы она была такой же, как и на всех поддерживаемых платформах: выделения, перетаскивания, взаимодействие с клавиатурой и мышью. Например перетаскивания мышью теперь начинается немедленно, вместо ожидания задержки, необходимой при обработке сенсорного ввода.
  • Было добавлено контекстное меню в виджеты TextField и TextFormField.
  • В виджет ReorderableListView были добавлены ручки захвата для возможности перемещения элементов списка, без ожидания долгого нажатия.
ReorderableListView теперь имеет ручки для удобного перетаскивания мышью. Image:  Google
  • Обновлена полоса прокрутки, которая отображается правильно для форм-фактора рабочего стола.
  • Реализованы интерактивные функции, которые ожидаются на рабочем столе, в том числе возможность перетаскивать ползунок, щелкать дорожку для перехода на страницу вверх и вниз, а также отображать дорожку при наведении курсора мыши на любую часть экрана.
  • Добавлен класс ScrollbarTheme с помощью которого можно настроить ее внешний вид. Работа с дополнительными функциями ПК: например, двойной щелчок по файлу данных в проводнике Windows для открытия файла в приложении.
  • Улучшена работа с изменением размера – теперь оно более плавное как Windows, так и для macOS.
  • Обновлена документация, в которой описано, что необходимо сделать, чтобы начать разработку под Desktop.

Платформенные адаптивные приложения: Flutter Folio

Пример приложения, хорошо работающего независимо от размера экрана и способа ввода

Flutter поддерживает три платформы для продакшн приложений (Android, iOS и Интернет) и еще три в бета-версии (Windows, macOS и Linux). Чтобы создавать адаптированные приложения, хорошо отображаемые на маленьких, средних и больших экранах, создали Flutter Folio.

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

Image: Google

Мобильная реклама с помощью Google Mobile Ads

Бета-версия Google Mobile Ads SDK для Flutter

Появилась бета-версия Google Mobile Ads SDK для Flutter. Это новый плагин, который предоставляет встроенные баннеры и нативную рекламу в дополнение к существующим форматам оверлеев (оверлейные баннеры, межстраничные объявления). Этот плагин объединяет поддержку AdManager и Admob и позволяет создавать различные форматы рекламы в приложениях Flutter.

Image: Google
Image: Google

Разработчики говорят, что уже тестировали этот формат. Например, латиноамериканская музыкальная платформа для независимых исполнителей Sua Musica (более 15 тысяч исполнителей и 10 миллионов MAU) запустила свое новое приложение на Flutter с плагином Google Mobile Ads SDK для Flutter. Количество показов увеличилось на 350%, CTR – на 43%, а эффективная цена за тысячу показов – на 13%.

На flutter.dev создана страница рекламы, где можно найти все полезные ресурсы, такие как руководство по внедрению плагина, кодовая таблица встроенных баннеров и нативной рекламы, кодовую таблицу оверлейных баннеров, межстраничных объявлений и видеорекламы с вознаграждением.

Новые возможности iOS

178 улучшений

Среди них:

  • Работа с восстановлением состояния.
  • Cоздание IPA непосредственно из командной строки без открытия Xcode.
  • Обновление версии CocoaPods.
  • Новые виджеты для iOS.

AutocompleteCore и Scaffold Messenger

Новые виджеты

В Flutter 2 появилось два дополнительных новых виджета: AutocompleteCore и ScaffoldMessenger.

AutocompleteCore – это автодополнение в поисковой строке, которое выводится в качестве выпадающего окна с предложениями.

ScaffoldMessenger был создан для решения ряда проблем и упрощения работы со SnackBar. Теперь SnackBar сохраняет свое состояние при переходе между различными Scaffold и остается на экране.

AutocompleteCore и ScaffoldMessenger могут показаться минорными обновлениями. Но думаем, что все, кто работал с Flutter и пытался реализовать Autocomplete самостоятельно, поймут всю их прелесть. ScaffoldMessenger, наверное следовало бы сделать с самого начала. Потому что работа со snackbar, которая была реализована через Scaffold, вызывала много вопросов.

Добавление нескольких Flutter модулей в существующие нативные приложения

Добавление функции Add-to-App

Функция Add-to-App – отличный способ повторно использовать код Flutter на обеих мобильных платформах, сохраняя при этом существующую базу нативного кода. Переплетение Flutter и собственных экранов затрудняет поддержку состояний навигации, а интеграция нескольких Flutter моделей требует много памяти.

Во Flutter 2 снижена стоимость статической памяти для создания дополнительных модулей Flutter на ~ 99% до ~ 180 КБ на экземпляр.

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

Flutter Fix

Инструмент командной строки, который позволяет заменять устаревшие API в кодовой базе проекта

Чтобы не мешать более, чем 500 000 разработчикам и избежать нарушения растущего числа строк кода с внесением изменений в API инфраструктуры, придумали Flutter Fix. По уверению Google, Flutter Fix находит все устаревшие методы и переменные и помогает обновить их.

Flutter Fix – это комбинация нескольких вещей. Во-первых, есть новый параметр командной строки для инструмента командной строки dart, называемый dart fix. Он знает, где искать список устаревших API и как обновлять код с помощью этих API. Во-вторых, это сам список доступных исправлений, который входит в комплект Flutter SDK, начиная с версии 2. И, наконец, это обновленный набор расширений Flutter для IDE VS Code, IntelliJ и Android Studio, которые знают, как раскрыть то же самое.

Flutter DevTools

Обновление и новые фичи

DevTools – это инструмент, который следует использовать для отладки приложений Flutter, в новой версии его переименовали в Flutter DevTools и добавили следующие фичи:

  • Уведомления в IDE со ссылками на проблемы (раньше было только в командной строке).
  • Просмотр изображений в высоком разрешении для контроля использования памяти.
  • Улучшена работа с макетами во Flutter Inspector.
  • Добавлена информация о среднем FPS и улучшено удобство использования в диаграмму кадров Flutter.
  • Вызов неудачных сетевых запросов в профилировщике сети с красными метками ошибок.
  • Новые диаграммы просмотра памяти стали быстрее, меньше и проще в использовании, включая новую карту для описания активности в определенное время.
  • Добавлен поиск и фильтрация во вкладку Logging.
  • Представление «Производительность» переименовано в «Профилировщик ЦП», чтобы было более понятно, какие функции он предоставляет.
  • Добавлена временная сетка в диаграммы пламени CPU Profiler.
  • Представление «Временная шкала» переименовано в «Производительность», чтобы было более понятно, какие функции оно предоставляет.

Расширение Android Studio / IntelliJ

Плагин Flutter для семейства IDE IntelliJ также получил ряд новых функций для Flutter 2. Для начала есть мастер нового проекта, который соответствует новому стилю мастера в IntelliJ.

7979
23 комментария
20
Ответить

Кто-то реально пересобрал свой проект под web, чтобы оценить, насколько все стало лучше? А то по комментам на ycombinator.com далеко все не радужно.

4
Ответить

Да, я пробовал.Сразу упали плагины filebase.Попробовал.Откатился назад.Надо подождать пока все свои пакеты обновят .Думаю еще 2 месяца ждать прийдется.Слишком много у флатера завязано на внешних плагинах а их обновлять надо при использовании последней версии

Ответить

довольно неплохо получилось, особенно учитывая количество усилий - https://beta.meows.app/ , сейчас буду переписывать навигацию на использование  https://pub.dev/packages/navme , чтобы url работали)

Ответить

"Мы сделали фреймворк, который отлично работает на всех платформах"

Заглавное приложение этого анонса Flutter Folio в мобильном вебе:

4
Ответить

Главная интрига - добавят ли поддержку телевизоров. Ну, и я все еще надеюсь, что Apple со Swift и Swift UI расчехлится.

1
Ответить

Да свифт уже всё, прошлый век. Флаттер по сравнению с ним - небо и земля.

1
Ответить