Generate Flutter vector code from a subset of SVG files.

Overview

built_vector

Generates Flutter vector code 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.

You might also like...

A candy sorter game made with Flutter for the march flutter challenge.

A candy sorter game made with Flutter for the march flutter challenge.

A candy sorter game made with Flutter for the march flutter challenge.

Apr 9, 2022

✨ A collection of loading indicators animated with flutter. Heavily Inspired by http://tobiasahlin.com/spinkit.

✨ A collection of loading indicators animated with flutter. Heavily Inspired by http://tobiasahlin.com/spinkit.

✨ Flutter Spinkit A collection of loading indicators animated with flutter. Heavily inspired by @tobiasahlin's SpinKit. 🎖 Installing dependencies:

Dec 30, 2022

Flutter package for creating awesome animations.

Flutter package for creating awesome animations.

🎬 Simple Animations Simple Animations is a powerful package to create beautiful custom animations in no time. 💪 fully tested 📝 well documented 💼 e

Dec 31, 2022

Fun canvas animations in Flutter based on time and math functions.

Fun canvas animations in Flutter based on time and math functions.

funvas Flutter package that allows creating canvas animations based on time and math (mostly trigonometric) functions. The name "funvas" is based on F

Jan 9, 2023

Flutter UI Challenges

Flutter UI Challenges

Introduction 🐼 Zoo is a small, simple and beautiful app that lists 3d model of animals. Before we start, you can take a look at the app: Usage 🎨 To

Dec 22, 2022

A Flutter app with flip animation to view profiles of friends. 🌟

A Flutter app with flip animation to view profiles of friends. 🌟

Flip View Made with 🔥 in India This flutter app is based on the design made Dmytro Prudnikov for Yalantis on Dribble.He describes the design as: Just

Sep 23, 2022

Simple reactive animations in your Flutter apps.

just.motion Flutter package to create organic motion transitions. Why? The Motion Value stateless hot reload status notifier Ease Motion Spring Motion

Nov 14, 2022

Timer UI animation challenge from 'Flutter Animations Masterclass'

stopwatch_flutter An IOS stopwatch challenge from Flutter Animations Masterclass - Full Course What I learned; Use timer Use ticker Create custom shap

Jan 4, 2023

💙 Google Classroom Clone using Flutter, GCP

💙 Google Classroom Clone using  Flutter, GCP

Introduction 🚀 Classroom is a Google Classroom clone built using 💙 Flutter. Before we start, you can take a look at the app: Screenshots 🗻 Key Feat

Dec 14, 2022
Comments
  • Support ellipse

    Support ellipse

    Support ellipse shapes.

    <ellipse cx="183.585" cy="241.589" rx="13.7207" ry="4.28772" fill="#3FD4C2" />
    
    opened by aloisdeniel 0
  • Support gradients

    Support gradients

    Please add support for linear and radial gradients. Flutter supports these through shaders: https://docs.flutter.io/flutter/painting/RadialGradient-class.html, https://docs.flutter.io/flutter/painting/LinearGradient-class.html

    opened by 12people 3
Owner
Aloïs Deniel
Flutter Freelance
Aloïs Deniel
A flutter package that adds support for vector data based animations.

animated_vector Description and inspiration A package that adds support for vector data based animations. The data format is heavily inspired from the

Potato Open Sauce Project 6 Apr 26, 2022
A flutter package which will help you to generate pin code fields with beautiful design and animations

A flutter package which will help you to generate pin code fields with beautiful design and animations. Can be useful for OTP or pin code inputs ?? ??

Adar 550 Dec 23, 2022
Generate a timeline for a list

Timeline A flutter package that allows you to create basic timelines on your flutter application. This is customizable and easy to plugin to your appl

Rejish Radhakrishnan 65 Nov 10, 2022
Load and get full control of your Rive files in a Flutter project using this library.

⚠️ Please migrate to the new Rive Flutter runtime. This runtime is for the old Rive (formerly Flare) and will only receive updates for breaking issues

2D, Inc 2.6k Dec 31, 2022
Wave-transition-app - A wave transition based mobile app with included images and other files

Flutter wave application A new Flutter project done with dart and it's a wave tr

Munem Sarker 2 May 18, 2022
✨ Recognize all contributors, not just the ones who push code ✨

Call for translators! We're looking for translators to help translate this spec for everyone! Read this documentation in the following languages 한국어 中

All Contributors 6.8k Jan 4, 2023
🔔 A flutter package to create cool and beautiful text animations. [Flutter Favorite Package]

Animated Text Kit A flutter package which contains a collection of some cool and awesome text animations. Recommended package for text animations in C

Ayush Agarwal 1.4k Jan 6, 2023
This repository demonstrates use of various widgets in flutter and tricks to create beautiful UI elements in flutter for Android and IOS

AwesomeFlutterUI The purpose of this repository is to demonstrate the use of different widgets and tricks in flutter and how to use them in your proje

Subir Chakraborty 132 Nov 13, 2022
This is a Flutter URL preview plugin for Flutter that previews the content of a URL

flutter_link_preview This is a URL preview plugin that previews the content of a URL Language: English | 中文简体 Special feature Use multi-processing to

yung 67 Nov 2, 2022
Flutter liquid swipe - Liquid Swipe Animation Built With Flutter

Flutter Liquid Swipe liquid Swipe animation is amazing and its Created for iOS P

Jahongir Anvarov 6 Dec 1, 2022