Flutter web что нового
Перейти к содержимому

Flutter web что нового

  • автор:

Под­держ­ка веба во Flutter те­перь ста­биль­ная

Мы позиционируем Flutter как UI-фреймворк для сборки красивых приложений на любой платформе. Сегодня мы анонсируем поддержку сборки веб-приложений во Flutter 2.

Первая версия Flutter поддерживала только мобильные платформы (iOS и Android). И это позволило разработчикам загрузить в магазины App Store и Google Play больше 150 000 приложений. Появление сборки для веба означает не только то, что уже написанные приложения могут быть доступны более широкой аудитории, это означает появление новых способов взаимодействия с пользователем в вебе.

В этом релизе мы сфокусируемся на трех сценариях использования:

  • Прогрессивные веб-приложения (PWA) — которые можно запустить в браузере и на десктопе как обычные приложения.
  • Одностраничные приложения (SPA) — веб-приложения для браузера, которые грузятся один раз, а затем передают и получают в основном только данные.
  • Веб-версии существующих мобильных приложений на Flutter — с единой кодовой базой для всех платформ.

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

Интерфейс приложения iRobot Education.

Наше путешествие в веб Скопировать ссылку

Сегодня веб-платформа богата как никогда: поддержка графических ускорителей для 2D- и 3D-графики, поддержка работы приложений в офлайне и доступ к API операционной системы и железу устройства, на котором она установлена. Веб-приложения сегодня могут быть написаны на фреймворках вроде React, Angular, Vue, Flask, которые используют эту платформу, чтобы дать разработчикам гибкость в создании веб-приложений.

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

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

Схема архитектуры для поддержки Flutter в вебе.

На уровне архитектуры, Flutter базируется на:

  • фреймворке, написанном на Dart, который использует общие абстракции, такие как виджеты, анимации и жесты;
  • движке, написанном на C++, который рендерит код для целевого устройства, используя системные API.

Сам Flutter написан на Dart, и около 700 000 строк кода используются для мобильной платформы, десктопа и веба. Код любого Flutter-приложения также написан на Dart: мы используем компилятор Dart для разработки мобильных приложений (dartdevc) и транслятор Dart (dart2js) для перевода вашего кода в JavaScript, который, в свою очередь, может быть уже перенесен на сервер.

Благодаря поддежке трансляции программ на языке Dart в программы на JavaScript, наша работа сводилась лишь к замене низкоуровневого движка для рендеринга, написанного на C++, который ранее использовался только при рендеринге кода для мобильных приложений, на новый движок с поддержкой API веб-платформы. Теперь движок Flutter для веба предлагает использовать два варианта: рендеринг в оптимизированный HTML и рендеринг с помощью CanvasKit, который использует WebAssembly и WebGL для перевода команд движка Skia в команды рисования на канвасе в браузере. Flutter не умеет напрямую транспилировать виджеты в эквивалент на HTML.

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

Путь к релизу в стабильной ветке Скопировать ссылку

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

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

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

Производительность Скопировать ссылку

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

Первоначально мы стартовали с HTML и DOM-модели. В ней веб-движок Flutter переводил сгенерированную сцену в HTML, CSS или Canvas и рендерил каждый кадр на страницу как дерево HTML-элементов. Даже несмотря на очень хорошую браузерную поддержку и малые размеры, которые обеспечивал нам движок для рендеринга HTML, производительность для перерисовки была меньше, чем нужно для приложения с быстро менящейся графикой, наподобие Rive — инструмента для совместного создания анимаций, написанный на Flutter.

Интерфейс приложения Rive.

Чтобы эффективно справиться с точностью, которая необходима для отрисовки сложной графики, мы начали экспериментировать с CanvasKit, который позволял рисовать в браузере с помощью команд Skia, используя WebAssembly и WebGL. Мы обнаружили, что CanvasKit может дать большую производительность, качество и точность отрисовки, используя графические ускорители. Вы можете посмотреть демо Феликса Блашке, талантливого участника Flutter-сообщества.

Примеры абстрактной цветовой графики.

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

  • Режим HTML — использует комбинацию HTML-элементов, CSS, элементов на канвасе и SVG-элементов. Этот режим обеспечивает наименьший размер приложения.
  • Режим CanvasKit — — полностью поддерживает возможности Flutter, доступные на мобильных платформах или десктопе, но добавляет 2 Мб к размеру веб-приложения.

Для оптимизации характеристик вашего веб-приложения на Flutter для всех устройств, режим рендеринга выбирается автоматически. Приложение по умолчанию запускается с помощью движка HTML в мобильных браузерах и с помощью CanvasKit в браузерах на десктопе. Вы можете использовать ключ —web-renderer html или —web-renderer canvaskit для прямого выбора режима рендеринга.

Возможности, специфические для веба Скопировать ссылку

Приложение на Flutter в браузере должно быть настолько же удобным, что и обычное веб-приложение. Поэтому мы добавили во Flutter лучшее из мира веба.

Веб-платформа имеет много сильных сторон, одна из них — большое количество пользователей. Одна из многих причин обеспечить поддержку веб-версии существующего Flutter-приложения — охватить пользователей за пределами магазинов мобильных приложений. Мы добавили поддержку роутинга с помощью (URL-стратегий), чтобы ваши пользователи могли получить доступ к вашему приложению, просто кликнув по ссылке.

Демо-страница приложения Flutter Plasma.

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

Ещё одной неотъемлемой частью приложения является рендеринг текста. Разработка системы верстки текста была одной из самых больших проблем для поддержки Flutter в вебе. Поскольку в вебе отсутствует специальное API для обработки элементов с текстом, Flutter должен измерять размеры абзаца (класс paragraph ), обращаясь к методу layout() . Эти измерения могут серьезно повлиять на производительность, поэтому в новый механизм измерения размеров текста на канвасе добавлена поддержка двух вариантов текста: простого и форматированного. Сейчас Flutter позволяет измерять размеры в вебе эффективно чтобы, например, рисовать выделение маркером в тексте.

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

Flutter 2 частично поддерживает использование прогрессивных веб-приложений (PWA). PWA — это простой и безопасный способ преодолеть разрыв между мобильными приложениями и веб-приложениями силами проекта Fugu команды Chrome.

Интерфейс веб-приложения Invoice Ninja.

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

Поддержка экранов десктопов Скопировать ссылку

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

Например, пользователь, при просмотре контента на десктопе ожидает отображение полос прокрутки, которыми можно управлять с помощью мышки и клавиатуры. Поэтому новые интерактивные полосы прокрутки поддерживают темизацию ScrollbarTheme и возможность прокручивать перетаскиванием ползунка. Класс контроллера PrimaryScrollController теперь поддерживает использование сочетания клавиш для навигации сразу из коробки.

Интерфейс веб-приложения Zurich Insurance.

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

Наконец, чтобы поддерживать всех пользователей, мы расширили используемую семантику для поддержки доступности на Windows, macOS и ChromeOS. В вебе дополнительное DOM-дерево, которое называется SemanticsNode генерируется параллельно с DOM-деревом для объекта рендеринга RenderObject . Дерево SemanticsNode переводит флаги, действия, подписи и другие семантические свойства в ARIA-атрибуты. Сейчас вы можете использовать Narrator, VoiceOver, TalkBack или ChromeVox для навигации веб-приложений на Flutter.

Экосистема плагинов Скопировать ссылку

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

С начала бета-тестирования мы с помощью сообщества обеспечили поддержку веб-платформы в следующих плагинах:

  • image_picker;
  • google_maps;
  • firebase_analytics;
  • firebase_storage;
  • connectivity;
  • cloud_firestore;
  • cloud_functions;
  • cross_file.

Что дальше Скопировать ссылку

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

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

Интерфейс веб-приложения Moi Mobiili.

Вероятно, производительность будет всегда областью, в которую мы будем вкладываться. Наша цель — уменьшить размер кода и увеличить скорость отображения кадров (fps). Сегодня каждое веб-приложение на Flutter скачивает необходимый код движка для рендеринга. Мы ищем возможности закэшировать часть кода, чтобы увеличить скорость загрузки и уменьшить размер скачиваемого бандла. Недавно мы сделали демо-приложение Flutter Gallery, в котором уменьшили размер, используя отложенную загрузку библиотек, и планируем скоро рассказать о том, чему мы научились.

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

Интерфейсы веб-приложений Simplebet.

  • CanvasKit уже в стабильной ветке, но проблемы еще остались. Например, пока нет фолбэков для спецсимволов или поддержки CORS картинок.
  • PWA пока кэширует все ресурсы, поэтому полноценная поддержка работы приложения без сети требует использования некоторых ручных манипуляций с CanvasKit.
  • Рендеринг текста и поддержка различных функций, например, полноценной стилизации, остается очень сложной задачей, над которой мы продолжаем работать.
  • Экосистема плагинов — это то, над чем мы также продолжаем работать, чтобы пакеты, опубликованные Google, имели лучший паритет между мобильными устройствами и вебом.

Начните использовать Flutter для веба Скопировать ссылку

С переносимостью Dart, мощью веб-платформы и гибкостью фреймворка Flutter теперь вы можете собрать приложения под iOS, Android и браузер с той же кодовой базой.

Для тех из вас, кто уже имеет готовое веб-приложение на Flutter, можно собрать его, используя стабильную ветку. Если вы только начинаете, почитайте flutter.dev/web, посмотрите наш пример и сессию на Flutter Engage, посвященную веб-платформе.

С нетерпением ждем ваших успехов в применении Flutter для веба!

Что нового во Flutter 3.10, ч.2

Hola, Amigos! На связи Саша Чаплыгин, Flutter-dev Amiga и Тимур Моисеев, Teamlead Flutter Amiga. Мы продолжаем рассказывать об обновленной версии Flutter 3.10, и в этой части затронем разработку веб и мобильных приложений, Impeller, производительность и изменения в устаревших функциях.

Это статья-перевод от автора Кевина Чишолма. Оригинал статьи читайте по этой ссылке. Мы решили разбить материал на несколько частей для удобства восприятия.

Я и мои коллеги пишем о Flutter-разработке в телеграм-калане Flutter.Много. В мае рассказывали о личном опыте и делились полезными плагинами\библиотеками. В июне продолжим эти темы, а еще поделимся лайфхаками по прохождению собеседований. Если актуально — присоединяйтесь!

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

Для каких вариантов веб-разработки идеально подходит Flutter?

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

  • прогрессивные веб-приложения;
  • одностраничные веб-приложения;
  • существующие мобильные приложения на Flutter.

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

Search Engine Optimization (SEO)

Flutter ориентирован преимущественно на создание динамических приложений, и веб-разработка с помощью Flutter не является исключением. Основной упор в этом случае делается на производительность, точность воспроизведения и согласованность. Поэтому результаты работы приложения не соответствуют тому, что требуется поисковым системам для правильной индексации. Для веб-страниц, которые содержат статический контент в виде структурированного текста, рекомендовано использовать HTML — аналогично тому, как это сделано на сайтах flutter.dev, dart.dev и pub.dev. Также следует обдумать возможность отделения основного пользовательского интерфейса приложения на Flutter от посадочной страницы, страниц с маркетинговым контентом и справкой, создаваемых с помощью оптимизированного для поисковых систем языка HTML.

Сокращение времени загрузки веб-приложений Flutter

В новом выпуске уменьшен размер файлов со шрифтами значков, удалены неиспользуемые символы из Material и Cupertino.

Уменьшение размера CanvasKit для всех браузеров

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

Встраивание элементов

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

Поддержка шейдеров

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

Движок

Impeller

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

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

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

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

Продолжается работа над бэкэндом Vulkan для Impeller. Impeller для Android остается в разработке, его предварительная версия пока не готова. Чтобы отслеживать прогресс, заходите на доску проектов на GitHub.

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

Устранение зависаний и рывков при выводе изображения

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

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

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

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

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

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

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

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

В версии 3.0 на поздней стадии процесса рендеринга включена функция Android, которая использовала расширенные возможности драйвера ГП. Эта функция перерисовывает не весь экран, а только ту его часть, которая действительно изменилась и содержит новую информацию. И хотя результаты бенчмарков впечатляют — возникли две проблемы. Во-первых, даже самый лучший бенчмарк не способен охватить все практические варианты применения. Во-вторых, набор устройств и версий Android, поддерживающих эту функцию драйвера ГП, оказалось трудно найти. Учитывая ограниченность возможностей и поддержки, теперь отключена функция частичной перерисовки на Android.

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

Улучшения в API

Декодер APNG

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

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

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

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

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

Разработка мобильных приложений

iOS

Отладка по беспроводной сети

Теперь можно запускать приложения 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 and macOS эти конструкторы используют соответствующие виджеты Cupertino, на других платформах — виджеты Material.

Доработка анимации, переходов и цветов Cupertino

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

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

Когда виджет PlatformViews появляется на экране, 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 .

Android

Поддержка Android CameraX

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

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

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

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

DevTools

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

  • В пользовательском интерфейсе DevTools используется Material 3, благодаря чему модернизируется внешний вид и улучшается доступность.
  • Консоль DevTools поддерживает оценки для приложения, запущенного в режиме отладки. До этого выпуска оценку можно было делать только после приостановки приложения.
  • Встроенный просмотрщик трассировки Perfetto заменяет собой предыдущий, поскольку обрабатывает более крупные наборы данных намного эффективнее. Perfetto включает больше функций:
    — возможность фиксировать интересующие потоки;
    — выбор нескольких событий временной шкалы из нескольких кадров с помощью щелчка кнопкой мыши и перетаскивания;
    — использование SQL-запросов для извлечения определенных данных из событий временной шкалы.

Чтобы получить больше информации, ознакомьтесь с примечаниями к выпуску 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. Чтобы узнать о способах устранения этой ошибки, ознакомьтесь с руководством по миграции.

Устаревание шаблона Window singleton

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

На этом все! Подписывайтесь на наш телеграм-канал Flutter.Много, чтобы быть в курсе новых публикаций и узнавать новое из мира кроссплатформенной разработки.

  • flutter
  • обновления flutter
  • разработка приложений
  • мобильная разработка
  • кроссплатформенность
  • кроссплатформенная разработка
  • flutter app development
  • flutter mobile development
  • crossplatform mobile programming
  • crossplatform programming
  • Разработка мобильных приложений
  • Dart
  • Flutter

Необанк на Flutter

Flutter — один из самых современных кроссплатформенных фреймворков. Google выпустил его на рынок в 2018 году, и за эти годы Flutter уверенно потеснил конкурентов и стал №1 среди кроссплатформенных технологий.

Google продолжает активно развивать Flutter, и не так давно выпустил третью версию фреймворка. Она стала настоящей революцией во фронтенд-разработке на необходимом уровне стабильности. Это значит, что теперь на единой кодовой базе можно разработать приложение и адаптировать его для разных цифровых платформ: iOS, Android, web, Windows, MacOS.

Мы создали концепт онлайн-банка, в котором опробовали Flutter web на практике. И готовы поделиться результатом.

Хотите проверить, как работает наше приложение на Flutter web?

Работает корректно на всех платформах и адаптируется к любому устройству

С помощью Flutter можно создать универсальный продукт сразу для трёх каналов распространения: мобильное, веб и десктоп-приложения. Применение одной технологии снизит бюджет, трудозатраты и риски на 60%

Приложение на Flutter корректно работает в браузере и на смартфоне

С помощью кроссплатформы Flutter можно переиспользовать 80-95% кодовой базы на разных платформах. Доработать придётся платформенные фичи и UX-решения. И всё же это займёт меньше ресурсов, нежели написание нескольких нативных проектов под каждую целевую платформу.

Создатели Flutter абстрагировались от платформенных механизмов создания UI. Это позволило сделать UI кроссплатформенным.

Владимир Макеев

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

Как это работает в веб-версии: скачивается движок рендеринга, который весит 2.8Мб, и отрисовка происходит аналогично процессу в мобайле. Движок запускается через WASM. Аналогично работает, например, Figma. Такой процесс снимает вопросы с HTML, CSS, несовместимостью браузеров и ОС.

Для компиляции веб-приложения используется dart2js, он выполняет перевод программы на языке Dart в программу на языке JavaScript. Подробнее об этом можно прочитать здесь.

На выходе мы получаем веб-приложение, у которого под капотом тот же самый графический движок, который используется для отрисовки Flutter-приложения на Android и iOS. Так как методы самого рендеринга идентичны, то и отличий не будет. При этом пользователь на своей стороне не замечает никаких изменений.

Адаптивность — сильная сторона приложения, разработанного на Flutter. Оно может подстроиться под любое пользовательское окружение и работать на любых операционных системах и браузерах. Возможно это благодаря тому, что для фреймворка реализован целый набор различных компиляторов, благодаря которым мы можем собрать Flutter-приложение для запуска на самых разных платформах. Веб-приложение при компиляции будет на 100% иметь ожидаемое поведение (и будет идентичным Android/iOS).

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

Новая версия Flutter может стать настоящей палочкой-выручалочкой в случаях, когда нужно, чтобы приложение было идентичным для всех платформ — iOS, Android, web, Windows, MacOS — и когда для приложения не нужно SEO-продвижение. Это могут быть сервисы с функциональностью таск-менеджеров, календарей, аналоги notion для создания заметок и текстовых документов, стриминги, сложные профессиональные приложения, например, музыкальные редакторы.

Убедитесь, что приложение корректно работает на всех платформах

Внешний вид приложения можно менять на всех платформах

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

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

Дизайн PWA на Flutter гибко подстраивается под фирменный стиль банка

Разработка дешевле и быстрее

Скорость и экономия при разработке на Flutter обусловлена использованием единой кодовой базы. Там, где владельцу бизнеса потребовалось бы три команды разработчиков: для Android, iOS и веб, Flutter-команда может сделать в два раза быстрее. Это существенно ускоряет выход релизов.

Обычно для работы над нативным мобильным приложением банк набирает в штат две команды разработчиков (Android и iOS). В среднем, инхаус-команда крупного банка состоит из 50 iOS, 50 Android и 30 frontend-разработчиков. При средней зарплате в 250 000 рублей, налогах и IT-аккредитации, себестоимость команды достигает примерно 487 500 000 рублей в год. Только команда iOS-разработчиков обойдётся собственникам бизнеса в 187 500 000 рублей ежегодно. А если компании нужно реализовать приложение для разных платформ — iOS, Android, web, Windows, MacOS — бюджет и сроки проекта возрастут ещё больше.

Для мобильного приложения на Flutter экономия относительно нативной разработки составляет 40%. А с новым мультиплатформенным подходом бизнес может сократить бюджет проекта до 60%, реализовав на едином коде приложения для мобильной, веб и десктоп версии.

Приложение удалили из сторов — Flutter помогает

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

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

Плюсы и минусы PWA

PWA устанавливается через браузер, в котором открыто веб-приложение с поддержкой Progressive Web Applications. На Android и iOS механизм одинаковый, отличие только в браузерах. На Android используется Google Chrome, а на iOS — Safari.

Установка PWA на iPhone

Для банков, которые оказались под санкциями, PWA — это единственное нормальное решение для замены iOS-приложения. У PWA пока есть одно ограничение: в нем нельзя отправлять push-уведомления пользователям iOS, но Apple анонсирует появление такой функциональности в 2023. Пока сообщения можно отправлять через мессенджеры и SMS.

Почему Flutter подходит для создания PWA:

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

Приложение на Flutter можно собрать в виде PWA, веб-приложения, iOS и Android. И оно будет работать идентично на всех платформах.

Как происходит переход банка на PWA:

  1. Разрабатываем на Flutter PWA приложение. Через 2 месяца запускаем версию для тестирования внутри банка, а через 4 — версию с базовой функциональностью, доступную клиентам.
  2. Дорабатываем Flutter-приложение, чтобы в нем была вся реализованная в нативной версии функциональность. После этого можно заменить существующее приложение для Android на кроссплатформенное на Flutter. Пользователи iOS могут применять PWA.
  3. Параллельно разрабатываем веб-приложение на той же кодовой базе, что и мобильные, так как Flutter это позволяет.
  4. После снятия санкций можно быстро собрать приложение для iOS, опубликовать в AppStore и конвертировать пользователей PWA в iOS-приложение.
  5. После этого банк может забрать проект в инхаус и развивать его.

На своём опыте мы убедились, что Flutter отлично справился со сборкой на web, и сделал практически всё за нас. Остается только провести финальный чек-ап, найти и исправить ошибки, которые могут появиться при переходе на веб-платформу.

Подходит для создания мобильного банка со всеми базовыми функциями

Крупные российские компании и банки уже попробовали внедрить PWA. Эту технологию используют: Aviasales, IVI, DNS и Спортмастер. Среди банков пионерами оказались Сбер, Альфа-банк и Тинькофф. Для банков это особенно актуально, потому что есть риск попасть под санкции. Без доступа в сторы, с PWA можно оперативно развернуть веб-версию, не меняя процесса разработки и не переписывая всё с нуля — это возможно для PWA, написанного именно на Flutter.

В банковском приложении, написанном при помощи Flutter web, будет доступны те же функции, что и в мобильном приложении привычного банка.

  • В разделе «Карты» — видны открытые карты с общим и разделённым балансом.
  • «Счета и «Цели» — имеют привычную функциональность «копилки» и доступных счетов: дебетового и кредитного.
  • «История» — отображает траты каждого месяца по категориям.
  • «Автоплатежи», переводы по номеру телефона и оплата по QR-коду — тоже легко реализуемая функциональность.

Функциональность PWA на Flutter ничем не уступает обычному мобильному приложению

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

Евгений Сатуров

Руководитель Flutter-отдела в Surf

Flutter в веб-разработке и создании мобильных приложений для Android и iOS.

Flutter — новая и перспективная платформа для написания мобильных приложений для Android и iOS, а также Web-приложений. На вебинаре мы рассмотрим возможности этого фреймворка и напишем простое приложение под Android+Web.

План вебинара:

  1. Знакомство с фреймворком Flutter.
    1. История.
    2. Возможности и особенности фреймворка. Плюсы и минусы.
    3. Для каких задач он пригоден.
    4. Краткое описание синтаксиса.
    5. История языка Dart.
    6. Возможности и особенности Dart.
    1. Описание возможностей касательно разработки WEB-приложений. Во что превращается код в браузере (Web assembly etc.)
    2. Поверхностно – про десктопы.
    3. Новые фичи языка, которые появились с этим релизом.
    1. Пишем в реалтайме простое приложение под Android / iOS.
    2. Ничего не делая, запускаем его же в браузере.
    3. Рассказ про ограничения web-приложений на Flutter.

    Целевая аудитория:

    Действующие разработчики мобильных приложений: нативные iOS / Android разработчики, React Native разработчики, frontend разработчики, а также те, кто только входит в профессию и рассматривает сферу, в которую хотел бы углубиться – mobile или web, соответственно.

    Покупай подписку с доступом ко всем курсам и сервисам

    Библиотека современных IT знаний в удобном формате

    Выбирай свой вариант подписки в зависимости от задач, стоящих перед тобой. Но если нужно пройти полное обучение с нуля до уровня специалиста, то лучше выбирать Базовый или Премиум. А для того чтобы изучить 2-3 новые технологии, или повторить знания, готовясь к собеседованию, подойдет Пакет Стартовый.

    • Все видеокурсы на 3 месяца
    • Тестирование по 10 курсам
    • Проверка 5 домашних заданий
    • Консультация с тренером 30 мин

    Halloween

    • Все видеокурсы на 1 год
    • Тестирование по 24 курсам
    • Проверка 20 домашних заданий
    • Консультация с тренером 120 мин
    • Скачивание видео уроков
    • Возможность приостановки обучения
    • Все видеокурсы на 6 месяцев
    • Тестирование по 16 курсам
    • Проверка 10 домашних заданий
    • Консультация с тренером 60 мин

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *