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

В этом опросе были собраны отзывы по темам:
👉 Flutter for web;
👉 сливеры (виджеты для создания сложных эффектов скроллинга);
👉 проблемы, характерные для конкретных платформ.

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

#статья

Недавно вышло обновление 0.3.0 для библиотеки flutter_portal от Remi Rousselet. С её помощью можно «прокачать» одну из немногих проблемных зон Flutter, а именно работу с оверлеем. Императивный подход к работе, сложность кастомизации, а также другие проблемы стандартного оверлея, Remi успешно исправил в своей библиотеке.

Последнее обновление принесло улучшения:

👉 более подробная документация Portal и PortalEntry;
👉 добавлены и улучшены примеры использования библиотеки;
👉 исправление багов;
👉 добавлена возможность кастомизации анимации исчезновения PortalEntry.

#библиотека

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

Для интеграционного тестирования Flutter-приложения советуем использовать библиотеку flutter_driver.

Неполный перечень того, что она умеет:

👉 профилирование производительности;
👉 тестирование с помощью скриншотов;
👉 проверка accessibility;
👉 тестирование локализации и интернационализации приложения;
👉 проверка отображения конкретных виджетов на экране.

📌 Об этих и других возможностях flutter_driver в статье Pierre-Louis Guidez.
#статья

Эпидемия коронавируса заставила перейти большинство мероприятий в онлайн режим. Исключением не стал и Firebase Summit, проходивший 27 и 28 октября.

📌 С техническими сессиями можно ознакомиться на сайте.

Но для Flutter-комьюнити саммит принёс ещё и большое обновление документации:

Теперь документация построена в формате роадмапа, пройдя который вы не только научитесь правильно подключать Firebase, но и познакомитесь с его возможностями:

👉 добавление Firebase в приложение Flutter для Android;
👉 добавление Firebase в приложение Flutter для iOS;
👉 знакомство с возможностями Firebase для Flutter в виде Codelab.

Codelab учит, как работать с пакетами FlutterFire Auth и Cloud Firestore и интегрировать сервисы в ваше Flutter-приложение.

🎳 В конце роадмапа ждёт небольшой приятный сюрприз в виде викторины, в которой за правильные ответы о Firebase и Flutter можно получить бейдж для Google Developer Profile.

#документация

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

👉 Вышла новая версия Flutter 1.22;
🎉 День рождения Dart;
🎉 День рождения Bloc;
👉 Команда Google опубликовала результаты опроса за третий квартал 2020 года;
👉 Большое обновление документации Firebase для Flutter;

Самый популярный пост месяца:
❤️ Изменение работы с http в Dart

#главное

Мы уже не представляем общение в сети без эмодзи. С их помощью выражаем эмоции 😂😛😱, подчёркиваем важность информации ❗✅, используем в рабочих статусах ❌📅🏠. А ещё с ними очень «приятно» иметь дело разработчикам.

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

Происходит это, потому что Dart работает со строкой как последовательностью кодовых единиц UTF-16, при этом эмодзи могут восприниматься как последовательность из двух и более символов, хоть и отображаются как один. Это создаёт проблемы при вычислении длины строки, замене и поиске. Исправить подобные проблемы при работе со строками можно при помощи библиотеки characters, которая позволяет:

👉 работать со строкой как с набором графем;
👉 поддержка методов, имеющихся в String;
👉 поддержка работы с эмодзи и национальными символами;

К тому же:

👍 вошла во Flutter и может использоваться без отдельного подключения;
👍 имеется встроенная имплементация для TextField;

Статья Tao Dong.

#библиотека

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

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

Он умеет:

👉 Работать по различным типам входных данных, среди которых Json, Json Schema, классы моделей на языке TypeScript, Postman;
👉 Конвертировать источник в модели для различных языков, в ряду которых есть и Dart;
👉 Гибкие настройки для генерируемой модели: расположение и название encoder и decoder, настройки полей модели и многое другое;
👉 Удобная веб-версия или API на ваш выбор.

#tools

Большинство потребностей современный человек может удовлетворить при помощи смартфона. Заказать еду, купить билеты, вызвать такси — рука машинально тянется к нужной иконке. Поэтому важно, чтобы приложения были одинаково удобны всем пользователям, в том числе и людям с особенностями зрения.

Проверить доступность вашего приложения для людей с особым восприятием цветов, поможет библиотека Color Blindness on Flutter.

Она позволяет:

👉 Используя специальную схему colorBlindnessColorScheme, проверить как выглядит приложение для людей с разным цветовосприятием - протаномалией, протанопией, дейтеранопией и другими.
👉 Имеется возможность написания тестов для автоматизации проверки.

📌 Протестировать работу библиотеки по ссылке

#библиотека

С 11 по 14 ноября пройдёт одна из крупнейших конференций по мобильной разработке в России — Mobius. Несмотря на то, что в этот раз конференция пройдёт в онлайне, нас ожидает множество интересных докладов, среди которых каждый найдёт что-то интересное: от натива до кроссплатформы, от ликбеза до хардкора.

Особенно радует, что интерес к Flutter становится всё больше и в этот раз ему посвятят целых 5 докладов на конференции.

👉 Прожаренная птичка: Готовим Flutter к промышленному использованию от Владимира Иванова (EPAM);
👉 Flutter — live coding declarative UI от Светланы Кривошеевой (Effective);
👉 Круглый стол. Declarative UI live coding от Петра Козлова (Redmadrobot);
👉 Flutter под капотом от меня — Михаила Зотьева (Surf);
👉 Воркшоп. Flutter Zero LiveShow: Для начинающих, профессионалов и начинающих профессионалов от Александра Денисова (EPAM).

📌 Подробная программа и купить билеты на сайте мероприятия

#cобытия

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

Один из таких пакетов — Rive. Он позволяет:

👉 Работать с ассетами анимаций, при изменении анимации не требуется менять код;
👉 Смешивать несколько анимаций между собой;
👉 Имеется поддержка скелетных анимаций;
👉 Trim Paths, позволяющий быстро и легко создавать анимированные значки, эффекты движения, эффекты частиц;

О том, как подружить Rive и Flutter в статье от Maxwell Talbot и Matt Sullivan.

#статья

Тестирование приложения — важный процесс разработки. Если его игнорировать, скорее всего для приложения наступят тёмные времена, вы погрязнете в исправлении постоянных багов или ещё хуже прекратите поддержку. Кроме тестирования кода, нужно уделить внимание проверке поведений в приложении. Тут не обойтись без хорошего тестировщика.

Но что если вы пишете не для бизнеса, а собственный пет проект, и у вас просто нет qa отдела? Или приложение настолько разрослось, что нагрузка на тестировщика стала слишком большой?

Здесь на помощь и приходят автотесты. Организовать процесс автоматического тестирования на Flutter поможет библиотека automated_testing_framework за несколько простых шагов:

👉 Добавить TestController в приложение;
👉 Добавить TestRunner в приложение и сконфигурировать его TestController-ом;
👉 Обернуть тестируемые виджеты в Testable;
👉 Создать JSON описание запускаемого теста;
👉 Запустить проверку;

📌 Подробнее об организации автоматического тестирования в статье от Ademir Villena.

#статья

Смотрите на классную анимацию и вроде к ней не подкопаться, но не покидает чувство, что какая-то она «не настоящая»? Чаще всего объяснение довольно простое — ваша анимация линейная, а в нашем мире почти не существует линейных процессов. Здесь на помощь и приходят кривые плавности или Easing Curves. Это кривые, описывающие каким образом должна изменяться анимация со временем: ускориться, замедлиться или даже инвертироваться.

👉 Имеются во Flutter из коробки;
👉 Множество встроенных стандартных кривых в классе Curves;
👉 Возможность самостоятельно описать кривую;

📌Подробнее о работе с кривыми плавности во Flutter читайте в статье от Gordon Hayes.

#статья

12 ноября в 18:00 Иннополис и Surf проведут Flutter meetup

🎙Спикеры и эксперты:
— Андрей Савостьянов, Flutter dev, Surf
— Илья Вирник, TeamLead команды Flutter-разработки, Яндекс.Такси
— Евгений Сатуров, Flutter-TeamLead, Surf
— Сергей Кольцов, Flutter-разработчик, Яндекс.Такси

👉На митапе:
— Dependency Injection для Dart и Flutter проектов
— как сделать его декларативным (самогенерируемым) и при этом сохранить человеко-читабельность
— как подменить компоненты при тестировании
— как изолируются моки от production-кода

📌 Подробности и регистрация на странице мероприятия

#события

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

flutter build <your target platform> --analyze-size

На выходе мы получим build/<artifact_type>-code-size-analysis_<##>.json, который и хранит необходимую информацию: размер файлов Dart-кода, файлов нативного кода, ресурсов (графика, шрифты, прочие файлы).

Раздел App Size в DevTools помогает легко найти проблемы с размером сборки.

👉 Вывод подробной информации по различным частям приложения;
👉 Просмотр информации в виде дерева или таблицы;
👉 Сравнение двух отчётов, собранных с разных сборок.

📌 Подробная работа с инструментом описана в документации Flutter.

#документация

Любой Flutter-разработчик рано или поздно сталкивается с ошибками во время построения макета: различные overflow, unbounded error и многие другие. Если ошибки в логике отлаживать привычно и понятно, то что делать с этими?

Во Flutter есть удобный инструмент — Flutter Inspector, который позволяет:

👉 Просмотреть дерево виджетов;
👉 Подробно изучить свойства каждого из виджетов;
👉 Отобразить границы виджетов;
👉 Выделять узлы и перемещаться по дереву;
👉 Воспользоваться Layout Explorer, который построит структуру выделенного макета;

📌Как работать с Flutter Inspector и с его помощью решать популярные проблемы в статье от Katie Lee.

Качественное мобильное приложение должно быть производительным. Плавность UI — залог хорошего пользовательского опыта. Этому не должны мешать подкапотные процессы: тяжелые операции и вычисления. Flutter использует язык Dart, который по концепции является однопоточным, поэтому нам следует обратиться к другим инструментам. Здесь нас и выручают изоляты.

👉 Изолированный процесс исполнения некоторого Dart кода;
👉 Обладает собственной областью памяти;
👉 Использует собственный event loop;
👉 Может общаться с другими изолятами путем передачи сообщений.

📌 О том, как работать с изолятами во Flutter читайте в статье Utkarsh Sharma.

#статья

Связать мобильное приложение с веб-ресурсом можно через один из множества сервисов. Один из них Branch.io.

Через этот сервис можно проассоциировать URL веб-страниц вашего сервиса с приложением, чтобы открывать его при переходе по соответствующим ссылкам.
Важно: редирект в приложение произойдёт только в том случае, если оно уже установлено на устройстве.

📌 О том, как настроить использование Deep Links во Flutter приложении в статье от Jaimil Patel.

#статья

С минуты на минуту начнётся ещё одно мероприятие, на этот раз целиком посвященное Flutter. Большая и по-настоящему нордическая конференция Flutter Vikings пройдёт с 17 по 19 ноября.

Вас ждёт:

👉 🇫reyja
👉 🇱oki
👉 🇺llr
👉 🇹hor
👉 🇹uisto
👉 🇪ir
👉 🇷indr

Много Flutter🔥
Смотрите на сайте мероприятия

#события

Сейчас во Flutter существует сразу несколько популярных архитектур, с помощью которых строятся приложения. Одна из них — Redux. В основе лежит несколько правил:

👉 всё состояние приложения хранится только в одном месте — store;
👉 состояние (state) доступно только для чтения;
👉 для изменения состояния необходимо осуществить действие (action), которое породит новое состояние;
👉 изменения производятся с помощью чистых функций.

📌 О том, как можно приготовить Redux для Flutter в статье Paulina Szklarska.

#статья

4-5 декабря в четвёртый раз пройдёт конференция русскоязычного сообщества Dart и Flutter разработчиков DartUP 2020. В этом году — онлайн. Спикеры из Google, Wrike, Yandex, EPAM и др. Я и мой коллега Женя Сатуров тоже в программе.

👉Будет два потока докладов по Dart и Flutter: один на русском, другой на английском.

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

Несмотря на онлайн, организаторы обещают сохранить тёплую и неформальную атмосферу предыдущих «дартапов» и доброжелательный дух сообщества.

Вас ждёт много новых форматов, а не просто «говорящие головы» три часа подряд.

✅Регистрация бесплатная на сайте Dartup.ru.
#события

Для показа сообщений пользователю довольно часто используется SnackBar. До текущего момента, взаимодействие с ним осуществлялось через Scaffold с использованием BuildContext. У подобного подхода есть ряд недостатков, которые могут привести к ошибкам:

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

Данные проблемы призван решить ScaffoldMessenger, который можно получить из MaterialApp. Управление SnackBar теперь можно осуществлять с его помощью. Пока только в версиях Flutter 1.23.0-13.0.pre. Ждём в stable.

📌 Это breaking change. О том как осуществить миграцию читайте в документации Flutter.

#документация #breaking_changes