Workflow Basics

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

Design to code Tool

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 MVP (Minimum Viable Product) 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 early access key. If you don't have one yet, order it here.

This workflow includes 4 basic steps:

1. Upload the design files: You can upload screenshots of each of your app pages. Please zip all the screenshots into one zip file and be sure that this zip file contains only the screenshots files. Each image will correspond to an application screen;

2. Upload the Assets: It is not mandatory but you can also upload the assets of your project (The logos, the icons, images, etc.). By doing that, our AI will work more efficiently and your projects will have images with better quality.

3. Adjustments and navigation: After uploading the files in FlutterVision, you should check the AI results and then set the correct screen order;

4. 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. If you are interested in other frameworks, join the waiting list;

5. 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.

Step 1: Upload the design files

With your early access key, go to the FlutterVision tool and fill in the fields with the following information:

• Username & Password: Fill this field with the username and password that you received;

After set your credentials just click on "Login" and you will be redirected to the user page.

Create Project: After the login, you will see the existing project or you can click on "Create New Project" and then upload your files.

Just click on "Create Project" and you will be redirected to the upload page.

After uploading all the files just click on "Start" and wait a few seconds for the FlutterVision Artificial Intelligence to process the files.

Step 2: Adjustments and navigation

After the FlutterVision AI processes the whole project it will recognize the following attributes of the interface on the first canvas:

• The background color of the screen;

• Component position and size;

On the second canvas, the AI will recognize the following attributes of each interface:

• The background color of the screen;

• Components type and style;

• Component position;

• Text content and color.

Second Canvas: Component style configuration and project navigation configuration on FlutterVision

In this step, you will check if the markings, component types and texts are correct. Remembering that using the left bar option you can also:

• Click on the arrow button to edit the size or positioning of components;

• Click on the + button and add new components choosing the corresponding type.

• Click on the cross arrow to move the screen.

• Click on the trash can button to delete a component.

And on the right side you can click on a component and edit its properties, for example:

• Component type;

• Height and width;

• Color Background;

• Image Background (the asset's name);

• Text Content and Color (except in Image View and Image Button);

Also in Button Target, you can select which screen the selected component might call when clicked, thus creating your UI navigation events.

Now, It's just clicking on EXPORT and go to the next step!

Step 3: Download your project

For now, FlutterVision is available for Flutter. If you want to export to another Framework, please join our waitlist!

Step 4: Run your project

This step takes place outside the FlutterVision but it is still important. After downloading the ZIP file you must unzip it and import the project on your IDE (VSCode i.e.).

To run with Flutter, you need to open the project in VSCode, go to terminal and write "flutter pub get" to download the flutter dependency and "flutter run" to execute the project and check if the screens and screens navigation are ok.

After checking everything, now is the best part: just write "flutter create" to generate the application to install and run on your device.