stack_canvas 0.2.0+2 copy "stack_canvas: ^0.2.0+2" to clipboard
stack_canvas: ^0.2.0+2 copied to clipboard

A simple customizable canvas for placing widgets in a free style canvas-like manner by wrapping the widget in a Canvas Object and specifying its offset and size.

Flutter Stack Canvas #

A simple canvas for placing widgets in a free style canvas-like manner by wrapping the widget in a Canvas Object and specifying its offset and size.

Furthermore, the canvas offers tranformation utilities to

  • Scale the canvas: zoom in and out.
  • Translate the canvas: move in the 4 directions.

All canvas tranformations can be animated.

See the example app for a comprehensive demo.

Inspired by Rody Davis Jr

Installation #

Add stack_canvas as a dependency in your pubspec.yaml file.

Import Stack Canvas:

import 'package:stack_canvas:stack_canvas.dart;

How to use #

Simply use the StackCanvas widget to embed a new Canvas into your view. This is an empty canvas.

class MyView extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return Container(
            StackCanvas(
                controller: StackCanvasController(),
            ),
        );
    }
}
Empty Canvas
Empty Canvas

Should you need to add objects (obviously), use the StackCanvasController. Using this controller, adding, removing, and transforming the canvas becomes a simple task.

final StackCanvasController controller = StackCanvasController();

And give it to the StackCanvas you want to control.

StackCanvas(
    controller: controller,
),

Now, we can add any widgets we like by wrapping it inside a CanvasObject. CanvasObject is, in fact, a generic type and is defined as CanvasObject<T>; however, most of times, it will be CanvasObject<Widget>, for we're using flutter.

List<CanvasObject<Widget>> objects = [
    CanvasObject<Widget>(
        dx: 100,             // Offset in x-axis
        dy: 100,             // Offset in y-axis
        width: 80,
        height: 40,
        child: Container(    // The widget to be rendered
            color: Colors.red,
        )
    )
];

Ofcourse you can add multiple objects at the same time using that list.

Then add these widget objects to the canvas using the controller.

controller.addCanvasObjects(objects);

Voilà!

A Widget on Canvas
Single Widget

Zoom & Move #

Zoom in & out #

controller.zoomIn();
controller.zoomOut();
Zoomed In Zoomed Out
Zoomed In Zoomed Out

Move in 4 directions #

controller.moveUp();
controller.moveDown();
controller.moveLeft();
controller.moveRight();

Customizing the Canvas #

Here are all the customizable properties with their default values.

StackCanvas(
    width: double.maxFinite,      // Full width
    height: double.maxFinite,     // Full height
    backgroundColor: Colors.white,
    animationDuration: Duration(milliseconds: 400),
    controller: controller,
    disposeController: true,      // If set to false, you need to dispose the controller by yourself
)
StackCanvasController(
    zoomChangeUnit: 0.10,         // The speed of zooming  (scale factor)
    moveChangeUnit: 30.00,        // The speed of movement (translation value)
    offsetReference: Reference.TopLeft,
    zoomReference: Reference.TopLeft,
)

Examples #

Example 1 #

Canvas Transformations
Transformation

Example 2 #

Growing Triangles
Growing Triangles
14
likes
130
pub points
56%
popularity

Publisher

verified publisheralielganzory.me

A simple customizable canvas for placing widgets in a free style canvas-like manner by wrapping the widget in a Canvas Object and specifying its offset and size.

Homepage
Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (LICENSE)

Dependencies

flutter

More

Packages that depend on stack_canvas