stack_canvas

Description:

stack canvas

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;
copied to clipboard
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(),
),
);
}
}
copied to clipboard



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();
copied to clipboard
And give it to the StackCanvas you want to control.
StackCanvas(
controller: controller,
),
copied to clipboard
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,
)
)
];
copied to clipboard
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);
copied to clipboard
Voilà!



A Widget on Canvas








Zoom & Move #
Zoom in & out #
controller.zoomIn();
controller.zoomOut();
copied to clipboard



Zoomed In
Zoomed Out









Move in 4 directions #
controller.moveUp();
controller.moveDown();
controller.moveLeft();
controller.moveRight();
copied to clipboard
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
)
copied to clipboard
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,
)
copied to clipboard
Examples #
Example 1 #



Canvas Transformations








Example 2 #



Growing Triangles