⚡Быстрый SVG

Покажу как быстро переносить вектор с фигмы в флаттер без скачки файлов и беготни по Finder

В чем собсн проблема?

При необходимости использования SVG с макетки фигмы по обычному пути требуется:

  1. Выделить элемент

  2. Найти кнопку экспорта

  3. Выбрать SVG

  4. Нажать экспортировать

  5. Дождаться загрузки

  6. Зайти в файндер/проводник

  7. Перекинуть файл в папку с проектом

  8. Прописать путь файла в SVG виджете

Слишком много действий для такой мелочи, причем требующих молниеносных и четко отработанных действий, а если перепутаете название или путь к файлу? пол часа разбираться в чем проблема?

Что я предлагаю и советую

По сути, SVG это куча небольшого текста, похожего чем-то на html, а текстом взаимодействовать проще чем с картинкам.

Внутрянка SVG

Так почему бы не копировать его как обычный текст? Показываю

  1. Выделяем элемент

  2. Копируем SVG код

  1. Ручками через пкм создаем пустой файл с нужным названием в формате вектора

  1. С помощью расширения с прошлой подборки вставляем код в файл и сразу же наглядно оцениваем корректность экспорта, при желании можно даже подредачить цвета и размеры

  1. Копируем относительный путь к полученному файлику

  1. Вставляем путь к файлу (Не забываем пакет flutter_svg для виджета векторных изображений)

Вауля! Всего за пару тычек мы перенесли вектор прямо в рабочий проект. Жмем хотрелоад и все работет) Плюсом мы всегда можем копипастнуть другой SVG код в уже существующий файл, а не перекачивать файлы

PreviousПлагины Flutter

Last updated

Was this helpful?