# Introducing FlutterVision

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

{% hint style="info" %}
To use the FlutterVision tool you need an account. To create one, click [here](https://web.fluttervision.com/).
{% endhint %}

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](https://flutter.dev/), which generates code that you can run on [VSCode](https://code.visualstudio.com/), 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](https://youtube.com/playlist?list=PL8VoBnjh_RnJrVwbPnekEwSCRK4scubAt). 


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.fluttervision.com/introducing-fluttervision.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.