https://github.com/davidmigloz/pixels2flutter

Convert a screenshot to a working Flutter app.
https://github.com/davidmigloz/pixels2flutter

flutter gpt-4-vision llms openai

Last synced: 1 day ago
JSON representation

Convert a screenshot to a working Flutter app.

• Host: GitHub
• URL: https://github.com/davidmigloz/pixels2flutter
• Owner: davidmigloz
• License: agpl-3.0
• Created: 2023-11-17T18:14:17.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-12-06T08:58:54.000Z (about 1 month ago)
• Last Synced: 2024-12-06T09:32:31.497Z (about 1 month ago)
• Topics: flutter, gpt-4-vision, llms, openai
• Language: Dart
• Homepage: https://pixels2flutter.dev
• Size: 17.8 MB
• Stars: 179
• Watchers: 7
• Forks: 40
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# [pixels2flutter.dev](https://pixels2flutter.dev) 🦋

[![tests](https://img.shields.io/github/actions/workflow/status/davidmigloz/pixels2flutter/deploy.yaml?logo=github&label=deploy)](https://github.com/davidmigloz/pixels2flutter/actions/workflows/deploy.yaml)

[![](https://dcbadge.vercel.app/api/server/x4qbhqecVR?style=flat)](https://discord.gg/x4qbhqecVR)

[![AGPL-3.0](https://img.shields.io/badge/license-AGPL--3.0-purple.svg)](https://github.com/davidmigloz/pixels2flutter/blob/main/LICENSE)

Convert a screenshot to Flutter code!

## How does it work

https://github.com/davidmigloz/pixels2flutter/assets/6546265/a6e4101c-98eb-4adf-b0b9-ae37af3f2ccc

**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](https://github.com/tldraw/make-real)

- [abi/screenshot-to-code](https://github.com/abi/screenshot-to-code)

- [emilwallner/screenshot-to-code](https://github.com/emilwallner/screenshot-to-code)

## License

pixels2flutter.dev is licensed under the [AGPL-3.0 license](https://github.com/davidmigloz/pixels2flutter/blob/main/LICENSE).