https://github.com/m4dgenius0/stack_board_plus

An advanced, stable tool for building photo editing and canvas-based apps with layers, transformations, and interactive elements.
https://github.com/m4dgenius0/stack_board_plus

android editing-tools flutter flutter-apps ios mobile-app

Last synced: 4 months ago
JSON representation

An advanced, stable tool for building photo editing and canvas-based apps with layers, transformations, and interactive elements.

Host: GitHub
URL: https://github.com/m4dgenius0/stack_board_plus
Owner: M4DGENIUS0
License: mit
Created: 2025-07-18T13:30:28.000Z (11 months ago)
Default Branch: main
Last Pushed: 2025-08-28T13:37:29.000Z (10 months ago)
Last Synced: 2025-11-01T04:02:59.442Z (7 months ago)
Topics: android, editing-tools, flutter, flutter-apps, ios, mobile-app
Language: Dart
Homepage: https://pub.dev/packages/stack_board_plus
Size: 17.1 MB
Stars: 2
Watchers: 0
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE

Awesome Lists containing this project

README

          


  
StackBoardPlus

  

    An advanced, stable tool for building photo editing and canvas-based apps with layers, transformations, and interactive elements.

  


  


    

      

    

    

      

    

    

      

    

    

      

    

  


## Features

- **Free Movement System**: Smooth, unrestricted item positioning without grid constraints

- **Interactive Elements**: Text, shapes, images, SVG graphics, and custom items

- **Shape Item Support**: Add geometric shapes (rectangle, circle, rounded rectangle, line, star, polygon, heart, half-moon) with customizable fill, stroke, opacity, tilt, and more. Enhanced interaction handling for better user experience.

- **Transform Operations**: Drag, resize, rotate with intuitive handles

- **Multi-Selection**: Select and manipulate multiple items simultaneously

- **Layer Management**: Z-index control for proper layering, plus visual Layers drawer in example

- **Grid System**: Optional snap-to-grid functionality

- **Export Capabilities**: Export canvas to various formats

- **Professional UI**: Modern, color-coded handles with visual feedback

- **Touch & Mouse Support**: Optimized for both touch and mouse interactions

- **SVG Support**: Native SVG rendering with flutter_svg integration

- **Drawing Mode**: Add freehand drawing/canvas items with full customization, undo/redo, and import/export as JSON. Drawing items support pan, zoom, background, border, gradients, and more.

Below are real examples of what you can build with StackBoardPlus:

---



  

  

  





  

  

  





  

  

  



## Enhanced Movement System

StackBoardPlus features a completely redesigned movement system that provides:

- ✅ **Smooth Free Movement** - No grid constraints during drag operations

- ✅ **Professional Handles** - Color-coded, modern design with shadows

- ✅ **Smart Interaction** - Dynamic cursors and visual feedback

- ✅ **Adaptive UI** - Handles that adapt to item size and context

- ✅ **Responsive Design** - Optimized for both desktop and mobile

See [ENHANCED_MOVEMENT.md](ENHANCED_MOVEMENT.md) for detailed information.

## Getting Started

### Installation

Add StackBoardPlus to your `pubspec.yaml`:

```yaml

dependencies:

  stack_board_plus: ^0.0.7

```

OR

```yaml

dependencies:

  stack_board_plus:

    git: https://github.com/M4DGENIUS0/stack_board_plus.git

```

### Basic Usage

```dart

import 'package:stack_board_plus/stack_board_plus.dart';

class MyCanvasApp extends StatefulWidget {

  @override

  _MyCanvasAppState createState() => _MyCanvasAppState();

}

class _MyCanvasAppState extends State {

  late StackBoardPlusController _controller;

  @override

  void initState() {

    super.initState();

    _controller = StackBoardPlusController();

  }

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      body: StackBoardPlus(

        controller: _controller,

        elevation: 6.0, 

        onItemSelected: (item) {

          print('Selected: ${item.id}');

        },

      ),

    );

  }

}

```

## Examples

Check out the comprehensive examples in the `example/` directory:

- **Professional Demo** (`main.dart`): Clean, modular interface with all item types and tools

- **Modular Architecture**: Organized into `models/`, `pages/`, `dialogs/`, `widgets/`, `mixins/`, and `utils/` for easy debugging and maintenance

- **Developer Guide** (`DEVELOPER_GUIDE.md`): Technical documentation

- **Reorganization Guide** (`REORGANIZATION_README.md`): Details about the new modular structure

To run the example:

```bash

cd example

flutter pub get

flutter run

```

Or use the provided scripts:

- Windows: `run_example.bat`

- PowerShell: `run_example.ps1`

## Item Types

### Text Items

```dart

final textItem = TextStackItem(

  id: 'text_1',

  position: const Offset(100, 100),

  size: const Size(200, 50),

  textContent: 'Hello StackBoardPlus!',

  style: const TextStyle(fontSize: 18, color: Colors.black),

);

controller.addItem(textItem);

```

### Shape Items

```dart

final shapeItem = StackShapeItem(

  data: StackShapeData(

    type: StackShapeType.circle, // or rectangle, roundedRectangle, star, polygon, heart, halfMoon

    fillColor: Colors.blue,

    strokeColor: Colors.blue.shade800,

    strokeWidth: 3,

    opacity: 1.0,

    tilt: 0.0,

    width: 100,

    height: 100,

    flipHorizontal: false,

    flipVertical: false,

    endpoints: 5, // for star/polygon

  ),

  size: const Size(100, 100),

);

controller.addItem(shapeItem);

```

### Image Items

```dart

final imageItem = ImageStackItem(

  id: 'image_1',

  position: const Offset(200, 200),

  size: const Size(120, 80),

  imageProvider: NetworkImage('https://example.com/image.jpg'),

);

controller.addItem(imageItem);

```

### SVG Items

StackBoardPlus now supports comprehensive SVG rendering from multiple sources!

```dart

// 1. SVG from string content

final svgItem = StackImageItem.svg(

  svgString: '''

  

''',

  size: const Size(150, 150),

  fit: BoxFit.contain,

  semanticLabel: 'Golden Star',

);

// 2. SVG from network URL

final svgNetworkItem = StackImageItem.svgNetwork(

  url: 'https://example.com/icon.svg',

  size: const Size(120, 120),

  color: Colors.blue, // Tint color

);

// 3. SVG from assets

final svgAssetItem = StackImageItem.svgAsset(

  assetName: 'assets/icons/my_icon.svg',

  size: const Size(100, 100),

  fit: BoxFit.contain,

);

// 4. SVG from file (e.g., from gallery)

final svgFileItem = StackImageItem.svgFile(

  file: File('/path/to/file.svg'),

  size: const Size(200, 200),

  color: Colors.red,

);

// Add to board

controller.addItem(svgItem);

```

**SVG Features:**

- ✅ String content, Network URLs, Assets, and Files

- ✅ Color tinting and blend modes

- ✅ Automatic SVG detection by file extension

- ✅ Loading indicators for network SVGs

- ✅ Full transform support (drag, resize, rotate)

- ✅ Accessibility support

## Configuration

```dart

StackBoardPlusConfig(

  enableMultiSelect: true,     // Allow multiple item selection

  enableSnapToGrid: false,     // Disable for free movement

  showGrid: false,             // Hide grid for clean appearance

  minItemSize: 20,             // Minimum item size

  maxItemSize: 500,            // Maximum item size

  backgroundColor: Colors.white, // Canvas background

)

```

## Advanced Features

- **Layer Management**: Control item z-index and stacking order

  - Controller APIs: `moveItemOnTop`, `moveItemToBottom`, `moveItemForward`, `moveItemBackward`, `moveItemToIndex`

  - Example Layers drawer with previews and quick actions

- **Export System**: Export canvas to PNG, SVG, or custom formats

- **Undo/Redo**: Built-in history management

- **Custom Items**: Create your own interactive elements

- **Property Editing**: Real-time property modification

- **Keyboard Shortcuts**: Customizable key bindings

## Contributing

We welcome contributions! Please see our [Contributing Guidelines](CONTRIBUTING.md) for details.

1. Fork the repository

2. Create your feature branch (`git checkout -b feature/amazing-feature`)

3. Commit your changes (`git commit -m 'Add amazing feature'`)

4. Push to the branch (`git push origin feature/amazing-feature`)

5. Open a Pull Request

## License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

## Support

- 📋 [Issues](https://github.com/M4DGENIUS0/stack_board_plus/issues) - Report bugs or request features

- 💬 [Discussions](https://github.com/M4DGENIUS0/stack_board_plus/discussions) - Community support

## Changelog

See [CHANGELOG.md](CHANGELOG.md) for a detailed list of changes and updates.

---

**StackBoardPlus** - Building the future of interactive canvas applications in Flutter 🚀

ecosyste.ms

Data

Tools

Indexes

Applications

Experiments

Awesome

https://github.com/m4dgenius0/stack_board_plus

Awesome Lists containing this project

README

StackBoardPlus