pixels2flutter 🦋

Convert a screenshot to Flutter code!

Note

pixels2flutter was a proof of concept. I started it in November 2023, shortly after OpenAI released GPT-4 with vision in its API. As far as I know, it was the first screenshot-to-code tool for Flutter. The project is no longer maintained, because today any coding agent can turn a screenshot into Flutter code.

How does it work

pixels2flutter.mp4

1. Upload a screenshot

Select or drag and drop a screenshot of the UI you want to convert to Flutter. It can be from a real app, a design, or even a drawing!

2. Additional instructions

Optionally, add some extra instructions to help the AI generate the code. For example, how the UI should behave when the user interacts with it.

3. Code generation

The app leverages the power of multimodal LLMs (OpenAI GPT-4o or Google Gemini 1.5 Pro) to transform your screenshot and instructions into Flutter code.

4. Run the code

The generated code is stored in a GitHub Gist and loaded into DartPad. So you can run the resulting Flutter app right from the browser!

Examples

Screenshot Convert a screenshot of a real app to Flutter code.
Wireframe Convert a wireframe to Flutter code.
Game Convert a screenshot of a game plus a description of its logic to a playable Flutter game.

Acknowledgements

This project is inspired by:

• tldraw/make-real
• abi/screenshot-to-code
• emilwallner/screenshot-to-code

License

pixels2flutter is licensed under the AGPL-3.0 license.