pixels2flutter.dev 🦋

Convert a screenshot to 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.dev is licensed under the AGPL-3.0 license.