Stack Art Board #

A Flutter package consisting of stacks that allows adding any widgets, and enables editing, deleting, and changing the order of layers.

For a more throughout example see the example.

video

How to Use #

Getting started #

In the pubspec.yaml of your flutter project, add the following dependency:

dependencies:
  ...
  stack_art_board: <latest_version>

In your library add the following import:

import 'package:stack_art_board/stack_art_board.dart';

For help getting started with Flutter, view the online documentation.

Initialize a StackArtboard #

import 'package:stack_art_board/stack_art_board.dart';

final StackArtBoardController controller = StackArtBoardController();

StackArtBoard(
    stackArtBoardKey: UniqueKey(),
    controller: controller,
    artBoardConfig: ArtBoardConfig(
    containerSize: const Size(300, 300),
    artBoardSize: const Size(3000, 3000),
    toolIconWidth: 20,
    borderWidth: 5,
    borderColor: Colors.black,
    rotateWidget: Container(color: Colors.orange),
    deleteWidget: Container(color: Colors.purple),
    ),
    background: Container(color: Colors.green),
),

Add a custom Widget #

controller.add(
    CustomCanvasItem(
        child: Container(
            color: Colors.red,
            child: const Center(
                child: Text('text'),
            ),
        ),
        canvasConfig: CanvasConfig(
            size: const Size(600, 600),
            transform: Matrix4.identity(),
            allowUserInteraction: true,
        ),
    ),
);

Add an Image widget with the ability to penetrate click events through transparent areas of the image. #

final ByteData data = await rootBundle.load('assets/image.png');
final imageBytes = data.buffer.asUint8List();
final image = img_lib.decodeImage(imageBytes);
if (image == null) return;
controller.add(
    TransparentBgImageCanvasItem(
        image: image,
        imageBytes: imageBytes,
        canvasConfig: CanvasConfig(
            size: Size(image.width.toDouble(), image.height.toDouble()),
            transform: Matrix4.identity(),
            allowUserInteraction: true,
        ),
    ),
);

All canvas operations #

void add<T extends CanvasItem>(T item)

void insert<T extends CanvasItem>(T item, int index)

void remove(Key key)

void removeExcept(Key key)

bool contain(Key key)

void clear()

void moveToTop()

void moveToBottom()

void move(int oldIndex, int newIndex)

void reset()

void dispose()

Sponsoring #

I'm working on my packages on my free-time, but I don't have as much time as I would. If this package or any other package I created is helping you, please consider to sponsor me so that I can take time to read the issues, fix bugs, merge pull requests and add features to these packages.

Contributions #

Feel free to contribute to this project.

If you find a bug or want a feature, but don't know how to fix/implement it, please fill an issue.
If you fixed a bug or implemented a feature, please send a pull request.