Introducing FlutterVision

Meet the FlutterVision tool and start to build your Graphical User Interface 5 times faster!

Design to code Tool, for Flutter

Here is a step-by-step guide on how to use FlutterVision more smoothly and easily.

And for this first phase of the tool, the Beta Version witch may contain a few bugs. Please let us know whatever you think that can be improved.

To use the FlutterVision tool you need an account. To create one, click here.

This workflow includes 4 basic steps:

1. Choose and upload your input: You can use FlutterVision with two kinds of inputs: (1) Figma project or (2) Screenshots. Using Figma is the best way to get a better application, because Figma provides a lot of important information to build your app.

2. Adjustments and navigation: After uploading your input in FlutterVision, you should check the AI results and, if necessary, make the adjustments. In this phase you can set the correct screen order.

3. Download: This is the easiest step, you just need to finish the project and choose the framework you are working with. For now, FlutterVision is compatible with Flutter, which generates code that you can run on VSCode, for i,e.

4. Run: The last step is done outside FlutterVision, where you will open your project, make any adjustments and compile it to run on your board.

If you prefer a more illustrative tutorial in video format, click here.