Built Vector Code from SVG files

flutter built vector

built vector code for flutter from minimalist svg-like files.

usage

> pub global activate built_vector
> pub global run built_vector -i <assets file path> -o <output dart file>

a class named accordingly to your assets node’s name, containing a void paint(canvas canvas, size size, {color fill}) function for each vector node.

you can then use them with a custom painter, like with the sample/lib/vectors.dart vector widget.

file format

assets

an asset catalog is a collection of assets (vector only at the moment).

<assets name="icons">
    <vector ... />
    <vector ... />
    <vector ... />
</assets>

vector

a vector is a collection of filled shapes.

it has several properties :

• name (required) : the identifier of the vector asset
• viewbox (required) : a box (<x> <y> <width> <height>)that contains all the shapes.
• fill : a default fill brush for shapes

<vector name="warning" viewbox="0 0 24 24" fill="#231f20">
    <rect ... />
    <circle ... />
    <path ... />
</vector>

shape

a shape is a set of instructions to build an area to fill with a brush. currently it can be rect, circle, path.

it has several properties :

• fill : a default fill brush for shapes
• rect – x, y, width, height : position and size
• circle – cx, cy, r : center coordinates and radius
• path – d : svg path data

<vector name="warning" viewbox="0 0 24 24" fill="#231f20">
    <rect x="15" y="14" width="31" height="28" />
    <circle cx="45.5" cy="42.5" r="15.5" fill="#c4c4c4" />
    <path d="m12 17c12.5523 17 13 16.5523 13 16c13 15.4477 12.5523 15 12 15c11.4477 15 11 15.4477 11 16c11 16.5523 11.4477 17 12 17z" />
</vector>

sample

to generate the sample, execute :

> pub global run built_vector -i sample/assets/icons.assets -o sample/lib/icons.g.dart

the sample/assets/icons.assets file is generated as sample/lib/icons.g.dart.

121

download the full project for this post from the following button

this source is fully free for all time

download as zip