Flutter SDUI Designer

A Figma-like Flutter UI designer with drag and drop functionality for creating Flutter applications visually

---

Overview

Flutter SDUI Designer is a powerful visual design tool that brings the familiar drag-and-drop interface of design tools like Figma to Flutter development. Built with modern Flutter best practices and MVVM architecture, it enables developers and designers to create Flutter UIs visually while automatically generating clean, production-ready code.

🚀 Try it now: glimpse.dscvit.com

Features

Core Functionality

• Drag and Drop Interface: Intuitive drag-and-drop system for adding widgets from the sidebar directly onto the design canvas
• Visual Widget Library: Comprehensive collection of pre-built widgets including Row, Column, Scaffold, Text, Container, Card, and more
• Properties Panel: Real-time property editing with advanced controls including color pickers, size adjustments, and styling options
• Modern UI: Clean, professional interface inspired by Figma with Material Design 3 components
• MVVM Architecture: Built following Flutter best practices for maintainable and scalable code

Advanced Features

• Device Preview: Preview your designs across different device sizes, screen resolutions, and orientations to ensure responsive layouts
• Widget Tree Visualization: Interactive hierarchical view of your widget structure for easy navigation and management
• Import/Export Functionality: Save and load design files, export generated Flutter code for immediate use in your projects
• Theme Management: Comprehensive theming system with customizable color schemes, typography, and Material Design theme configurations
• Code Generation: Automatically generate clean, optimized Flutter code from your visual designs

Available Widgets

• Row: Horizontal layout widget with configurable alignment and spacing
• Column: Vertical layout widget with flexible positioning options
• Scaffold: Basic Material app structure with app bar and body support
• Text: Text display widget with customizable font, size, color, and weight
• Container: Flexible container with padding, margin, border, and background styling
• Card: Material Design card widget with elevation and rounded corners

Project Structure

lib/
├── main.dart              # App entry point
├── app.dart               # Main app configuration
├── screens/
│   └── designer_screen.dart  # Main designer screen
└── widgets/
    ├── left_sidebar.dart     # Left sidebar with widget library
    ├── design_canvas.dart    # Main design canvas
    └── properties_panel.dart # Properties editing panel

Dependencies

• flutter_riverpod: State management solution
• go_router: Navigation routing (for future features)
• cupertino_icons: iOS-style icon library
• flutter_glimpse: Core dependency for the Flutter SDUI Designer

Getting Started

Prerequisites

• Flutter SDK installed on your system
• A code editor (VS Code, Android Studio, or IntelliJ IDEA recommended)

Quick Start

Try the live version at glimpse.dscvit.com - no installation required!

Installation

1. Clone this repository:

git clone <repository-url>
cd flutter-sdui-designer

2. Install dependencies:

flutter pub get
# Or add the package directly
pub add flutter_glimpse

3. Run the application:

flutter run -d linux
# For other platforms: flutter run -d chrome, flutter run -d macos, etc.

Usage

Basic Workflow

1. Adding Widgets: Browse the widget library in the left sidebar and drag your desired widgets onto the canvas
2. Selecting Widgets: Click on any widget on the canvas to select it and view its properties
3. Editing Properties: Use the properties panel on the right side to modify widget attributes like colors, sizes, text content, and styling
4. Device Preview: Switch between different device previews to test your design's responsiveness
5. Widget Tree: Use the widget tree view to navigate complex layouts and manage parent-child relationships
6. Export Code: Generate and export Flutter code when your design is complete
7. Clearing Canvas: Use the clear button in the canvas toolbar to reset and start fresh

Development

This project follows MVVM (Model-View-ViewModel) architecture patterns and Flutter best practices:

• Separation of concerns between UI and business logic
• Reactive state management with Riverpod
• Modular widget structure for reusability
• Clean code principles for maintainability

Future Enhancements

• Undo/Redo Functionality: Full history management for design changes
• Collaboration Features: Real-time collaborative editing with multiple users
• Extended Widget Library: Support for more Flutter widgets and custom components
• Animation Builder: Visual tool for creating Flutter animations
• Asset Management: Image and icon asset integration
• Responsive Breakpoints: Advanced responsive design tools with breakpoint management
• Plugin System: Extensible architecture for community-built plugins

Contributors

Rujin Devkota

Adhavan K

Made with ❤ by GDSC-VIT