Flued is a sophisticated, fast, and modern web-based Flutter code editor. Built with Next.js and the Monaco Editor (the same engine behind VS Code), this application provides a feature-rich Flutter development experience directly in your browser.
This application is more than just a text editor; it's an interactive playground equipped with Hot Reload, code analysis, and AI capabilities to modify and generate code, making it the perfect tool for learning, prototyping, and experimenting with Flutter.
Flued is packed with features designed to boost your productivity and creativity:
- 💻 Professional Code Editor: Powered by Monaco Editor, providing syntax highlighting, code completion, and a responsive typing experience.
- ⚡ True Hot Reload: See changes to your Flutter UI instantly without needing to refresh the entire page, just like local development. The Hot Reload button is only active when there are code changes.
- 🧠 Real-time Code Analysis: Get immediate feedback on errors and warnings in your code as you type, helping you write cleaner code.
- 💅 Automatic Code Formatting: Tidy up your Dart code with a single click or a shortcut (Shift+Alt+F), maintaining consistency and readability.
- 📃 Integrated Dart Code Documentation: Instant Dart documentation and element details on hover, directly within the editor.
- 🤖 AI Code Modification & Generation:
- AI Modification: Right-click on your code, select "AI Modification," and write a prompt to refactor existing code.
- AI Generation: Create new widgets or logic from scratch just by describing them in a prompt.
- 💡 Smart Quick Fixes:
- Wrap with Widget: Select a widget and automatically wrap it with common widgets (Column, Padding, Center, etc.).
- Wrap with Widget...: An option to wrap with a custom widget, with the widget name ready to be replaced.
- 🚀 Code Snippets: Speed up your coding with snippets for stless (StatelessWidget) and stfull (StatefulWidget).
- 🌿 Flutter Channel Selection: Easily switch between Stable, Beta, and Main Flutter versions to test the latest features. The active Dart & Flutter versions are displayed in the bottom bar.
- 📱 Responsive Design: An optimized experience for both desktop with resizable panels and mobile with tab-based navigation.
- 🖱️ Full-Featured Context Menu: Quick access to essential functions like Format, AI Modification, and Toggle Word Wrap directly from the right-click menu.
- 📜 Comfortable Scrolling: The editor has bottom padding (scrollBeyondLastLine), so the last line of code never gets stuck at the bottom of the screen.
- 📝 State Management: Your code is automatically saved in the browser's localStorage, so you won't lose your work when you refresh the page.
- Framework: Next.js (React)
- Core Editor: Monaco Editor
- UI & Styling: Tailwind CSS & shadcn/ui
- Backend Services: DartPad API for compilation, analysis, formatting, and AI services.
To run this project in your local development environment, follow these steps:
-
Clone this repository:
git clone https://github.com/agusibrahim/flued.git
cd flued -
Install all dependencies using Bun:
bun install -
Run the development server:
bun run dev -
Open http://localhost:3080 in your browser to see the result.
Contributions are highly welcome! If you have ideas for new features, bug fixes, or other improvements, please feel free to:
- Fork this repository.
- Create a new Branch (git checkout -b feature/YourCoolFeature).
- Commit your changes (git commit -m 'Add some cool feature').
- Push to the branch (git push origin feature/YourCoolFeature).
- Open a Pull Request.
This project is licensed under the MIT License. See the LICENSE file for more details.