An interactive, web-first Flutter developer tool and vector path editor that converts SVG path data into production-ready Flutter CustomClipper<Path> code — instantly, with an interactive visual canvas and real-time live preview.
Try it now → https://rutviktantisoftware.github.io/shape_generator/
Runs directly in modern desktop and mobile browsers via Flutter Web. No installation required.
- Direct Point Manipulation: Select and drag path anchor points and cubic Bézier curve control handles directly on an interactive canvas.
- Dedicated Canvas Tools:
- Select Tool: Pick and move points and handles.
- Pen Tool: Add new vector points and create curves interactively.
- Pan Tool: Seamlessly pan across large vector spaces.
- Delete Tool: Remove unwanted points with a single click.
- Snap-to-Grid & Zoom: Toggle snap-to-grid with configurable grid sizes, and zoom from 10% to 500% with smooth centering.
- Undo / Redo History: Full command history for all point additions, deletions, and moves.
- Universal Input Format: Paste bare SVG path strings (e.g.
M 0 0 C 10 ... Z), single<path d="..." />elements, or complex multi-path<svg>...</svg>documents. - Automatic Path Extraction: Parses multiple paths and groups seamlessly into either single-path or multi-path clippers.
- Zero-Crash Guard: Resilient error handling gracefully recovers from incomplete, malformed, or partially typed SVG strings without crashing Flutter's paint pipeline.
- Typed
CustomClipper<Path>Classes: Generates drop-in Dart code ready to paste into any Flutter application. - Multiple Scaling Strategies:
- Transform Matrix: Applies affine
Matrix4scaling and translation for sub-pixel precision. - Scale Factor: Uses normalized coordinate scaling factors.
- Transform Matrix: Applies affine
- Responsive vs. Fixed Dimensions: Switch between responsive widgets (scales with container
Size) and fixed-dimension clippers. - Syntax Highlighting & 2D Scrolling: Code panel with syntax coloring and horizontal/vertical scrolling for long paths.
- One-Click Copy: Copy generated Dart code directly to the clipboard with visual confirmation.
- Customizable Fills: Switch between solid colors and vibrant multi-stop linear gradients.
- Interactive Dimension Sliders: Adjust width and height in real-time to test how shapes stretch and adapt.
- Intrinsic Aspect Ratio Lock: Quickly snap back to the original SVG aspect ratio and natural dimensions.
- Built-in Presets: Pre-loaded shapes including Smooth Wave, Ticket Notch, Message Bubble, Star Badge, Organic Blob, Hexagon, Shield, and more.
- Project Management: Create custom shapes, edit shape details, and delete shapes.
- Persistent Local Storage: User shapes and modifications persist automatically across sessions using
shared_preferences.
- Light & Dark Themes: Curated modern UI with seamless theme switching and persistent preferences.
- Modern Typography: Styled using Google Fonts (
Outfit). - Smooth Micro-Interactions: Built using reusable
AppHoverBuilderfor jitter-free hover states and transitions. - Responsive Layout: Desktop 3-panel workflow (Project Sidebar, Center Canvas & Preview, Right Code Panel) and optimized mobile layout with bottom navigation.
The codebase follows a modular, scalable architecture organized by responsibility:
lib/
├── app/
│ └── app.dart # MyApp root widget & MaterialApp configuration
├── clipper/
│ └── dynamic_svg_clipper.dart # Dynamic CustomClipper & MultiPathCardClipper implementations
├── core/
│ ├── constants/
│ │ ├── app_constants.dart # Magic numbers (canvas zoom, grid size, defaults)
│ │ └── app_strings.dart # Centralized static UI strings
│ ├── extensions/
│ │ └── offset_extension.dart # Vector math & Offset extension helpers
│ └── theme/
│ ├── app_colors.dart # AppColors design system palette
│ └── app_theme.dart # ThemeData & typography definitions
├── main.dart # Lean entry point (runApp & ThemeService initialization)
├── models/
│ ├── bezier_point.dart # BezierPoint model & JSON serialization
│ ├── scale_strategy.dart # ScaleStrategy enum
│ └── shape_item.dart # ShapeItem model & pre-configured shapes
├── providers/
│ ├── canvas_state_provider.dart # Canvas pan, zoom, grid, and active tool state
│ └── shape_editor_provider.dart # Shape collection, points, and undo/redo history
├── screens/
│ └── editor/
│ ├── dialogs/ # Add shape, gallery, and help modals
│ └── editor_screen.dart # Main desktop 3-panel & mobile responsive screen
├── services/
│ ├── shape_storage_service.dart # SharedPreferences persistence for user shapes
│ ├── svg_to_path_converter.dart # SVG parser & Dart code generator
│ └── theme_service.dart # Dark / light theme persistence
└── widgets/
├── canvas/ # Interactive canvas, toolbar, and live preview
├── code_panel/ # Syntax-highlighted code viewer
├── nav/ # Top navigation bar & theme toggle
├── project_panel/ # Shape library sidebar & shape tiles
└── shared/ # AppHoverBuilder, chips, and reusable UI components
- Flutter SDK (
>=3.3.0) - Optional: FVM (Flutter Version Manager)
# Clone the repository
git clone https://github.com/rutviktantisoftware/shape_generator.git
cd shape_generator
# Install dependencies
flutter pub get
# Run on Chrome (Web)
flutter run -d chrome
# Or with FVM
fvm flutter run -d chrome# Run unit and widget tests
flutter test
# Run Dart static analysis
flutter analyzeflutter build web --release --base-href "/shape_generator/"The output bundle will be generated in build/web/.
- Flutter — Cross-platform UI toolkit
- path_drawing — SVG path parsing (
parseSvgPathData) - google_fonts — Outfit font family
- shared_preferences — Local data persistence
Rutvik Tanti
- Email: rutviktanti.software@gmail.com
- GitHub: @rutviktantisoftware
This project is licensed under the MIT License - see the LICENSE file for details.