Михаил Зотьев — Flutter под капотом

• Представление спикера Михаила Зотова и эксперта Евгения Кота.  

• Михаил - бывший гейм-девелопер, теперь Flutter-разработчик.  

• Евгений - руководитель отдела разработки в компании RAIK и Flutter-разработчик.  

• Евгений рассказывает о ситуации в Праге: все сидят по домам, носят маски, моют руки.  

• Михаил делится, что в Воронеже все как обычно, но меньше людей и машин в центре города.  

• Михаил рассказывает о баге в игре, который предсказывал погоду.  

• Сова в игре пролетала задом наперед, что всегда приводило к дождю.  

• Ведущий оставляет Евгения и Михаила наедине для обсуждения Flutter.  

• Евгений объясняет, как он стал экспертом по Flutter, работая в компании RAIK.  

• Михаил рассказывает, как увлекся мобильной разработкой и Flutter после посещения метапа.  

• Flutter покорил его своей простотой и гибкостью.  

• Михаил демонстрирует простую анимацию, которую можно реализовать с помощью Flutter.  

• Второй пример - сложная анимация, созданная коллегой Антона Докуса.  

• Flutter позволяет создавать приятные пользовательские интерфейсы с помощью базовых виджетов.  

• Доклад будет посвящен тому, как использовать Flutter на максимум.  

• Евгений предлагает алгоритм построения UI: разбить на части, понять их связь и построить макеты.  

• Flutter использует виджеты, элементы и рендер-объекты для реализации этого алгоритма.  

• Flutter использует виджеты как центральный класс.  

• Виджеты являются неизменяемыми описаниями частей пользовательского интерфейса.  

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

• Для изменяемой конфигурации используется сущность стейт.  

• Стейт не связан с виджетом, а с элементом.  

• Виджет может быть включен в дерево элементов несколько раз.  

• Элемент представляет виджет в определенном месте дерева.  

• Виджет может меняться со временем, а элемент остается неизменным.  

• Жизненный цикл элемента включает создание, встраивание, активацию и обновление.  

• Элемент может быть обновлен или пересоздан при изменении виджета.  

• Пересоздание элемента происходит при удалении старого и создании нового.  

• Элементы могут быть переиспользованы при наличии глобального ключа.  

• Билд контекст управляет положением виджета в дереве.  

• Элементы делятся на компоновочные и отображающие.  

• Компоновочные элементы строят под-дерево с помощью других элементов.  

• Рендер обжиты отвечают за отрисовку и расположение элементов.  

• Они могут иметь родительские объекты и поля для хранения свойств.  

• Рендер обжиты могут использовать различные системы координат и протоколы ограничения.  

• Пример с падингом, стейтлас виджетом и рич текстом.  

• Построение дерева элементов и рендер обжитов.  

• Проверка типа элемента для получения необходимого рендер обжита.  

• Виджеты легкие конфигурации, элементы и рендер обжиты тяжелые.  

• Flutter старается переиспользовать элементы и рендер обжиты для повышения производительности.  

• Пример простой верстки с текстом "мобиус" и его центрированием.  

• Флатер строит три дерева виджетов.  

• При изменении текста нужно обновить связи между виджетами.  

• Метод кен апдейт сравнивает старые и новые виджеты для обновления связей.  

• Флатер сравнивает сингл чайлд тренда обжект элемент с центром.  

• Стейклас элемент сравнивается с текстом, так как текст по дефолту это стейтлас элемент.  

• Свойства сравниваются и обновляются в рендер параграф.  

• Пример с двумя деревьями: текст, сайс бокс и айкон.  

• При изменении структуры дерева флатер не переиспользует элементы.  

• Для переиспользования используется глобальный ключ.  

• Глобальный ключ используется для переиспользования элементов при изменении структуры.  

• Механизм переиспользования строится на мапе соответствия глобального ключа.  

• Флатер контролирует использование глобальных ключей, чтобы избежать ошибок.  

• Вопросы о контексте и провайдерах.  

• Контекст используется для построения под дерева в разных местах.  

• Сравнение с паттерном MVC: виджет как модель, элемент как вью, рендер как модел.  

• Флатер делится на три уровня: уровень фреймворка, служебные классы и другие.  

• Эти уровни помогают в написании приложения и работе с фреймворком.  

• Уровень движка содержит классы и библиотеки для работы фреймворка.  

• Уровень фреймворка построен в виде слоеного пирога, от высокоуровневых к низкоуровневым.  

• Включает общие виджеты, отрисовку и фундаментальные классы.  

• Базовые классы, такие как BinderBase, обеспечивают связь между компонентами.  

• Конкретные реализации включают ServoBinder, PтинBinder, RenderBinder, WidgetBinder, Scheduler, SemanticBinder и GestureBinder.  

• Метод runApp в файле Binder.dart расширяет виджет приложения и прикрепляет его к экрану.  

• Используются методы ShadowRootWidget и ShadowFrame.  

• Метод attachWidget организует связь между тремя деревьями: виджетов, отрисовки и элементов.  

• Используется RenderView как корневой объект дерева отрисовки.  

• Метод scheduleFrame подготавливает запуск кадра без ожидания системного сигнала.  

• Взаимодействие между деревьями налажено через механизмы Binder.  

• Порядок подключения Binder важен для корректной работы приложения.  

• Изменение порядка может привести к странному поведению.  

• Включает фазы анимации, микротасков, сборки, построения макетов, композиции, отрисовки и семантики.  

• Buidler участвует в фазах сборки и завершения сборки, обеспечивая обновление элементов и управление памятью.  

• Метод Rebuild вызывается в трех случаях: из BuildOwner, из компонентных элементов и при обновлении этих элементов.  

• Реализация Rebuild у каждого элемента разная: RenderObject обновляет свойства, а композиционные элементы вызывают метод build.  

• Метод build возвращает виджеты, по которым определяется, можно ли обновить элемент.  

• Если элемент можно обновить, его обновляют, иначе удаляют и строят новый.  

• Вызов через BuildScope работает по списку элементов для обновления.  

• Метод ShadowBuild вызывается при активации из деактивированного состояния, переиспользовании, старте приложения и других случаях.  

• PipelineOwner используется с четвертой по восьмую позицию в списке на построение кадра.  

• Он хранит список объектов для обновления, в данном случае рендер-объектов.  

• Методы Layout и CompositeBuild пересчитывают макеты и решают, что нужно перерисовать.  

• Flutter использует линейную нацеленность на построение и сулинейное обновление.  

• Он стремится проходить по дереву максимум два раза: проход вниз и проход вверх.  

• Оптимизация включает использование ограничений от родителей и жестких ограничений.  

• Глубокое понимание механизма рендеринга полезно для решения задач.  

• Flutter предоставляет различные варианты решения одной и той же задачи, что позволяет выбирать более простое или производительное решение.  

• Пример: реализация внутренней тени с использованием стека контейнеров или рендер-объектов.  

• Доклад подходит к концу, и автор рекомендует три телеграм-канала для получения полезной информации о Flutter.  

• Вопросы и ответы о проблемах Flutter: Flutter Web еще сырой, но мобильная разработка на Flutter развивается быстро.  

• Flutter - молодой фреймворк, и найти работу для его разработчиков сложнее, чем для Android-разработчиков.  

• Компания Surf Hunt активно ищет Flutter-разработчиков.  

• Меньше доступных ресурсов и рецептов для работы с Flutter по сравнению с iOS и Android.  

• Приглашение присоединиться к обсуждению в дискуссионной зоне.  

• Благодарность за доклад, который был признан хардкорным и информативным.  

• Вера в потенциал фреймворка Flutter и надежда на рост числа докладов о нем.  

• Вопрос о возможности Flutter победить React Native в кросс-платформенной гонке.  

• Рекомендация доклада коллеги Димы на Хабре, который сравнивает работу с React Native и Flutter.  

• Обсуждение вкусовщины в выборе фреймворков и возможность использования Flutter в Facebook.  

• Призыв к участию в дискуссионной зоне для обсуждения темы.  

• Передача слова партнерам для дальнейшего обсуждения.