⚠️ PROTOTYPE STATUS: SketchIDE is currently in active development as a prototype. This is not a production release and is intended for testing, feedback, and development purposes only.
SketchIDE is a visual mobile IDE that enables anyone to build native Android & iOS applications through an intuitive drag-and-drop interface. Built with Flutter for modern cross-platform development, SketchIDE makes app creation accessible without requiring coding knowledge.
mindmap
root((SketchIDE))
Visual Design
Drag & Drop UI Builder
Material 3 Widgets
Real-time Preview
Fixed Device Frame
Property Management
Color-coded Properties
Smart Property Editor
Sequential Widget IDs
Auto-validation
Code Generation
Flutter Code Output
Real-time Updates
Project Management
Export Support
Touch System
Native Touch Handling
Gesture Recognition
Multi-touch Support
Selection System
- Intuitive Drag & Drop Interface with smooth animations
- Fixed Mobile Device Frame (360x640dp) for consistent design
- Property Panel with slide-up animation and visual feedback
- Smart Widget Management with auto-selection and validation
- Real-time Visual Feedback during design operations
- Live Flutter Code Generation from visual components
- Sequential Widget Naming (text1, text2, text3, etc.)
- Project File Management with organized structure
- Cross-platform Output supporting Android and iOS
- Offline Development with local project storage
- Color-coded Property Types: Text (Blue), Size (Green), Color (Purple), Number (Orange)
- Smart Property Validation with real-time error feedback
- Comprehensive Widget Properties for complete customization
- Visual Property Editor with intuitive controls
|
|
graph LR
A[📱 Create Project] --> B[🎨 Design UI]
B --> C[⚙️ Configure Properties]
C --> D[🔧 Add Logic]
D --> E[👀 Preview App]
E --> F[📦 Export Project]
F --> G[🏗️ Build App]
style A fill:#e1f5fe
style B fill:#f3e5f5
style C fill:#e8f5e8
style D fill:#fff3e0
style E fill:#fce4ec
style F fill:#e0f2f1
style G fill:#f1f8e9
- Project Setup: Create new project with basic Flutter structure
- Visual Design: Use drag & drop to build UI with widgets
- Property Configuration: Customize widget properties using visual editor
- Logic Integration: Add interactive behavior (coming soon)
- Live Preview: See changes in real-time mobile frame
- Export & Build: Generate Flutter project for compilation
graph TB
subgraph "🎨 Presentation Layer"
UI[Views & Widgets]
VM[ViewModels]
end
subgraph "🔧 Business Logic"
SVC[Services]
CTRL[Controllers]
end
subgraph "📊 Data Layer"
MODELS[Models & Beans]
STORAGE[Local Storage]
end
UI --> VM
VM --> SVC
SVC --> CTRL
CTRL --> MODELS
MODELS --> STORAGE
style UI fill:#e3f2fd
style VM fill:#f3e5f5
style SVC fill:#e8f5e8
style CTRL fill:#fff8e1
style MODELS fill:#fce4ec
style STORAGE fill:#e0f2f1
- Models: Data structures and business entities
- Views: UI screens and user interfaces
- ViewModels: Business logic and state management
- Services: Core functionality and API communication
- Controllers: Touch handling and user interactions
| Feature Category | Implementation Status | Description |
|---|---|---|
| 🎨 Visual Editor | ✅ Complete | Drag & drop interface with mobile frame |
| 🔧 Property System | ✅ Complete | Color-coded property editor with validation |
| 📱 Touch System | ✅ Complete | Native-like touch handling and gestures |
| 💾 Code Generation | ✅ Complete | Real-time Flutter code output |
| 🎯 Widget System | ✅ Complete | Full widget palette with frame components |
| 📦 Project Management | ✅ Complete | Local project storage and organization |
| 🧩 Logic Editor | 🔄 In Progress | Block-based programming interface |
| ☁️ Cloud Integration | 📅 Planned | Cloud build and deployment |
- Flutter SDK (latest stable)
- Dart SDK (included with Flutter)
- Android Studio / VS Code
- Git
# Clone the repository
git clone https://github.com/sketchide/SketchIDE.git
# Navigate to project directory
cd SketchIDE
# Install dependencies
flutter pub get
# Run the application
flutter runSketchIDE/
├── lib/
│ ├── controllers/ # Touch & interaction handling
│ ├── models/ # Data structures
│ ├── services/ # Business logic services
│ ├── viewmodels/ # MVVM view models
│ ├── views/ # UI screens
│ └── widgets/ # Reusable UI components
├── assets/ # Images, icons, templates
└── android/ios/ # Platform-specific files
We welcome contributions to help improve SketchIDE! Since this is a prototype, we're especially interested in:
- UI/UX Improvements: Enhance the visual design experience
- Performance Optimization: Improve rendering and responsiveness
- Feature Testing: Help identify bugs and edge cases
- Documentation: Improve code documentation and user guides
- Fork the repository and create a feature branch
- Follow the existing code style and architecture patterns
- Add appropriate tests for new functionality
- Submit pull requests with clear descriptions
- Participate in code reviews and feedback
feat: add new widget to palette
fix: resolve touch handling issue
design: improve property panel UI
test: add unit tests for validation
docs: update README with new features
Important Notice: SketchIDE is currently a prototype in active development.
- 🔧 Features may change without notice during development
- 🐛 Bugs and issues are expected and being actively addressed
- 📱 Not ready for production app development
- 🔄 Frequent updates and changes to the codebase
- 💬 Feedback is crucial for improving the final product
- Test the visual editor and report any issues
- Suggest improvements for user experience
- Help identify missing features or functionality
- Provide feedback on performance and stability
- Community Discussion: Telegram Group
- Updates & News: Telegram Channel
- Email Support: [email protected]
SketchIDE is open source software licensed under the MIT License.
MIT License - Free to use, modify, and distribute
This prototype is provided "as-is" for development and testing purposes. See LICENSE for full details.
🚀 Building the future of visual app development 🚀