Welcome to FlutterDraw, an innovative application powered by the GPT Vision 4 API. This unique tool empowers users to sketch and design their Flutter applications on an online whiteboard and seamlessly convert these sketches into fully functional Flutter code with just one click.
- Interactive Whiteboard: Utilize an intuitive online whiteboard interface to sketch and draw your Flutter application layout and design.
- GPT Vision 4 Integration: Leverage the power of the GPT Vision 4 API for intelligent recognition and interpretation of your sketches.
- One-Click Conversion: Instantly convert your sketches into complete, runnable Flutter code with a single click.
- Customization Options: Fine-tune your designs and add specifications before conversion, including widget properties, layout configurations, and more.
- Preview and Download: Review a preview of your generated Flutter app and easily download the code for immediate use.
- Compatible web browser (Chrome, Firefox, Safari, etc.)
- Internet connectivity
- GPT-4 Vision Access Key
Before getting started, make sure you have a version of Node.JS greater than 18.17 installed in your system. You can install Node.JS by clicking here. You can learn about Node.JS from here.
To get started, follow the given steps:
- Step 1: Download the code for the repository by clicking here.
- Step 2: Unzip the downloaded folder and open the folder in Visual Studio Code (or your favorite terminal).
- Step 3: Get your OPENAI GPT-4 Access Key and copy the following command:
Make sure to replace sk-your-key with your OPENAI key. This will create a new file called
echo OPENAI_API_KEY=sk-your-key > .env.local$.env.localin your folder. - Once the command runs, enter the following command:
This command will install all the required NPM Packages for FlutterDraw.
npm install - Lastly, run the following command:
This will start the FlutterDraw server. Once the server starts, go to your favorite browser and type in the URL
npm run devhttps://localhost:3000or click here. This will take you to the FlutterDraw whiteboard, where you can start drawing.
To utilize the full functionality of FlutterDraw, ensure that you have obtained a valid API key for the GPT Vision 4 API. You can acquire an API key by signing up on the GPT Vision 4 platform and following the provided instructions.
We welcome contributions from the community! Please refer to the following files before Contributing:
This project has been inspired from, and several components of the code and UI have been derived from the original project by Sawyer Hood that translated wireframes into HTML & CSS. You can check out that repository if you want to convert your drawings into HTML & CSS Code.