Flutter web что нового

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

В новой версии Flutter 3.13 разработчиков ждет 2D-скроллинг, более быстрая графика на Impeller, обновленный Material 3 и Dart 3.1. Мы в Friflex разрабатываем мобильные приложения на Flutter и внимательно следим за новостями — по традиции делимся переводом официального релиза кроссплатформенного фреймворка.

Давайте посмотрим, что добавили и улучшили во фреймворке за три месяца с момента релиза Flutter 3.10.

Что нового в Flutter 3.13:

• Impeller
• Material
• Изменение жизненного цикла приложений
• 2D-скроллинг
• Доступность
• Android
• iOS
• Игры на Flutter
• DevTools
• Изменения и исправления
• Приоритет и сортировка в репозитории Flutter

Внесены улучшения в новый графический движок Impeller и добавлены новые API для складных устройств.

Улучшение производительности на iOS. Благодаря качественным отзывам пользователей Flutter, в этом релизе продолжена работа по улучшению производительности Impeller на iOS. В результате множества различных оптимизаций Impeller теперь не только имеет более низкую задержку (за счет полного устранения jank при компиляции шейдеров), но и в некоторых бенчмарках имеет более высокую среднюю пропускную способность. В частности, в бенчмарке производительности flutter/gallery transitions среднее время растеризации кадров теперь примерно вдвое меньше, чем в Skia.

Улучшено среднее время растеризации кадров в бенчмарке производительности переходов Flutter Gallery на iPhone 11. Временной интервал примерно соответствует периоду с момента выхода версии 3.10 до выхода версии 3.13.

Этот прогресс был достигнут благодаря следующим оптимизациям:

• включено управление грязными участками и частичная перерисовка: flutter/engine#40959
• реализовано одновременное кодирование проходов рендеринга: flutter/engine#42028
• внесены многочисленные улучшения в рендеринг текста: flutter/engine#41290, flutter/engine#41780, flutter/engine#42417
• добавлен быстрый путь для выпуклых фигур, чтобы избежать дорогостоящих вызовов тесселяции: flutter/engine#41834
• начато использование вычислительных шейдеров для некоторых операций: flutter/engine#42192
• добавлена более тщательная очистка операций рисования за пределами границ: flutter/engine#41606

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

Обновление информации о прогрессе в работе над Impeller на Android. Продолжается работа над бэкендом Vulkan для Impeller, однако он еще не достиг того уровня качества, при котором было бы целесообразно проводить официальное предварительное тестирование. Команда Flutter хотят, чтобы первый опыт работы пользователей с Impeller на Android был качественным, а они еще не достигли этого уровня. Они надеются ввести период предварительного просмотра для Impeller на Android в стабильном релизе в конце года. Несмотря на то, что Impeller на Android еще не совсем готов к предварительной версии, бэкенды OpenGL и Vulkan получили преимущества от многих оптимизаций, которые внесли в HAL Impeller за последний год. В частности, среднее время растеризации кадров для Android также значительно улучшилось в бенчмарке производительности переходов flutter/gallery. В настоящее время ведутся дальнейшие работы по улучшению качества предварительного просмотра на Android.

Impeller (и Wonderous) на macOS. В последнем стабильном релизе объявили, что Impeller будет включен по умолчанию для iOS. С тех пор получено множество положительных отзывов от пользователей. Теперь Impeller для macOS доступен в предварительной версии. Можно протестировать Impeller и включить его в своем приложении, следуя инструкциям на странице Impeller.

Лучший способ помочь улучшить Impeller для macOS — это определить базовые показатели, запустив свое приложение для macOS без SkSL warmup и используя DevTools для поиска jank, связанных с компиляцией шейдеров. Затем нужно протестировать приложение с помощью Impeller — пройтись по нему и проверить наличие ошибок, улучшений или регрессий производительности. Если будут замечены какие-либо проблемы, рекомендуют опубликовать их на GitHub. Обязательно нужно указать информацию об устройстве, на котором вы работаете, видеозаписи и экспорт трассировки производительности.

Если хотите попробовать Impeller на macOS, установите Wonderous из Mac App Store.

Новый API движка — улучшена поддержка складных устройств. Для улучшения поддержки складных устройств добавлен новый API для получения различных свойств дисплея. Новый геттер FlutterView.display возвращает объект Display. Объект Display сообщает физический размер, соотношение пикселей устройства и частоту обновления дисплея. Пример использования нового API смотрите в setPreferredOrientations.

Внесены улучшения в фреймворк Material, чтобы:

• повысить адаптивность к платформам
• расширить возможности настройки
• добавить новые возможности

Распознавание символов в TextField. При использовании TextField на iOS пользователи автоматически получают возможность использовать камеру устройства для распознавания символов и вставки их в поле.

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

Теперь при использовании функции AlertDialog.adaptive() отображается виджет CupertinoAlertDialog на iOS и Material AlertDialog на Android.

CupertinoDatePicker с месяцем и годом. Добавляет режим месяц−год в CupertinoDatePicker.

Радиокнопки Cupertino (в стиле iOS), стилизованные под галочку. Свойство useCheckmarkStyle было добавлено в CupertinoRadio. Это также позволяет виджетам Radio.adaptive и RadioListTile.adaptive управлять тем, используют ли они стиль галочки на iOS.

Дополнительные возможности настройки виджетов Material. Было внесено несколько улучшений, облегчающих настройку дизайна виджетов Material:

• Использование свойства error для InputDecoration (в отличие от строки) для настройки виджета ошибок, отображаемых в текстовых полях
• Добавление всплывающих подсказок к ButtonSegment
• Настройка ширины trackOutlineWidth для Switch

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

Бесшовная интеграция веб- и мобильных приложений, революционная графическая производительность благодаря Impeller и многое другое. Мы в Friflex разрабатываем мобильные приложения на Flutter и внимательно следим за новостями — по традиции делимся переводом официального релиза новой версии фреймворка.

Эта версия Flutter работает на невероятном Dart 3, релиз которого тоже вышел на днях. Flutter 3.10 включает множество улучшений для веб, мобильных устройств, графики, безопасности и многого другого. Давайте вместе изучим, что вышло нового в кроссплатформенном фреймворке от Google.

Что нового в Flutter 3.10:

• Фреймворк
• Обновления в TextField
• Поддержка SLSA уровня 1
• Веб-разработка
• Движок
• Производительность
• Улучшения в API
• Мобильная разработка
• DevTools
• Устаревшие и критические изменения

Библиотека Material теперь соответствует последней спецификации Material Design. Изменения включают новые компоненты и темы компонентов, обновленные визуальные эффекты компонентов и многое другое. Разработчики должны «согласиться» на эти изменения, нажав на флажок темы useMaterial3. В следующем стабильном релизе значение useMaterial3 по умолчанию будет равно true.

Чтобы принять версию M3 библиотеки Material, установите useMaterial3: true в вашей теме MaterialApp. Команда flutter create добавит это значение в вашу тему при создании нового приложения.

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

ColorScheme. fromImageProvider()

Все компоненты M3 настраивают цвета по умолчанию в теме ColorScheme. В цветовой схеме по умолчанию используются оттенки фиолетового. Можно создать пользовательскую цветовую схему из одного «начального» цвета или из изображения. Попробуйте оба варианта в демо. Созданные цветовые схемы должны быть доступны и хорошо выглядеть.

NavigationBar

Компонент NavigationBar предоставляет M3-версию виджета BottomNavigationBar. В нем используются другие цвета, подсветка и высота, но он работает так же, как и раньше. Чтобы переопределить внешний вид NavigationBars по умолчанию, используйте виджет NavigationBarTheme. Сейчас не нужно переводить существующие приложения на этот компонент, но вы должны использовать его для новых приложений.

NavigationDrawer

Компонент NavigationDrawer предоставляет виджет выбора пунктов назначения M3, основанный на виджете Drawer. NavigationDrawer отображает список виджетов NavigationDestinations с одним выбором. Можно включить в этот список и другие виджеты. При необходимости NavigationDrawer может прокручиваться. Чтобы переопределить внешний вид виджета NavigationDrawers по умолчанию, используйте виджет NavigationDrawerTheme.

SearchBar and SearchAnchor

Компоненты SearchBar and SearchAnchor предоставляют текст для прогнозирования поисковых запросов. Когда пользователь вводит поисковый запрос, приложение формирует список подходящих ответов в «поисковой выдаче». Пользователь выбирает один из них либо корректирует запрос. Чтобы переопределить дизайн M3 этих компонентов, используйте виджеты SearchBarTheme и SearchAnchorTheme.

Secondary Tab Bar

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

Обновленный DatePicker для M3

В компоненте DatePicker обновлены цвета, расположение и форма для календаря и текстового поля виджета. Это не меняет API, но добавляет новую DatePickerTheme.

Обновленный TimePicker для M3

В компоненте TimePicker, как и в DatePicker, обновлены цвета, макет и формы для обычной и компактной версии виджета.

Обновленный BottomSheet для M3

Помимо обновления цвета и формы, компонент BottomSheet теперь добавляет дополнительную стрелку перетаскивания, которая включается, когда вы устанавливаете значение showDragHandle в true.

Обновленный ListTile для M3

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

Обновленный Drawer для M3

В компоненте Drawer обновлены цвета и высота, а также внесены небольшие изменения в компоновку.

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

В M3 обновились все виджеты TextField для поддержки нативных жестов. Двойной или тройной клик мышью работает так же, как двойное или тройное касание на сенсорном экране. Виджеты TextField и CupertinoTextField используют эти функции по умолчанию.

Жесты двойного клика/касания в TextField:

• двойной клик мышью + перетаскивание: расширяет выделение в блоках слов;
• двойное касание экрана + перетаскивание: расширяет выделение в блоках слов.

Жесты тройного клика/касания в TextField

Тройной клик мышью:

• выделяет блок абзацев в позиции клика внутри многострочного TextField (Android/Fuchsia/iOS/macOS/Windows) ;
• выделяет блок строк в позиции клика внутри многострочного TextField (Linux) ;
• выделяет весь текст в однострочном TextField.

Тройное касание экрана:

• выделяет блок абзацев в позиции касания внутри многострочного TextField;
• выделяет весь текст в однострочном TextField.

Тройной клик мышью + перетаскивание:

• расширяет выделение в блоках абзацев (Android/Fuchsia/iOS/macOS/Windows) ;
• расширяет выделение в блоках строк (Linux) .

Flutter поддерживает SLSA уровня 1

Flutter теперь компилируется в соответствии с уровнем 1 Supply Chain Levels for Software Artifacts (SLSA) . Это позволяет реализовать многие функции безопасности.

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

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

Происхождение. Бета-версии и стабильные релизы теперь собираются с проверкой. Это значит, что артефакты релиза фреймворка собраны из надежных источников с ожидаемым содержимым. В каждом выпуске публикуются ссылки для просмотра и проверки происхождения в архиве SDK.

Это также позволяет команде продвинуться в направлении соответствия стандартам SLSA L2 и L3. Эти два уровня ориентированы на защиту артефактов во время и после процесса сборки.

Веб-разработка

Сократили время загрузки веб-приложений Flutter. Уменьшили размер файлов шрифтов иконок, убрали неиспользуемые символы из Material и Cupertino.

Уменьшили размер CanvasKit для всех браузеров. Браузеры на базе Chromium могут использовать еще более компактный пользовательский CanvasKit. CanvasKit обслуживается лучшей в Google CDN. Это должно еще больше повысить производительность.

Встраивание элементов. Теперь можно обслуживать веб-приложения Flutter из определенного элемента на странице. До этого релиза приложения могли либо заполнять все тело страницы, либо отображаться в теге iframe. Примеры кода можно найти на GitHub.

Поддержка шейдеров. Веб-приложения могут использовать поддержку фрагментных шейдеров Flutter.

В релизе версии 3.7 мы представили превью Impeller на iOS. С тех пор мы получили и учли много замечательных отзывов от пользователей. С более чем 250 коммитами в этом релизе мы установили Impeller в качестве рендерера по умолчанию на iOS. Теперь все приложения, созданные для iOS с помощью Flutter 3.10, используют Impeller по умолчанию. Такие приложения будут иметь меньше ошибок и более стабильную производительность.

С момента релиза версии 3.7 Impeller на iOS стал занимать меньше памяти, использует меньше проходов и промежуточных целей рендеринга. На новых моделях iPhone сжатие текстур с потерями позволило уменьшить объем памяти без ущерба для точности изображения. Эти изменения также заметно улучшили производительность на iPad.

Рассмотрим такой сложный экран, как pull quote в приложении Wonderous. Усовершенствования сократили объем памяти экранов почти вдвое. Сокращение использования памяти также дает небольшое снижение нагрузки на GPU и CPU. Приложение Wonderous может не заметить такого снижения нагрузки. Его фреймы и раньше рендерились бюджетно, но это изменение должно продлить время автономной работы.

Impeller также открывает команде возможность быстрее выполнять запросы на популярные функции. Один из примеров — поддержка более широкой цветовой гаммы P3 на iOS. Описание этой функции ищите в другом месте этой статьи.

Вклад сообщества, в частности пользователей ColdPaleLight и luckysmg на GitHub, ускорил наш прогресс. Они стали авторами нескольких исправлений, которые улучшили точность и производительность.

Несмотря на то, что Impeller удовлетворяет потребности большинства приложений Flutter в рендеринге, можно от него отказаться. Если вы решите отказаться от Impeller, напишите об этом в GitHub и объясните нам причину отказа. Пользователи приложений могут заметить, что рендеринг Skia и Impeller имеет незначительные различия. Эти различия могут быть ошибками, поэтому не стесняйтесь подавать жалобы. В одном из будущих релизов мы удалим устаревший рендерер Skia для iOS, чтобы уменьшить размер Flutter.

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

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

В этом релизе, помимо Impeller, есть еще улучшения и исправления производительности.

Устранение Jank

Хотим поблагодарить участника проекта с открытым исходным кодом luckysmg. Он обнаружил, что можно сократить время получения следующего рисуемого слоя от драйвера Metal. Чтобы получить этот бонус, нужно установить цвет фона FlutterViews в ненулевое значение. Это изменение устраняет низкую частоту кадров на последних дисплеях iOS с частотой 120 Гц. В некоторых случаях оно увеличивает частоту кадров в три раза. Это помогло нам закрыть более половины проблем на GitHub. Изменение было настолько важным, что мы перенесли исправление в релиз 3.7.

В версии 3.7 мы перенесли загрузку локальных изображений из потока платформы в поток Dart, чтобы избежать задержки событий vsync из потока платформы. Однако пользователи заметили, что эта дополнительная работа в потоке Dart также вызвала некоторые ошибки. В этом релизе мы перенесли открытие и декодирование локальных изображений из потока Dart в фоновый поток. Это изменение устраняет возможные длительные паузы на экранах с большим количеством локальных изображений и позволяет избежать задержки событий vsync. В наших локальных тестах и автоматизированных бенчмарках это изменение сократило время загрузки нескольких одновременных изображений вдвое.

Мы продолжаем оптимизировать новую внутреннюю структуру DisplayList в Flutter. В этом релизе мы добавили механизм выбраковки на основе R-дерева. Этот механизм устраняет обработку операций рисования намного раньше в нашем рендере. Такая оптимизация ускоряет, например, работу пользовательского рисовальщика, вывод которого не удается вывести за пределы экрана. Наши микробенчмарки показали снижение времени обработки DisplayList до 50%. В приложениях с обрезанными пользовательскими красками наблюдалось разное улучшение. Степень улучшения зависит от сложности и количества скрытых операций рисования.

Сокращение задержки при запуске iOS

Неэффективная стратегия поиска идентификаторов в пакетах приложений увеличивала задержки при запуске приложений. Задержка при запуске растет пропорционально размеру приложения. В этом релизе мы исправили поиск идентификаторов в пакетах. Это уменьшило задержку при запуске на 100 мс или примерно на 30-50% в большом производительном приложении.

«Мы как разработчики очень рады тому, какое внимание в команде Flutter уделяется iOS-разработке. Сокращение времени запуска iOS-приложения плюс переход на Impeller дают безграничные возможности для Flutter-разработчиков».

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

Уменьшение размера

Flutter использует SkParagraph в качестве библиотеки по умолчанию для формирования, компоновки и рендеринга текста. Мы использовали флажок для возврата к устаревшим библиотекам libtxt и minikin. Поскольку мы полностью доверяем SkParagraph, мы удалили libtxt и minikin и их флажок в этом релизе. Это уменьшает сжатый размер Flutter на 30 КБ.

Стабильность

В версии 3.0 на поздней стадии процесса рендеринга мы включили функцию Android, которая использовала расширенные возможности драйвера GPU. Функции драйвера перерисовывают меньшую часть экрана при изменении только одной «грязной» области. Мы добавили это к более ранним оптимизациям нашего графического интерфейса с аналогичным эффектом. Несмотря на то, что результаты бенчмарков нас воодушевили, всплыли две проблемы. Во-первых, самый лучший бенчмарк может не отражать практические случаи использования. Во-вторых, набор устройств и версий Android, поддерживающих эту функцию драйвера GPU, оказалось трудно найти. Учитывая ограниченность возможностей и поддержки, мы отключили функцию частичной перерисовки на Android.

Функция остается включенной на iOS при использовании бэкенда Skia. Мы рассчитываем включить ее в Impeller в одном из будущих релизов.

Улучшения в API

Декодер APNG

В версии Flutter 3.10 решена одна из самых популярных проблем — добавлена возможность декодирования изображений APNG. Теперь можно загружать изображения APNG с помощью существующих API Flutter.

Улучшения в API для загрузки изображений

Технический директор Flutter tvolkert внес улучшения в API для загрузки изображений в dart:ui. Мы добавили новый метод instantiateImageCodecWithSize. Он поддерживает загрузку изображения, которое удовлетворяет трем условиям:

• соотношение сторон неизвестно во время загрузки;
• ограничение на ограничивающую рамку;
• ограничение на исходное соотношение сторон.

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

Мобильная разработка

Отладка беспроводной связи. Теперь можно запускать и горячо перезагружать приложения Flutter для iOS без кабеля. После успешного беспроводного сопряжения устройства iOS в Xcode можно на нем развернуть приложение с помощью команды flutter run. Если возникнут проблемы, проверьте, появился ли значок сети рядом с вашим устройством в меню Окно > Устройства и симуляторы > Устройства. Чтобы узнать больше, ознакомьтесь с нашей документацией.

Поддержка изображений с широкой цветовой гаммой. Приложения Flutter на iOS теперь могут поддерживать точный рендеринг для изображений с широкой цветовой гаммой. Для этого нужно использовать Impeller и добавить флажок FLTEnableWideGamut в файл Info. plist.

Поддержка проверки орфографии. Виджет SpellCheckConfiguration() теперь по умолчанию поддерживает функцию проверки орфографии Apple на iOS. Для этого установите виджет с помощью параметра spellCheckConfiguration в CupertinoTextField.

Адаптивный чекбокс и радио. В этом релизе в библиотеку Cupertino добавлены виджеты CupertinoCheckBox и CupertinoRadio, которые создают компоненты чекбоксов и радиокнопок, соответствующие стилю Apple. В виджеты Material checkbox и radio добавлены конструкторы. adaptive. На iOS и macOS эти конструкторы используют соответствующие виджеты Cupertino. На других платформах они используют виджеты Material.

Доработка анимации, переходов и цветов Cupertino. В Flutter 3.10 улучшили некоторые анимации, переходы и цвета, чтобы они соответствовали SwiftUI:

• обновили переход CupertinoPageRoute;
• добавили анимации увеличения заголовка в CupertinoSliverNavigationBar;
• добавили несколько новых системных цветов iOS в CupertinoColors.

Производительность PlatformView. Когда PlatformView появляются на экране, Flutter снижает частоту обновления на iOS, чтобы уменьшить зависание. Пользователи приложения заметят это, когда приложение будет отображать анимированные или прокручиваемые PlatformViews.

macOS и iOS могут использовать общий код в плагинах. Flutter теперь поддерживает ключ sharedDarwinSource в файле pubspec. yaml для плагинов. Этот ключ указывает на то, что Flutter должен использовать общий код для iOS и macOS.

ios: pluginClass: PathProviderPlugin dartPluginClass: PathProviderFoundation sharedDarwinSource: true macos: pluginClass: PathProviderPlugin dartPluginClass: PathProviderFoundation sharedDarwinSource: true

Новые ресурсы для расширений приложений. Мы добавили документацию для разработчиков Flutter по использованию расширений приложений для iOS, таких как живые активности, домашний экран и обмен данными. Чтобы упростить создание виджетов домашнего экрана и обмена данными, мы добавили новые методы в плагины path_provider и homescreen_widget.

Новые ресурсы по кроссплатформенному дизайну. Теперь документация включает в себя кроссплатформенные соображения по дизайну для определенных компонентов пользовательского интерфейса. Чтобы узнать больше о каждом из этих компонентов, ознакомьтесь с обсуждениями в репозитории Flutter UX GitHub. Мы благодарны за любой вклад или обратную связь!

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

• захват изображения;
• запись видео;
• отображение предварительного просмотра камеры в реальном времени.

Чтобы попробовать, согласитесь на использование реализации CameraX. Для этого добавьте следующую строку в файл pubspec. yaml:

Dependencies: camera: ^0.10.4 # Latest camera version camera_android_camerax: ^0.5.0

Мы будем рады вашим отзывам, поскольку продолжаем добавлять новые возможности CameraX. Позже мы сделаем CameraX по умолчанию.

Мы продолжаем совершенствовать DevTools — набор инструментов для повышения производительности и отладки Dart и Flutter:

— В пользовательском интерфейсе DevTools используется Material 3. Это одновременно модернизирует внешний вид и улучшает доступность.

— Консоль DevTools поддерживает оценки для запущенного приложения в режиме отладки. До этого релиза это можно было сделать только при приостановке приложения.

— Встроенный просмотрщик трассировки Perfetto заменяет предыдущий просмотрщик, так как обрабатывает большие наборы данных, работает лучше и включает больше функций:

• возможность фиксировать интересующие потоки;
• клик и перетаскивание для выбора нескольких событий временной шкалы из нескольких кадров;
• использование SQL-запросов для извлечения определенных данных из событий временной шкалы.

«Perfetto — интересный инструмент. На первый взгляд, очень удобный. Обязательно будем пробовать в нашей команде».

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

Чтобы узнать больше, ознакомьтесь с информацией о выпуске DevTools 2.23.1, DevTools 2.22.2 и DevTools 2.21.1.

Устаревшие и критические изменения

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

Обновление Android Studio Flamingo. После обновления Android Studio до версии Flamingo можно увидеть ошибку при попытке запустить или собрать приложение Flutter для Android. Эта ошибка возникает из-за того, что Android Studio Flamingo обновляет поставляемый Java SDK с 11 до 17. Версии Gradle ранее 7.3 не могут работать при использовании Java 17. Мы обновили flutter analyze —suggestions, чтобы проверить, возникает ли эта ошибка из-за несовместимости между Java SDK и версией Gradle. Чтобы узнать о различных способах устранения этой ошибки, ознакомьтесь с нашим руководством по миграции.

Устаревание Windows singleton. В этом релизе устаревает Windows singleton. Приложениям и библиотекам, полагающимся на него, следует от него отказаться. Это подготовит ваше приложение к поддержке многооконности при запуске в будущей версии Flutter.

Спасибо сообществу

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

Подведение итогов

Завершая работу над этим релизом, команда Flutter в Google хочет поблагодарить всех участников, которые сделали его возможным. Ваша преданность и упорный труд помогли сделать Flutter переломным явлением в индустрии и продолжают совершенствовать разработку приложений. Мы приглашаем вас начать знакомство с последней стабильной версией Flutter, чтобы воспользоваться всеми удивительными возможностями, которые он может предложить. Для этого просто обновите Flutter! Оставайтесь с нами и следите за новыми интересными обновлениями Flutter в будущем.

Как вам обновление? Делитесь опытом перехода на Flutter 3.10 в комментариях ��

Flutter web что нового

Бизнес постоянно ищет новые точки взаимодействия с клиентами и партнерами, и мобильное приложение — одна из них. Выбор технологии разработки напрямую зависит от целей и планируемого функционала приложения. Рассказываем о популярных технологиях мобильной разработки PWA (Progressive Web App) и Flutter с точки зрения выгоды для бизнеса.

Вторая волна популярности PWA у бизнеса в России пришлась на 2022 год. Компании, чьи мобильные приложения были из-за санкций заблокированы в иностранных сторах, вновь обратили свое внимание на PWA.

На прогрессивные веб-приложения перешли Сбербанк, Альфа-банк, ВТБ, ПСБ, Совкомбанк и другие. Их не нужно регистрировать в Google Play и App Store, для них сразу открыт прямой выход на десктоп. Компании вернули себе пользователей благодаря временным приложениям на PWA со всем необходимым функционалом. В дальнейшем, после снятия санкций и ограничений, они могут перекомпилировать их в полноценное мобильное приложение.

Что такое PWA

PWA (Progressive Web App) — технология, трансформирующая веб-сайт в мобильное приложение. Кроссплатформенные PWA создают на основе уже существующего HTTPS-сайта.

PWA — это не классическое мобильное приложение, его устанавливают только из браузера. В Apple Store и Google play PWA не размещают.

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

Популярные сервисы на PWA: Сбер, Альфа-Банк, ВТБ Онлайн, «Тинькофф»,НПФ «Открытие», Spotify, Pinterest, Uber и т.д.

PWA-приложения начали набирать популярность в 2015 году, когда Google начал поддерживать элементы, необходимые для проектирования Progressive Web Apps. Тогда у большинства компаний были мобильные версии сайта, а не приложения. Progressive Web Apps позволяли быстро и просто превратить сайт в мобильное приложение.

Особенности PWA

• Прогрессивность. Работает на любом устройстве и браузере, независимо от возможностей и поддержки современных технологий.
• Отзывчивый дизайн. Корректно отображается на любых устройствах и операционных системах: iOS, Android, Windows, Mac.
• Безопасность. Подключение к PWA защищено протоколом HTTPS для обеспечения безопасной передачи данных между клиентом и сервером.
• Офлайн-режим. Использует сервис-воркеры — скрипты, работающие в фоновом режиме. Они сохраняют кэшированные данные. Благодаря этому приложение может запускаться и работать в условиях ограниченной связи или полностью офлайн.
• Как нативное приложение. Файл manifest.json содержит метаданные приложения (название, значок, цвета и другие параметры), которые позволяют PWA выглядеть и вести себя подобно нативному приложению.
• Промежуточные кэши. Использует кэширование данных для ускорения загрузки страниц и ресурсов.

Преимущества для бизнеса

Приложения на базе PWA помогают улучшить пользовательский опыт. Например:

• пуш-уведомления об акциях или новых товарах позволяют информировать клиентов и экономить на маркетинге;
• PWA в большинстве случаев можно установить с официального сайта. Это устраняет необходимость адаптировать PWA к требованиям магазина приложений, ждать модерации и беспокоиться о риске удаления;
• PWA-приложения обновляются автоматически и весят меньше, чем мобильное приложение той же компании. Пользователям не нужно занимать лишнюю память на своих девайсах.

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

При этом пользователь видит привычное приложение, оно обновляется, сохраняет данные и принимает push-сообщения. PWA проще и быстрее в разработке. Особенно по сравнению с нативными приложениями, но некоторые функциональные возможности ограничены.

Что такое Flutter

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

Особенности Flutter

• Высокая скорость работы приложений. Продукты на Flutter работают быстрее аналогов на React Native. Язык программирования для Flutter (Dart) позволяет компилировать код с помощью Ahead-of-time (AOT) компиляции. Все операции выполняются со скоростью, сравнимой со скоростью Objective-C, Swift, Java или Kotlin.
• Стабильная работа. Flutter работает стабильнее других фреймворков. Частота 60 кадров в секунду делает анимации более плавными. Для пользователей внешний вид и UX Flutter-приложений ничем не отличаются от нативных.
• Быстрая разработка. Процесс создания приложения ускоряется в несколько раз, так как Flutter позволяет почти сразу увидеть внесенные изменения. При этом текущее состояние приложения не теряется.
• Отсутствие нативных компонентов. Благодаря этому не нужно писать дополнительных прослоек для взаимодействия с ними. Интерфейс отрисовывается внутри графического движка в самом фреймворке. Все кнопки, текст, медиа-элементы, фон Flutter отрисовывает самостоятельно.

Преимущества для бизнеса

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

1. Flutter экономит от 30% до 50% благодаря общей кодовой базе для разных платформ. Не надо платить за два отдельных проекта, как при использовании нативных решений.
2. Применение общей части кода для iOS и Android сокращает общее время разработки и позволяет экономить на команде. Один Flutter-разработчик выполняет задачи двух нативных в те же сроки.
3. Благодаря широкому функционалу Flutter можно использовать для разработки приложений в разных сферах бизнеса: ритейл, фудтех, страхование и др.
4. Техническая поддержка и дальнейшее развитие продукта благодаря общему коду будет проще и дешевле, чем для двух параллельных приложений на IOS и Android.
5. Flutter лидирует по популярности в мире как кроссплатформенный фреймворк, в том числе и благодаря постоянной поддержке Google. Число специалистов, работающих с ним, растет, что облегчает подбор команды разработчиков.

Фреймворк выбирают для кастомизированных проектов в разных сферах бизнеса — в e-commerce, телеком, фарме, Ed-Tech и т.д, когда нужны:

• проекты разной степени сложности;
• клиенты хотят готовое приложение за короткое время;
• необходимо визуально приятное нативное приложение.

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

Flutter подойдет для разработки MVP. Фреймворк позволяет выпустить работоспособное приложение в условиях сжатых сроков и бюджетов. Поэтому Flutter более популярен и является удобным инструментом для проверки аудитории и востребованности продукта. Особенно если команда разработчиков небольшая и нет возможности поддерживать несколько приложений одновременно. Еще больше про преимущества приложений на Flutter для бизнеса вы можете прочитать в этой статье .

Вторая жизнь PWA-приложений в условиях санкций

До 2022 года компании переделывали web-версии своих сайтов в PWA-приложения. После февраля в PWA-приложения стали переделывать и мобильные приложения.

Flutter — современный удобный инструмент для создания PWA-приложений из существующих мобильных приложений. Они полностью выглядят как нативные мобильные приложения и обладают таким же функционалом.

Если у вашей компании есть планы по разработке мобильного приложения, лучше сразу написать его на кроссплатформе Flutter. Так вы сократите time to market и сможете снова использовать готовую кодовую базу на всех возможных платформах.

Flutter позволяет реализовать сразу три цифровых канала дистрибуции: мобильное, веб и десктоп-приложения. Его применение снижает трудозатраты, бюджет и риски.

Наши кейсы

Мы в Friflex разрабатываем на Flutter многофункциональные кастомные приложения. Некоторые наши кейсы:

Бристоль

Приложение для торговой сети, карта лояльности, акционный каталог

Дикси

Крупнейшее приложение на Flutter. 10+ миллионов пользователей

Магнит

Приложение для сотрудников крупнейшей торговой сети

CrossConf

Мобильное приложения для офлайн-конференции CrossConf

Flutter — перспективный фреймворк по скорости внедрения и широте охвата. Он позволяет реализовать приложение, по функциональности не отличающееся от нативного, с меньшими затратами и более быстрым time to market. Если вы хотите разработать мобильное приложение, напишите нам. Мы проанализируем ваш проект и предложим лучшее решение.

Как мы полностью изменили своё мнение о Flutter

В последнее время, в свете закрытия доступа в популярные сторы для российских компаний, многие представители бизнеса находятся в поиске новых решений, как доставить своё приложение до пользователей. Пробуют разное: российские сторы, выкладку Android application package (APK) на сайте компании, замену мобильного приложения на progressive web app (PWA) или веб-приложение. В связи с этим, растёт спрос на технологии, которые помогают бизнесу разработать приложение (мобильное или веб) быстрее и дешевле.

Да, мы опять говорим о Flutter. А точнее о его новой версии — 3.0, которая, уверены, станет прорывом для многих, ведь Google в ней довёл свою кроссплатформенную технологию практически до совершенства.

Мы начали работать с Flutter в 2019 году, почти сразу после того, как Google презентовал эту кроссплатформу. За это время мы успели реализовать более 15 проектов разной направленности и убедились на собственном опыте, что Flutter подходит для решения самых разных задач:

• для банка: на нём можно разработать приложение, соответствующее всем требованиям безопасности. Например, мы реализовали такое b2b приложение для Росбанка и b2c решение для СМП Банка.
• для ритейла: детально проработать UX, удобный юзер-флоу и реализовать дизайн, не отличимый от нативного. Мы использовали Flutter для создания приложений самой большой сети аптек в России — Ригла.
• для корпораций: распределить сотрудников по ролям и отслеживать их эффективность. На Flutter мы написали внутреннее приложение для торгово-производственной компании и KFC.
• для медиа: обеспечить качественное воспроизведение и сложную анимацию в высоконагруженном сервисе. Так, на Flutter, мы сделали видеостриминговое приложение The Hole.

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

Итак, мы создавали разные проекты на Flutter и успели оценить его по достоинству. Но недавно вышла новая версия фреймворка — 3.0, которая полностью перевернула наше представление о технологии.

Если коротко — это революция. Теперь на Flutter можно создавать не только качественные мобильные приложения, но и веб, и десктоп-приложения. О том, почему это сейчас особенно актуально, мы писали в этой статье о Progressive Web App (PWA). Но обо всём по порядку.

Чем хороша кроссплатформа для бизнеса

Мы уже писали о том, что кроссплатформа — это набор инструментов, который позволяет создать одно приложение сразу для двух операционных систем: iOS и Android. И вот в чём её плюсы:

• Экономичность. Бизнес тратит меньше времени и денег на разработку, потому что Flutter-разработчик создаёт одну кодовую базу сразу для двух ОС. Стоимость такой разработки на 40% меньше, чем создание двух нативных приложений. При том, что для пользователя нет никакой визуальной и функциональной разницы.
• Time-to-market короче. Для запуска Flutter-приложения потребуется меньше времени, чем на запуск нативного. Как следствие, оно начнёт приносить прибыль гораздо быстрее.
• Нет ограничений в дизайне. Это важный пункт для любого бизнеса, который дорожит своей уникальностью. Flutter позволяет реализовать любой дизайн, включая сложную анимацию. О том, как мы работали с анимацией в приложении The Hole, читайте в нашем кейсе.
• Безопасность. Код Flutter-приложение преобразуется в нативный, который нельзя восстановить с помощью реверс-инжиниринга.
• Интегрировано с нативными возможностями. В приложении на Flutter можно использовать Touch и Face ID, сканер отпечатка пальца, GPS и камеру. Точно так же, как и в нативном приложении.

Что изменилось с появлением Flutter 3.0

1. Теперь на одной технологии можно реализовать сразу три канала цифровых продаж: мобильное приложение, десктоп и веб-версию. Это ещё больше снизит трудоёмкость, бюджет проекта и риски, связанные с интеграцией. Например, когда мы работали над проектом KFC DSR, нам пришлось создавать веб-версию и мобильное приложение, используя разные технологии. Сейчас мы бы реализовали всё на Flutter.
2. Теперь Flutter официально поддерживает шесть платформ — и делает это хорошо. На Flutter теперь можно создавать решения для Windows, macOS и Linux. Кроме того, он стал более доступным — поддерживает озвучивание текста на экране, упрощённую навигацию и инверсию цвета.

Производительность стала ещё лучше

Во Flutter 3.0 появился новый инструмент — Impeller. Это экспериментальный инструмент, который значительно улучшает работу анимации и рендеринга. Сейчас он доступен только для iOS, но тесты команды Surf показывают действительно отличные результаты в росте производительности приложения. Это хорошая новость для всех мультимедийных проектов и высоконагруженных стриминговых сервисов. В видеостриминге, как нигде, важна высокая производительность, а также качественное и быстрое воспроизведение видео. Раньше у Flutter с этим были некоторые сложности, но в свежей третьей версии инструмент Impeller полностью решает проблемы частоты смены кадров.

Приложение The Hole

Мы разрабатывали приложение The Hole и можем сказать, что для подобных проектов этот инструмент будет точно востребован.

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

Появилась поддержка Material Design 3

Во Flutter 3.0 теперь доступна возможность подключить поддержку Material 3. Это фичи Material You, такие как:

• динамический цвет;
• обновлённая система цветов и типографики;
• обновления множества компонентов и новые графические эффекты, появившиеся в Android 12.

Например, новый дизайн рипплов — эффект волнового распространения анимации при нажатии и эффект stretch overscroll — эффект растягивания границ прокрутки.

Что это значит? Material You — новая версия концепции Material Design, которая используется для создания дизайна мобильных приложений. Возможность поддержки самой актуальной версии означает, что приложение теперь будет выглядеть современно и вы сможете реализовать в нём самые передовые «фишки» дизайна.

Стало доступно декодирование изображений

Flutter стал автоматически обнаруживать и использовать ImageDecoder API в поддерживающих его браузерах. Этот инструмент предназначен для преобразования закодированных изображений (в форматах PNG, JPEG, WEBP, GIF или HEIF) в объекты Drawable или Bitmap — форматы хранения растровых изображений.

Новый API асинхронно декодирует изображения из главного потока с помощью встроенных в браузер кодеков изображений. Такое решение ускоряет декодирование изображений в два раза и не блокирует главный поток. Это очищает приложение от лагов, обычно возникающих при загрузке изображений. Теперь большинство браузеров на базе Chromium (Chrome, Edge, Opera, Samsung Browser) поддерживают эту возможность.

Что это значит? Изображения в приложении будут загружаться быстрее, а их качество будет лучше.

Упростился контроль жизненного цикла веб-приложений

Появилось новое API жизненного цикла для веб-приложений. Это помогает делать качественнее сам продукт, улучшает UX конечного пользователя.

Что это значит? Теперь мы можем визуализировать процесс загрузки веб-приложения до момента его запуска. Пользователь больше не будет смотреть на белый экран. Новая возможность даёт больше контроля над начальной загрузкой веб-приложения с HTML-страницы на стороне сервера. К тому же, она упрощает анализ производительности приложения в Lighthouse — инструменте для измерения качества веб-страниц.

Появилась поддержка складных устройств

Теперь Flutter поддерживает мобильные раскладушки. Благодаря сотрудничеству с Microsoft Google, теперь доступны новые фичи и виджеты, с помощью которых можно создавать приложения на складных устройствах.Что это значит? Даже на самых новых моделях телефонов-раскладушек приложение будет работать и отображаться корректно.

Упростились релизы для iOS

Добавились новые возможности в команду flutter build ipa, чтобы было проще выпускать в релиз приложение под iOS.

Что это значит? Теперь можно собирать проект под iOS, и получать на выходе *.ipa, не открывая Xcode. Саму сборку можно доверить джуниор-разработчику, да и девопсы будут счастливы: настраивать CI/CD стало немного проще.

Pro Motion даёт возможность делать приложение ещё более плавным на самых современных iOS девайсах.

Узнать больше о новых изменениях во Flutter можно в нашей статье на Хабре.

Flutter — для мобильного приложения, десктопа и веба

Недавно мы писали о прогрессивных веб-приложениях и о том, способны ли они стать полноценной заменой привычным мобильным. Напомним:

• веб-приложение работает через браузер;
• десктопное работает локально на устройстве.

Теперь с помощью Flutter 3.0 можно создавать все три версии своего цифрового продукта: мобильное, веб и десктопное приложение.

Раньше Flutter позволял сокращать сроки и стоимость разработки мобильного приложения, благодаря единой кодовой базе. Это подтверждают наши кейсы с СМП Банком и Мособлбанком, а также сетью аптек Ригла (когда мы создали сразу 6 приложений для 3 брендов сети).

Приложение для СМП Банка

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

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

Евгений Сатуров, Head of Flutter в Surf

Признаться, стабильный релиз Flutter for Web мы восприняли с некоторым скепсисом. Этому способствовало специфическое позиционирование технологии и ряд сложнопреодолимых технических ограничений — например, серьёзные проблемы с SEO. Выбирая Flutter для проекта, нацеленного на веб, нужно понимать, что ваш продукт соответствует требованиям технологии.

В случае с десктопом нет жесткой привязки к технологии. Она не ограничивает, а наоборот даёт дополнительные возможности. Простота нативных интеграций, действительно впечатляющие библиотеки UI-компонентов (Windows, macOS), готовые решения для управления мультиоконностью (window_manager), утилиты для сборки десктопных артефактов (msix) — всё это говорит о том, что Flutter не просто запустит мобильное приложение на десктопе, как это уже умеют делать Windows 11 и macOS, он поможет создать настоящее десктопное приложение.

Flutter 3 в 1 — почему бизнес выиграет?

Потому что основная часть кодовой базы проекта будет унифицирована (80-95%, в зависимости от специфики проекта). Адаптации будут необходимы, как по платформенным фичам, так и по UX. Но это будут всё же именно адаптации, а не переписывание приложения с нуля.

• Такой проект будет удобно поддерживать.
• Не нужно будет собирать 3 разные команды под каждую платформу. Достаточно иметь в одной команде несколько разработчиков с компетенциями в этих платформах. Они будут помогать друг другу по платформенным задачам, а общий пул унифицированных задач делить поровну.
• Код будет стабильным — он будет тестироваться один раз и под все платформы, все баги будут правиться одновременно на всех платформах.
• Поддержка станет проще — все проблемы будут решаться раз и навсегда. Не нужно будет передавать информацию обо всех правках по всем платформам.
• Проект выйдет на рынок на 30-40% быстрее и обойдётся на столько же дешевле.

У нас есть внутренний проект, на котором мы пробуем всё то, к чему наши клиенты будут готовы лишь «завтра». Да, это проект на Flutter Web.

Евгений Сатуров, Head of Flutter в Surf

Мы создаём мобильные приложения более 12 лет, а на Flutter — уже больше 4 лет. Постоянно следим за развитием кроссплатформы и сами активно участвуем в её развитии. И, чем больше развивается технология, тем лучше становится конечный продукт — приложение для банка, ритейла или для управления корпорацией. В основе философии Flutter всегда лежала идея универсальности. А теперь, с появлением возможности создавать на этом фреймворке мобильное приложение, десктоп и веб и вовсе открывает новые горизонты планирования для любого проекта.

Вы в блоге Surf

Мы разрабатываем мобильные приложе- ния и помогаем в цифровизации крупного бизнеса.