Как нарисовать нестандартные виджеты с флаттером - PullRequest
0 голосов
/ 09 декабря 2018

Я хочу нарисовать фигуру ниже во флаттере: enter image description here

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

Как бы я нарисовал это в флаттере?ниже тонкой части этой фигуры.

Редактировать: Извините, забыл сказать, что я хочу иметь возможность контролировать цвет красных фигур.Черная форма будет постоянной и в зависимости от состояния красные формы будут разных цветов.

1 Ответ

0 голосов
/ 09 декабря 2018

Это похоже на то, что проще всего сделать в SVG, используя какой-то инструмент, предназначенный для этого - я лично использую Inkscape, хотя он создает много мусора в файле svg (который я удаляю, используя SVGOMG).Вы должны быть осторожны в Inkscape, чтобы убедиться, что он не создает ненужные группировки или использует преобразования, а не устанавливает координаты напрямую.Но тогда вы сможете использовать плагин flutter svg для его рендеринга в своем приложении.

Однако, если есть какая-то анимация, которую вы хотите сделать вместе с вашим объектом,это становится намного сложнее.Тогда есть два варианта - во-первых, кропотливо конвертировать ваши SVG-пути в операции рисования холста (есть несколько инструментов, которые делают это для объектов Canvas Javascript, которые достаточно близки к трепетным, в которые вы можете вставить пути,затем выполните быстрый поиск / замену, чтобы получить то, что вам нужно для флаттера).Я сделал это с некоторыми значками, используемыми в моем приложении, которые мне были нужны до создания плагина svg.Но если вы сделаете это, то получите полный контроль над тем, как вы рисуете, - вы можете использовать градиенты, цвета и т. Д. По своему усмотрению.

Вы также можете просто нарисовать его напрямую, используя холст, не прибегая к SVG.первый.Взгляните на CustomPainter и CustomPaint .Горячая перезагрузка поможет вам, но это будет немного кривой обучения (каламбур), если вы раньше не использовали Безье и т. Д.

Это, однако, было бы немногопроцесс и, вероятно, не стоит, так как есть более простое решение.Взгляните на недавно анонсированную Flare - главный недостаток в том, что если вы не хотите платить, ваши работы будут публичными (но вы можете помешать людям их разветвлять).Хотя я еще широко не использовал его, он кажется специально разработанным для такого рода вещей.

...