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

В карточках рассказываем, какие сюрпризы поджидают разработчика при создании стриминга на 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?

FAQ по анимациям во Flutter ❓Почему нужно добавлять SingleTickerProviderStateMixin ко всему виджету, когда используем AnimationController, но не нужно при использовании AnimatedContainer? SingleTickerProviderStateMixin инкапсулирует логику счётчика, который говорит виджету, что он должен перерисоваться. Он привязывается к жизненному циклу виджета, в котором происходит анимация.  В AnimatedContainer на самом деле тоже используется AnimationController, просто находится он ниже по дереву. AnimatedContainer скрывает это за декорацией. ❓Как я могу создать неявную анимацию для виджета, который не находится в библиотеке Flutter? Даже неявная анимация использует «под капотом» тот же самый AnimationController.  Мы обязательно сделаем воркшоп по созданию своей неявной анимации, но в рамках этого текста я могу подсказать только использовать stateful-виджет, AnimationController и метод жизненного цикла didUpdateWidget, который поможет вам понять, что виджет изменился «снаружи». ❓Как AnimatedContainer при изменении цвета узнаёт, какие цвета ему нужно показывать в промежутке? Это достигается при помощи линейной интерполяции. Линейная интерполяция — это функция, которая помогает нам привести значение одного диапазона к значению другого. Например, результатом интерполяции из диапазона 0–1 к 100–200 по значению 0,5 будет 150, по 0 — 100 и так далее. У представления цвета во Flutter (класс Color) есть фабрика lerp. Отправляем в функцию белый и чёрный цвета и значение 0,5. Получаем серый — средний цвет между ними.  Такие же фабрики есть у Alignment, BorderRadius и даже TextStyle. ❓Есть ли простой вариант запуска анимации один раз при старте экрана, не используя AnimationController? Самый простой вариант — использовать TweenAnimationBuilder. 💬 Что вам интересно узнать про анимации во Flutter? Пишите в комментариях 🙌

Особенности наследования в Dart Привет! С вами Дима Шевченко, Flutter-разработчик Surf, и мы продолжаем серию постов про ООП. 🔹 Первый пост: что такое ООП 🔹 Второй пост: особенности инкапсуляции в Dart Наследование — свойство системы, позволяющее описать новый класс на основе уже существующего.  Класс, от которого производится наследование, называется «предком» 👨‍🦳, «базовым» или «родительским». Новый класс – «потомком», «наследником» или «производным классом». Логично, что функциональность потомка частично или полностью заимствуется у предка. ⚠️ Применять наследование стоит аккуратно: при чрезмерно глубокой иерархии наследования придётся разбираться, кто от кого наследуется, и какой метод в каком случае вызывается. К тому же не все архитектурные требования можно реализовать с помощью наследования.

Анимации во Flutter: часть 2. Если так всё просто, зачем AnimationController В предыдущем посте разобрали, как сделать минимальную красивую анимацию: оказалось, это совсем не сложно. AnimationController — способ управления прогрессом выполнения анимации, от 0 до 100%. Он помогает покрывать потребности, которые не покрывают implicit-анимации: • Делать зацикленные анимации. • Управлять прогрессом выполнения анимации «на лету». • Анимировать несколько виджетов одновременно по одним и тем же правилам. Переводить процент прогресса в реальные значения помогает Tween. Реагировать на прогресс контроллера можно при помощи: • Добавления слушателя и обновления состояния stateful-виджета. • Виджета AnimatedBuilder, к которому подвязывается конкретный контроллер. С помощью этого виджета можно, например, локально управлять состояниями разных анимированных объектов в пределах stateful-виджета, в котором находится контроллер.

Elementary + Redux Краткая справка: что такое Elementary «Пробовал Elementary в связке с Redux. Мне понравилось», — написал нам читатель канала. Нам тоже нравится Elementary в связке с Redux. Он позволяет: ✔️ Управлять ребилдом только нужных элементов. ✔️ Сделать Redux state единственным источником правды. State иммутабелен: доступно только копирование текущего состояния данных: незапланированное изменение данных исключено. ✔️ Легко добавлять необходимые поля в state, необходимые actions и обработку соответствующим reducer при разработке новых фич. ✔️ Управлять всем, что касается загрузки и обработки данных. Как наиболее продуктивно связать Redux и Elementary, читайте в статье Flutter-разработчика Владимира Деева.

Анимации во Flutter — так ли это сложно Если вы когда-нибудь пользовались приложениями Surf на Flutter, то могли заметить, что анимации в них красивые и плавные. Новички часто воспринимают анимации как продвинутую тему, но на самом деле в этом нет ничего сложного. Меня зовут Марк Абраменко, я тимлид Flutter в Surf. В ближайших постах расскажу о ключевых аспектах анимаций, которые помогут вам сделать приложение красивее. Чтобы сделать минимальную красивую анимацию во Flutter, нужно знать только, что такое: 🔹 Duration, длительность анимации — время, которое анимация будет проигрываться. 🔹 Curve, кривая — функция, которая задаёт, как анимация будет двигаться в это время. С этими знаниями уже можно создавать красивые анимации. Понадобятся неявные — implicit — анимации из библиотеки Flutter. Это такие, в которых код не нужно писать с нуля — только изменять свойства и параметры готовых элементов. Чаще всего на практике мне приходится использовать виджеты AnimatedAlign, AnimatedOpacity и AnimatedContainer.

Особенности инкапсуляции в Dart Привет! С вами Дима Шевченко, Flutter-разработчик Surf, и мы продолжаем серию постов про ООП. Первый пост: что такое ООП Сегодня поговорим про инкапсуляцию. Инкапсуляция – свойство системы, позволяющее: 🔹объединить данные и методы, работающие с ними, в классе. 🔹скрыть детали реализации от пользователя, 🔹открыть только то, что необходимо при последующем использовании. Коммуникации в подвале дома, внутренности смартфона или автомобиля — так выглядит инкапсуляция в реальной жизни 😁 Чтобы скрыть данные, во многих ООП-языках существуют модификаторы доступа: • publiс — к свойству и методу может получить доступ любой желающий; • private — к свойству и методу могут обращаться только методы данного класса; • protected — то же, что и private, только доступ получают и наследники класса в том числе. В языке Dart отдельных модификаторов доступа нет🙅 Приватность свойств и методов можно задать только на уровне файла. Приватными считаются все члены класса, чьё имя начинается с подчеркивания "_".

class Person {
    final String _name;    
    final DateTime _birthday;

    Person(this._name, this._birthday);

    int getAge() => DateTime.now().difference(_birthday).inDays ~/ 365;
}

Чистая архитектура с Elementary Для разработки Flutter-проектов мы используем внутреннее решение — библиотеку Elementary. Она опирается на архитектурный паттерн Model-View-ViewModel (MVVM). Elementary помогает писать приложение по правилам Clean Architecture с разделением модулей на чёткие блоки согласно ответственностям: 🔹 UI — хранится в ElementaryWidget, 🔹 бизнес-логика — в ElementaryModel, 🔹 презентационная логика — в WidgetModel (WM). Благодаря такому разделению код становится проще для восприятия и тестирования. 👉 Подробнее об Elementary читайте в статье «Elementary: новый взгляд на архитектуру Flutter-приложений» 👉 Сам пакет Elementary доступен на pub.dev 🙋Уже знакомы с Elementary? Как впечатления?

ООП в Dart: особенности реализации Давайте поговорим про Dart — язык, на котором пишут все Flutter-разработчики. Понимание основных концепций даёт более полное представление о том, как именно различные компоненты большой системы общаются между собой. С ростом приложения возрастает сложность поддержки и развития кодовой базы. Если выстроить неправильную иерархию, можно втянуть себя в бесконечный рефакторинг или, что ещё хуже, в переписывание готового продукта. Итак, Dart — объектно-ориентированный язык программирования (ООП) с сильной статической типизацией и поддержкой обобщённого программирования. Что всё это значит ООП — методология программирования, основанная на представлении программы в виде совокупности объектов: каждый является экземпляром определённого класса, а классы образуют иерархию наследования. Сильная типизация. Язык не позволяет смешивать в выражениях различные типы и не выполняет автоматические неявные преобразования: например, нельзя прибавить к строке число. Статическая типизация. Конечные типы переменных и функций устанавливаются на этапе компиляции: компилятор на 100% уверен, где какой тип находится. Четыре основных принципа ООП • инкапсуляция, • наследование, • абстракция, • полиморфизм. Объектно-ориентированное программирование в рамках Dart хоть и похоже на ООП в C++, C#, Java или Kotlin, но имеет некоторые особенности, о которых мы расскажем в следующих постах.

5️⃣ Power Mode II: когда надо показать коду, кто тут главный Самое лучшее я оставил напоследок 😂 Power Typer — плагин, создающий взрывы и спецэффекты при наборе, вставке или изменении кода в редакторе. Бывает полезно для лайв-кодинга или парного программирования: с 🔥 и 💥 на экране тяжело отвлечься даже от скучного рефакторинга. А ещё эффекты помогают следить за местоположением курсора. В общем, пробуйте: может, ваш следующий шаринг экрана будет чуть интереснее. Но на постоянной основе этот режим использовать не рекомендовал бы: эффекты могут надоесть и даже мешать. На этом я завершаю мою небольшую подборку. Всем спасибо за прочтение. ❓А какими плагинами пользуетесь вы? Делитесь обязательно в комментариях 👇

4️⃣ Flutter Enhancement Suite — упрощение работы с зависимостями для Flutter Не мог обойти вниманием этот замечательный плагин. Основная его фича — выдавать подсказки, какие конкретно библиотеки в pubspec.yaml обновились и что требует повышения версии. Также он выдаёт контекстные подсказки, какие плагины существуют с похожим названием: это значительно упрощает добавление новых зависимостей в проект.

3️⃣ Atom Material Icons: иконки — просто космос Мне не нравится, как выглядит стандартная IDE. Возможно, это личная проблема, но я воспринимаю среду разработки с дефолтной темой как стандартные обои на телефоне или пустой рабочий стол. В общем, если вам, так же, как и мне, нравится кастомизировать всё и вся, этот плагин точно для вас. Он превращает скучные серые иконки в информативные иллюстрации, причём делает он это исходя из контекста: названия файла или папки, языка содержимого. В общем, повышение читаемости и лёгкость навигации в коде — однозначно плюс.

2️⃣ String Manipulation: изменение строк Зачастую приходится рефакторить строковые данные, и нет ничего хуже, чем необходимость вручную перебирать форматы: camel case в snake case или наоборот. Проблема особенно заостряется, когда появляются сотни строчек из, например, SQL или другой кодовой базы. Изменять их вручную — та боль, через которую проходить приходится каждый раз. Здесь на помощь приходит String Manipulation — плагин, позволяющий совершать десятки превращений строковых данных. Это, несомненно, сохраняет время и рассудок.