Сервис для общения: добавил отображение дат⁠⁠

Неделю не было новостей по сервису для общения. Пора это исправить!

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

Вот так в итоге работает отображение дат в окне переписки:

Что пришлось для этого сделать?

Вообще, в Flutter есть такая вещь как виджеты и благодаря им даже новички из коробки могут создавать достаточно сложные вещи в Flutter. Это что-то типа куба в Unity: открываешь сцену, кидаешь куб и думаешь, что сейчас как сделаешь супер-игру, как она всем понравится... А потом оказывается, что это была рекламная кампания и чтобы сделать действительно что-то производительное, придется в тонкостях разбираться что и как работает:

Это уже по опыту говорю, писал TotalReload, знаю как и что там работает:

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

Возникла проблема. Готового решения я не нашел. Да и нет его похоже. Пытался прикрутить имеющееся стандартное решение (помним, что визуально это не то, что нужно), но и готовое решение приколхозить нормально не получилось из-за имеющихся багов. Чтобы не быть голословным, вот:
Ссылка №1 на Git с багом
Ссылка №2 на Git с костылем
Ссылка №3: разработчики поднимают эту тему

Прозрачный AppBar и исправление бага - это уже уникальный интерфейс 😂😂😂

Про костыль: при открытии чата нужно пролистать список сообщений в самый низ. Понятно что список загружаю не весь, а только N последних сообщений. Вот их-то и требуется пролистать вниз.

Но из-за бага нельзя узнать сразу значение низа, то есть высоты всего списка. А получить его можно через кадр. В итоге разработчики сделали такой незаметный костыль: список пролистывается до максимального значения(но не до конца), а потом анимацией список докручивается до низа и по мере прокрутки Flutter обновляет максимальное значение для пролистывания. Чудо-код, который это умеет и работает стабильно:

Но это решение, очевидно, плохое. Открываешь чат, а он что-то листается куда-то... В итоге пришлось разбираться как решить эту проблему. Ведь если нельзя, но очень нужно, то все же что-то придумать можно 😂

А советчики этого костыля могут сами им и пользоваться:

Решение

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

Еще стоит отметить, что управлять тем, что выводится на экране можно с нескольких абстракций.

(1) Самый верхний уровень - виджеты. Это буквально готовые кирпичики, берешь и используешь. Глубокого погружения в тонкости рендера не требуется. Первое приложение можно написать ничего не зная.

(2) Далее идет CustomPaint. Это виджет, который умеет на себе рисовать. Что-то типа приложения Paint: берешь холст и рисуешь примитивы. Им отрисованы градиенты окошек сообщений. По сути это продвинутый виджет, сложность понимания принципа работы примерно как с виджетами.

(3) RenderObject - это уже интереснее, это то, как все рисуется в Flutter. И сложность понимания внезапно поднимается до "нужно понять как все тут устроено". Отмечу, виджеты уже сами в себе содержат механизм RenderObject, но от пользователей он скрыт. Если вдруг потребуется сделать такой виджет, которого нет среди стандартных виджетов, то придется разбираться, как устроена система рендера и используя ее собирать свой собственный виджет. Собственно этим я и занимался. Пришлось сделать виджет, который визуально умеет делать все то, что делает стандартный SliverStickyHeader от Flutter. Но важно: костыли нужно убрать, AppBar нужен прозрачный.

Теперь даты красиво ездят туда-сюда, вроде эстетично и глаз радуется :)

Далее работаю над отправкой и приемом сообщений.

--
По вечерам разрабатываю сервис для общения. Кому интересно, можете подписаться куда-нибудь на меня, попробуете его в числе первых.
Постепенно буду продолжать делиться успехами разработки сервиса.