​Надоело держать на компьютере множество эмуляторов, чтобы проверять как приложение выглядит на разных устройствах?

Библиотека Device Preview for Flutter от Aloïs Deniel избавит от такой необходимости. Она предоставляет виджет DevicePreview, который выглядит как реальное устройство с запущенным на нём приложением. Удобнее всего будет работать с этим виджетом на планшете или его эмуляторе.

Гибкие настройки, позволят:

👉 На лету переключать множество доступных вариантов Android и iOS устройств;
👉 Задавать кастомные настройки высоты и ширины устройства;
👉 Менять ориентацию устройства;
👉 Менять настройки языка, темную/светлую тему, скейлинг текста;
👉 Делать скриншоты экрана.
#библиотека

Этот канал посвящен Flutter, но в этом посте речь про Dart — язык без которого Flutter не был бы таким, каким мы его знаем и любим.

А у Dart сегодня, ни много ни мало 9-ый День Рождения!!! 🎉🎉🎉

Так что, с Днем Рождения, Dart! Расти большой, не стань «лапшой»! 😜

Flutter 1.22 принёс нам новые кнопки. Несмотря на то, что старые останутся доступны, новые удобнее стилизовать. Каждой кнопке из нового набора соответствует своя собственная тема. Эти темы содержат в себе все основные стилевые настройки, которые можно применять к кнопкам.

Обновлённые кнопки:

👉 TextButton с TextButtonTheme вместо FlatButton;
👉 ContainedButton с ContainedButtonTheme вместо RaisedButton;
👉 OutlinedButton с OutlinedButtonTheme вместо OutlineButton;

📌 Подробнее о работе с новыми кнопками в статье от Jelena Jovanoski.

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

Вам поможет Flutter Version Manager от Leo Farias. Это решение упрощает управление версиями фреймворка, позволяя установить параллельно несколько версий и быстро переключаться между ними.

👉 fvm install stable/beta/<version> установит нужную версию;
👉 fvm use stable/beta/<version> переключит на необходимую вам в данный момент версию Flutter;

❗Не забывайте, что при использовании fvm, все нужные flutter-команды также необходимо вызывать через fvm (например, fvm flutter doctor).
#библиотека

Как часто вам приходится начинать разработку, пока backend ещё не готов? 😱

Если вы не живёте в идеальном мире, скорее всего постоянно. Вместо того, чтобы хардкодить данные, которые вы ожидаете и тратить на это драгоценное время разработки, попробуйте Faker от Jesper Håkansson для генерации фейковых данных.

Он поддерживает множество различных категорий данных, среди которых:

👉 internet: email, различные ip адреса и имена пользователей;
👉 currency: коды и названия валют;
👉 person: имена, фамилии, префиксы обращений;
👉 имеется возможность генерировать рандомный текст, наборы чисел, списки объектов и много другое.
#библиотека

Если вы хотя бы раз работали в хорошо налаженной автоматизированной системе, вряд ли сможете снова вернуться к «ручной» сборке. CI/CD успешно закрепился в профессиональной жизни разработчиков как инструмент, упрощающий жизнь и решающий массу рутинных задач. Это настолько удобно, что хочется использовать CI/CD даже в пет-проектах.

Существует множество сервисов, предоставляющих готовые настраиваемые инструменты. Codemagic — один из них.

👉 легко настраивается из коробки для Flutter, Android, iOS, React Native;
👉 полная интеграция с Azure DevOps, GitHub, GitLab, Bitbucket и другими git-репозиториями;
👉 удобная публикация в популярных каналах распространения, среди которых App Store, Google Play Store, TestFlight, Firebase App Distribution, и многие другие;
👉 имеется бесплатный вариант подписки с 500 минутами на macOS VM;

Смотрите короткий видеотуториал по настройке Codemagic CI/CD от авторов этого решения.

🔨 В продолжение ко вчерашнему посту про CI/CD, ещё один удобный инструмент автоматизации сборки проекта — GitHub Actions.

Он предоставляет множество возможностей, среди которых:

👉 полная интеграция с GitHub с возможностью гибкой настройки, запускайте автоматизированные процессы в ответ на push, tag, issue, или новый релиз;
👉 логгирование всех шагов в realtime;
👉 использование мульти-контейнеров для тестирования;
👉 бесплатный безлимит для публичных репозиториев;
👉 для приватных репозиториев 2000 минут в месяц по бесплатному тарифу, но в случае работы на macOS минута тарифицируется x10 😞.

Про то, как выжать из GitHub Actions максимум, подробно написал мой коллега Евгений Сатуров в статье «Используем бесплатные возможности Github Actions для CI/CD на Flutter-проекте».
Читайте и выбирайте инструменты, которые будут удобны именно вам!
#статья

С последним обновлением Dart SDK пришло важное изменение: при исходящем сетевом соединении выполняется проверка, разрешено ли использовать незащищенный протокол в данном случае.

В случае с Android Emulator, который соединяется с компьютером по 10.0.2.2, такое соединение запрещено, если это не указано напрямую в манифесте приложения. В случае, если вы решите использовать текущую beta-версию Flutter, добавьте в манифест дебаг-сборки следующий код:

<application android:usesCleartextTraffic="true">

#фиксы

Буквально на днях команда 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.

#статья