Сёрф 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-тесты?

Особенности абстракции в 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;
}

Для обозначения protected можно использовать аннотацию @рrotected из пакета meta: она предупреждает о неверном поведении, если использовать свойство вне наследника или родителя.

______
В следующих постах продолжим разговор про ООП: разберём особенности наследования, абстракции и полиморфизма в Dart 🙌

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

Бывает полезно для лайв-кодинга или парного программирования: с 🔥 и 💥 на экране тяжело отвлечься даже от скучного рефакторинга. А ещё эффекты помогают следить за местоположением курсора.

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

На этом я завершаю мою небольшую подборку. Всем спасибо за прочтение.

❓А какими плагинами пользуетесь вы? Делитесь обязательно в комментариях 👇