Save time when coding UIs

Introducing FlutterVision:
A Design-To-Code tool for Flutter Developers.
BETA VERSION. It works better on Google Chrome, Firefox and Vivaldi.
Fluttervision canva mac
Device frame
Figma to flutter

Built for Developers

Write less and focus on things that matters.

  • Flutter example
  • Screen shot 2022 01 14 at 15.43.42

Powered by

A no-code tool that developers like

With FlutterVision the first version of your application is generated up to 5 times faster and the UI/UX project is ready to run on the device. The hours previously spent on building the minimal usability can now be dedicated to improve it.
Time

Leave away the dull and repetitive tasks

Do not spend hours positioning components and writing texts. And enough copy and paste of similar configuration interfaces. With FlutterVision artificial intelligence every component and text is recognized and styled. Save time to focus on more important tasks.
Relax

Clean code architecture for the framework you love: Flutter

You don't need to start from zero. Let FlutterVision take care of speeding up the user interface development and generating the project, with Clean Code Architecture, for one of the main frameworks: Flutter.
Design

Check how it works!

4 steps of FlutterVision

A simple process that will really come in handy.
  • Upload
    Upload the Figma Project
    or the UI screenshots (JPG or PNG)
  • Computer vision
    Our Computer Vision
    detects all components.
  • Hand
    Make some minimals
    adjustments to the elements
    and set up the navigation
    between screens.
  • Code
    Download the exportable file
    (source code) to Flutter.
What is FlutterVision?
Fast UI development
FlutterVision is a rapid application development tool which speeds up User Interfaces development. FlutterVision uses Computer Vision to detect and create all UI elements (container, button, text, check box, slider and so on) and convert it into a Flutter application.
Using AI, FlutterVision is able to recognize your design and quickly build your UI application.

What can FlutterVision do for you?

You can build the first version of your UI application in a few minutes.

  • new

    Figma project as input

    You can use the Figma project as input to FlutterVision. This way, a lot of data will be imported, saving you even more time.

  • PNG/JPG files as input

    FlutterVision is an agnostic in terms of design tool, that means designers don't have to change the way they already work. It's just necessary to have the screens design and icons in PNG or JPG file.

  • Multiple screens

    No matter how many screens your project has, you can upload them all and FlutterVision will take care of that.

  • Automatic component recognition and construction

    The AI โ€‹โ€‹identifies the position and the type of the components on the screen. Also, FlutterVision sets its entire style automatically and converts them to code.

  • Automatic text recognition

    You don't need to type any text neither choose the color. FlutterVision AI recognizes every text on your screen, setting correctly colors and positions.

  • Navigation between screens

    You only need to informe the screens sequence, then FlutterVision will configure click events and code the movement between the screens.

  • Build Flutter apps

    Its Flutter integration allows you to convert design into code and run your UI app for mobile, desktop, web and embedded. 

UI development 5x faster

Test FlutterVision and give us feedback.
English ๐Ÿ‡บ๐Ÿ‡ธ๐Ÿ‡ฌ๐Ÿ‡ง