Весьма продуктивный день сегодня.
1
С одной стороны, удалось практически полностью повторить весь экран обложки, а это было весьма не просто — уже упоминавшиеся ранее тени чего только стоили. Не получилось только создать эффект тиснёной эмблемы — два плагина, один для вывода векторных SVG, другой для внутренних теней, никак не захотели дружить друг с другом. В итоге, зашёл с другой стороны, и теперь эмблема не будет тиснёной, а как будто нанесённой на вдавленный круг.
На картинке: сравнение макета в #Figma и то, как выглядит рабочая версия из #Flutter в веб-браузере.
2
Очень много времени ушло на то, что в макете не прорабатывалось: на адаптивность дизайна. Причём, времени на придумывание, как, что должно выглядеть и работать, ушло больше, чем на саму реализацию.
Особо удачной находкой оказался вот этот ответ на Stackoverflow. На основе этого кода удалось реализовать модульность всего дизайна: если в мокапе всё было создано с модулем 8 пикселей, то здесь это число высчитывается автоматически (у разных устройств разное отношение физических и логических пикселей, а ещё разное количество пикселей на дюйм). И все элементы дизайна высчитывают свои размеры, исходя из этого модуля, сохраняя при этом свои пропорции и соотношения друг относительно друга.
Как выглядит дизайн при разных размерах и соотношениях, можно увидеть на видео:
https://dzen.ru/video/watch/63333055ea06b628897bf1ed
3
С SVG предстоит ещё поработать, изучить, как во #Flutter ловчее с ними обращаться. Например, на Android-версии эмблема ни в какую не отображалась, а в логе писала, что не найдена. Ошибка, скорее всего, возникала из-за того, что не было разрешения на доступ к памяти. Чтобы не связываться ещё и с этим, воспользовался удачным методом плагина: формированием SVG не из файла, а на лету, из текстовой строки — обожаю векторную графику — и теперь эмблема прекрасно отображается.
Скриншот с физического телефона:
4
Подозреваю, что теперь прогресс замедлится: с завтрашнего дня свободного времени у меня резко поубавится.
Есть ещё несколько потенциально проблемных моментов, которые могут загубить весь проект:
- Ещё никоим образом не касался реакций на жесты и анимаций. Целый пласт неизведанного. Впрочем, так же было и со всем тем, что уже реализовано, поэтому на эту часть смотрю с оптимизмом;
- То же про работу на маленьких экранах. Изначальный макет создавался под планшеты. Не получится оставить всё без изменений для телефонов, например, т.к. ничего нельзя будет прочитать из-за мелкого текста. Есть некоторые идеи, но пока только идеи;
- То же про перевод на английский язык;
- Весьма беспокоит производительность. Сейчас я просто набрасываю, всё что приходит в голову и то, что прилипает (читай, даёт подходящий внешне результат), так и остаётся. Почти никаких структур, правил, лишь спагетти-код. Подозреваю, что рано или поздно придётся обратить внимание на эффективность кода, а в этом я совсем не разбираюсь. От одного слова «профилирование» накрывает тоска;
- Ну и всегда остаётся ненулевой шанс получить привет от военкома.
Хотя, у самурая нет цели, только путь. Поэтому по мере сил продолжаем, не отвлекаемся)
Свежий код всегда тут: https://github.com/cheshiren/Appendix_F