Заметки мобильного разработчика

Hola, Amigos! На связи Ярослав Цемко, Flutter dev Amiga. Бывают ситуации, когда нам нужно сделать специфическое поведение при отрисовке виджета, например, изменение верстки при заполнении контента.

В качестве примера рассмотрим сообщение в чате. Оно состоит из текста сообщения и даты отправления. Нам необходимо перенести сообщение на следующую строку, если в строке заканчивается место, которое перекрывает дата отправления.

Используем RenderObject для решения задачи. Это объект, который отвечает за размер, отрисовку, положение и учет ограничений. Он позволяет гибко настроить отрисовку на более низком уровне и задать нужное поведение верстки виджета при определенных условиях.

RenderObject состоит из трех важных методов:
1️⃣ performLayout — выясняет размер объекта, который требуется отрисовать.
2️⃣ Paint — собирает всю информацию о данном RenderObject, полученную из performLayout и отрисовывает виджет в соответствии с ней.
3️⃣describeSemanticsConfiguration — возвращает текущую семантику (подробнее тут) в контексте нахождения в дереве семантики.

3 способа построить виджет c использованием RenderObject:
🔵LeafRenderObjectWidget — виджет, в котором не предполагаются дочерние элементы.
🔵MultiChildRenderObjectWidget — виджет, который может содержать в себе один список дочерних элементов.
🔵SlottedMultiChildRenderObjectWidget — виджет, в котором содержатся именованные вложенные элементы, которые располагаются относительно друг друга в сетку.

При создании виджета с renderObject нужно переопределить родительские методы:
⭕️createRenderObject — поведение при создании renderObject.
⭕️updateRenderObject — поведение при обновлении renderObject.

RenderObject можно создать, наследуясь от класса RenderBox. RenderBox — это представление объекта в прямоугольной системе координат.

Скоро напишу статью с примером настройки виджета, с использованием RenderObject. А пока рассказывайте в чате, был ли у вас подобный опыт?

Всем хорошего кода!