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? Пишите в комментариях 🙌

Почему во 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?

Особенности абстракции в Dart

Продолжаем говорить про ООП. В предыдущих сериях:
🔹 ООП в Dart: особенности реализации
🔹 Особенности инкапсуляции в Dart
🔹 Особенности наследования в Dart

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

Абстрактные классы
В Dart существуют абстрактные классы. От обычных классов они отличаются тем, что создать объект такого класса нельзя. Абстрактный класс нужен, чтобы от него могли наследоваться потомки — обычные классы, объекты которых создавать можно.

Абстрактные классы иногда путают с интерфейсами👇👇👇

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

В языке Dart абстрактный класс и интерфейс создаются одинаково:

abstract class ClassName {}

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

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

Поговорим о 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-тесты?