Сёрф Flutter-разработка

Как правильно выполнять операции с деньгами в Dart У меня есть традиция. Каждый раз, когда начинается новый проект, я объясняю кому-то из команды, что выполнять операции с деньгами при помощи базовых вещественных типов в Dart нельзя ни в коем случае. Рассказываю, почему так происходит и что делать в карточках 👆👆👆 И держи ссылки на пакеты, которые помогут сделать всё корректно: 🔹 decimal 🔹 money2

Принимаем заявки на Surf Weekend Study Jam 👨🏻‍💻 Начинаем на следующих выходных, программа такая: 📌 8 апреля — слушаешь лекции от крутых Сёрферов, подробности на карточках 👆🏻 📌 9 апреля — решаешь задачу из нашего курса по Flutter (обновляем его, про это расскажем позже) Далее подведём итоги, самых лучших позовём на собеседование — и бац, ты уже стажируешься во Flutter-команде Surf! Не тяни — заполняй заявку до 6 апреля 👍🏻

Слушаем новый эпизод Flutter Dev Podcast 🎧 Разложили по полочкам обновление 3.7 — там и 19 новых виджетов, и долгожданные фоновые изоляты, и превью нового графического движка! У микрофона Cёрферы Евгений Сатуров и Марк Абраменко, Михаил Матюнин из Fox и aso.dev founder Игорь Кравченко. Подписывайcя на подкаст в Telegram и слушай на всех доступных площадках: Soundcloud | Яндекс.Музыка | Spotify | Apple Podcasts | CastBox | Google Подкасты | VK

Пакет Share — простая как топор библиотека Передал

Share.share(‘message’);

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

Share.share(‘message’);

, но консоль стала ругаться на MethodChanel её при выполнении.  Оказывается, в случае с планшетами не стоит пренебрегать дополнительным параметром

sharePositionOrigin

. По умолчанию, система на планшетах не знает, где и какого размера отрисовать стандартный диалог Share.  Обсуждение и решение проблемы >> ⚠️ Главное: если приложение делается и для планшетов тоже, всегда передавайте

sharePositionOrigin

.

Бывает, что разработчики допускают орфографические ошибки в коде, комментариях, документации Это кажется не критичным, но на деле вызывает проблемы: 🔹 отвлекает во время ревью; 🔹 нужно потратить время, чтобы поправить ошибки после ревью; 🔹 может ввести в заблуждение, если есть ошибка в названии параметра или класса; 🔹 ну и просто немного раздражает. Решение очевидно: после установки красивой темы нужно вместе с другими плагинами сразу же настроить проверку орфографии. В карточках рассказываем, как это сделать.

Текстовые виджеты: почему на устройствах иногда «едет» вёрстка При работе с текстовыми виджетами может произойти ситуация, когда в эмуляторе всё работает нормально, а на реальном устройстве вёрстка неожиданно меняется. Всё дело в textScaleFactor Это свойство есть у виджетов Text и RichText Text scale factor — один из Accessibility-параметров, его задаёт пользователь у себя на устройстве. Отвечает за масштаб текста: например, слабовидящий человек ставит коэффициент 2, чтобы читалось лучше. Текст становится в два раза крупнее указанного в коде приложения fontsize — и всё, приехали. До свидания, красивая вёрстка 🥲 🤔 Подробнее о том, как приложение и текстовые виджеты работают с textScaleFactor и как подготовиться к тому, что пользователь может изменить масштаб текста, — в нашей статье на Хабре. Читать статью >>

Маленькая «неожиданность» с массивами, или как вместо 24 значений в каждом массиве получилось 168 🙄 Что случилось Нужно было посчитать средние значения в каждый час каждого дня недели. А затем собрать их в массив массивов, где массив представляет собой день недели, заполненный средними значениями за каждый час. То есть

List<List<double>>

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

final valuesPerWeekday = List.filled(7, <double>[])

и заполнять уже в формате 

valuesPerWeekday[weekday].add(avgValue)

. Каково было удивление, когда вместо 24 значений в каждом массиве я обнаружил 168 😱 В чём подвох Открываем документацию к конструктору List.filled и читаем:

/// All elements of the created list share the same [fill] value

Так как массивы, да и вообще списочные типы, передаются по ссылке, получаем полный 🥴, когда натыкаемся на непредвиденные результаты. Выводы 1️⃣ Читайте внимательно документацию к тому, что используете, и не повторяйте моих ошибок. 2️⃣ Пишите документацию на свои реализации сполна. Обязательно подсвечивайте неочевидные кейсы, чтобы потом волосы на голове не вырывать. 3️⃣ Используйте

List.generate(length, (index) => <double>[])

для таких генераций: на каждый индекс создастся уникальный объект.

Статья на Хабр, о которой говорит Саша → «Что ждёт Flutter в будущем»

Пост признания в любви… К корове! 🐮 Мы вам не рассказывали, но… Наша Flutter-команда не просто работает вместе: мы дружим, но — на расстоянии. Нас разделяют не только тысячи километров, часовые пояса, но и границы государств. В какой-то момент мы поняли, что некоторые члены команды никогда не видели своих коллег лично. Так родилась идея собраться всем вместе в одной точке. Привет, Питер! Чтобы продуктивно поработать, мы арендовали коворкинг. Который с чьей-то лёгкой руки превратился в… коровкинг. Этот новояз нам так понравился, что корова стала символом единства отдела: у нас появился мерч отдела с коровкой и логотип этого канала. Вот так корова стала для Flutter-отдела по-настоящему священным животным 😜

Ищем опытного Flutter-разработчика 🏄‍♂️ В Surf работают с Flutter уже больше трёх лет. За это время реализовали 25+ проектов, написали множество статей, выступали на конференциях. Сейчас в команду нужен специалист, который будет разрабатывать новые и поддерживать текущие приложения. Ты также будешь участвовать в жизни команды, развивать личный бренд и прокачивать скиллы. Требования к вакансии смотри на карточках. Если твои навыки подходят — пиши нашему рекрутеру и отправляй резюме.

В карточках рассказываем, какие сюрпризы поджидают разработчика при создании стриминга на Flutter. Знаем об этом не понаслышке: все шишки набивали на собственном опыте, когда пилили платформу видеостриминга для The Hole 😉

Поговорим о golden-тестах 😎 Мы в Surf убеждены, что golden-тесты — главные тесты, которые нужны в проектах. Многие, кстати, могут знать их как «скриншот-тесты». Как это работает Реализуем UI-компонент — например, кнопку. Делаем скриншот, чтобы остался золотой образец — отсюда и название. С ним сверяют другие скриншоты при следующих прогонах. Если они различаются хотя бы на один пиксель, считаем, что UI-компонент сломался. Чем плохи golden-тесты из коробки, или спасибо golden_toolkit Flutter поддерживает скриншот-тесты из коробки, но в документации про это почти ничего не говорится. Да и в целом из хорошего в них только то, что они поддерживаются 😁 В остальном — неудобный API, сложная настройка: все golden-тесты не получится настроить в одном месте. Но! Ребята из Flutter-команды Ebay написали обёртку — пакет golden_toolkit. По умолчанию подключайте его сразу: документация там подробная и понятная. Что такого особенного даёт golden_toolkit 1️⃣ Билдеры для тестирования виджетов в различных сценариях. Например, есть конфигурация виджета для темной и светлой темы: это два различных сценария, которые нужно протестировать. 2️⃣ Multiscreen-тестирование. Можно писать golden-тесты не только на отдельные UI-компоненты, но и на целые экраны, и смотреть, как они будут выглядеть на самых разных девайсах. 3️⃣ Централизованная конфигурация тестов и удобный API, через который можно с ними работать. Golden-тесты — это круто Да, они не помогут протестировать нюансы реализации или бизнес-логику. Но мы пишем мобильные приложения — это фронтенд: от проблем с корректностью отображения и вёрсткой golden-тесты спасают. ❓Пробовали golden-тесты?

Windows Subsystem for Android: полезные ссылки 🔹 Официальная документация Microsoft  🔹 Способы установки WSA  🔹 Установка GApps  🔹 Подключение по ADB и установка сторонних APK вне сторов

Windows Subsystem for Android (WSA) В 2021 году компания Microsoft выпустила новую операционную систему Windows 11. Одна из главных фич — запуск Android-приложений внутри системы безо всяких эмуляторов. Как это работает По сути внутри Windows запускается виртуальная машина с AOSP версии 12L (SDK level = 32). Версия Android будет обновляться с обновлениями самой Windows. Все настройки Android берутся из Windows: приложения сами подхватывают цветовую тему устройства, дату и время, разные accessibility-фичи, устройства ввода-вывода и прочее. Как устанавливать приложения Официальный путь установки Windows Subsystem for Android — это установить из Microsoft Store приложение Amazon AppStore, пока доступный только в локали США. Есть обходные пути: например, через терминал PowerShell. Сейчас, к сожалению, нельзя просто скачать APK-файл, два раза кликнуть по нему и установить приложение. Но это можно сделать через ADB-команды: да, можно подключиться к виртуальному девайсу через ADB-командой adb connect. Можно ли дебажить приложения Да! Тут есть поддержка подключения через ADB, следовательно, мы можем запускать любые приложения через Android Studio. Amazon AppStore? А Google Play Services? Пока нет официального способа установить сервисы Google Play на WSA, но энтузиасты уже научились устанавливать GApps. Можно будет даже открывать Google Play и устанавливать оттуда приложения. Работать может нестабильно, но работать будет. Некоторые нюансы разработки 🔹 Нет поддержки виртуальной клавиатуры. Она не будет открываться при нажатии на текстовое поле: у нас же есть физическая клавиатура ноутбука или виртуальная клавиатура самой Windows. 🔹 У окна с Android-приложением можно свободно менять размер. 🔹 Чтобы менять дату, тему или размер шрифта, эти и прочие параметры необходимо менять в параметрах Windows. 🔹 Для разработчиков есть приложение Windows Subsystem for Android settings, в котором есть настройки виртуальной машины, системы Android и настройки разработчика.

Особенности абстракции в Dart Продолжаем говорить про ООП. В предыдущих сериях: 🔹 ООП в Dart: особенности реализации 🔹 Особенности инкапсуляции в Dart 🔹 Особенности наследования в Dart В рамках ООП абстрагирование — способ выделить набор наиболее важных атрибутов и методов и исключить незначимые. С абстракцией мы постоянно сталкиваемся в обычной жизни: например, рассуждаем о сложном механизме типа смартфона, не упоминая отдельные детали, из которых он состоит. Абстрактные классы В Dart существуют абстрактные классы. От обычных классов они отличаются тем, что создать объект такого класса нельзя. Абстрактный класс нужен, чтобы от него могли наследоваться потомки — обычные классы, объекты которых создавать можно. Абстрактные классы иногда путают с интерфейсами👇👇👇 Интерфейсы Интерфейс действительно похож на абстрактный класс. На самом деле это не класс, а пустышка с перечислением абстрактных методов без имплементации. Интерфейс имеет декларативную природу: чистый контракт без кода. В языке Dart абстрактный класс и интерфейс создаются одинаково:

abstract class ClassName {}

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

Почему во Flutter стоит выбрать GraphQL вместо обычного REST API Привет, меня зовут Иван Колчев, я — Flutter-тимлид в Surf. В этом посте расскажу вам о GraphQL, его преимуществах и отличиях от REST, зачем его использовать и как делать это во Flutter. Что такое GraphQL GraphQL — язык запросов, используемый для клиент-серверного взаимодействия. Он не зависит от транспортного протокола, но почти всегда обслуживается через HTTP. Основная задача GraphQL — сделать коммуникацию между сервером и клиентом более гибкой. Отличия GraphQL от обычного REST API GraphQL создали как альтернативу REST API. Основные преимущества: 🔹 Клиент сам решает, какие данные нужны от сервера: это позволяет получать нужные данные со стороны клиента без изменений со стороны сервера или наоборот убирать ненужные. 🔹 GraphQL позволяет объединять несколько запросов в один: это экономит время. 🔹 В GraphQL используется система типов для описания данных: это гарантирует более строгую спецификацию данных при взаимодействии клиента и сервера. GraphQL во Flutter Во Flutter есть огромное количество вариантов реализации GraphQL-запросов. Мне больше всего нравится библиотека ferry. Она позволяет: 🔹 Легко генерировать объекты для запросов, ответов, GraphQL-переменных, используя лишь GraphQL-схему. 🔹 Легко отправлять запросы благодаря сгенерированным объектам. 🔹 Достаточно просто кэшировать запросы. GraphQL — прекрасная технология для API ✅ Легко использовать с Flutter. ✅ Позволяет оптимизировать запросы и сделать их более гибкими. ❓А вы что думаете про GraphQL во Flutter?