Shapes
ZShapes are a special type of Flutter widget that need to be inside a ZIllustration widget.
Table of contents
ZRect
A rectangle. Set size with width and height. Default sizes: width: 1, height: 1.
ZRect(
width: 120,
height: 80,
stroke: 20,
color: Color(0xFFEE6622),
)
All shapes are oriented facing “front” — towards the positive z-axis. Set rotate to orient a shape in another direction.
ZGroup(
children: [
ZPositioned(
translate: ZVector.only(x: -48),
rotate: ZVector.only(y: tau / 4),
child: ZRect(
width: 80,
height: 64,
stroke: 10,
color: Color(0xFFEE6622),
),
),
ZPositioned(
translate: ZVector.only(y: -48),
rotate: ZVector.only(x: tau / 4),
child: ZRect(
width: 80,
height: 64,
stroke: 10,
color: Color(0xFF663366),
),
),
],
)
ZRoundedRect
A rectangle with rounded corners. Set size with width and height, like with ZRect. Set rounded corner radius with borderRadius. Default: cornerRadius: 0.
ZRoundedRect(
width: 120,
height: 80,
borderRadius: 30,
stroke: 20,
color: Color(0xffEEAA00),
)
ZCircle
A circle. Set diameter.
ZCircle(
diameter: 80,
stroke: 20,
color: Color(0xFFCC2255),
)
ZEllipse
A ellipse. Set width and height.
ZEllipse(
width: 60,
height: 120,
stroke: 20,
color: Color(0xFFCC2255),
)
For ZCircle and ZEllipse set quarters to an integer for quarter- and semi-circles. The quarter circle starts in the upper-right and continues clockwise.
ZCircle(
diameter: 80,
quarters: 2,
stroke: 20,
color: Color(0xFFCC2255),
)
ZPolygon
A regular polygon. Set size with radius and the number of sides with sides. Default: radius: 0.5, sides: 3.
ZPolygon(
sides: 5,
radius: 50,
stroke: 20,
color: Color(0xff663366),
),
ZShape
Shape widget for custom shapes. The shape of a ZShape is defined by its path.
path
Defines the shape.
When unset, path defaults to a single point. With stroke set, a single point renders as a sphere.
ZShape(
stroke: 20,
color: Color(0xff663366),
)
Path commands
Set path to Array of path commands. Path commands set the directions for the path to shape. Similar to drawing a path in Canvas
There are four path commands: ZLine, ZMove, ZArc, and ZBezier.
path: [
ZMove(0,0,0),
ZLine(/*x,y,z*/),
ZArc(
corner: ZVector(/*x,y,z*/) // corner point
end: ZVector(/*x,y,z*/) // end point
),
ZBezier([
ZVector(/*x,y,z*/) // start control point
ZVector(/*x,y,z*/) // end control point
ZVector(/*x,y,z*/) // end point
]),
]
ZLine
ZShape(
path: [
ZMove.only(x: -40),
ZLine.only(x: 40),
],
stroke: 20,
color: Color(0xff663366),
)
ZShape(
path: [
ZMove.only(x: -32, y: -40), // start at top left
ZLine.only(x: 32, y: -40), // line to top right
ZLine.only(x: -32, y: 40), // line to bottom left
ZLine.only(x: 32, y: 40), // line to bottom right
],
closed: false,
stroke: 20,
color: Color(0xff663366),
)
Path points can use z coordinates to form 3D shapes
ZShape(
path: [
ZMove.only(x: -32, y: -40, z: 40),
ZLine.only(x: 32, y: -40),
ZLine.only(x: -32, y: 40, z: 40),
ZLine.only(x: 32, y: 40, z: -40),
],
closed: false,
stroke: 20,
color: Color(0xff663366),
)
ZMove
ZShape(
path: [
ZMove.only(x: -32, y: -40), // start at top left
ZLine.only(x: 32, y: -40), // line to top right
ZMove.only(x: -32, y: 40), // line to bottom left
ZLine.only(x: 32, y: 40), // line to bottom right
],
closed: false,
stroke: 20,
color: Color(0xff663366),
)
ZArc
Renders an elliptical curve. The ellipse of the curve fits within a rectangle formed by the previous, corner, and end points.
ZShape(
path: [
ZMove.only(x: -60, y: -60)), // start
ZArc(
corner: ZVector.only(x: 20, y: -60), // corner
end: ZVector.only(x: 20, y: 20) // end point
),
ZArc( // start next arc from last end point
corner: ZVector.only(x: 20, y: 60), // corner
end: ZVector.only(x: 60, y: 60) // end point
),
],
closed: false,
stroke: 20,
color: Color(0xff663366),
)
ZBezier
Renders a bezier curve.
ZShape(
path: [
ZMove.only(x: -60, y: -60),
ZBezier([
ZVector.only(x: 20, y: -60),
ZVector.only(x: 20, y: 60),
ZVector.only(x: 60, y: 60)
]),
],
closed: false,
stroke: 20,
color: Color(0xff663366),
)
closed
Closes the path from the last point back to the first. Enabled by default closed: true.
ZShape(
path: [
ZMove.only(x: 0, y: -40),
ZLine.only(x: 40, y: 40),
ZLine.only(x: -40, y: 40),
],
// closed by default
stroke: 20,
color: Color(0xff663366),
),
ZShape(
path: [
ZMove.only(x: 0, y: -40),
ZLine.only(x: 40, y: 40),
ZLine.only(x: -40, y: 40),
],
closed: false, // unclosed
stroke: 20,
color: Color(0xff663366),
),
ZHemisphere
A spherical hemisphere. Set size with diameter. Set the color of the base ellipse with backfaceColor. Defaults: diameter: 1, fill: true. The origin of the hemisphere is the center of the base. The dome faces front toward positive z-axis.
ZHemisphere(
diameter: 120,
color: Color(0xffCC2255),
backfaceColor: Color(0xffEEAA00),
)
ZCone
A square cylinder with circular bases. Set size with diameter and length. Default diameter: 1, length: 1, fill: true. Set the color of the base ellipse with backfaceColor. The origin of the hemisphere is the center of the base. The dome faces front toward positive z-axis.
ZCone(
diameter: 30,
length: 40,
color: Color(0xffCC2255),
backfaceColor: Color(0xffEEAA00)
)
ZCylinder
A square cylinder with circular bases. Set size with diameter and length. Default diameter: 1, length: 1, fill: true. Set the color of the base ellipse with backfaceColor. The origin of the hemisphere is the center of the base. The dome faces front toward positive z-axis.
ZCylinder(
diameter: 80,
length: 120,
frontface: Colors.red,
color: Colors.orange,
backface: Colors.green,
)
ZBox
A rectangular prism. Set size with width, height, and depth. Set face colors with face options: frontFaceColor, rearFaceColor, leftFaceColor, rightFaceColor, topFaceColor, and bottomFaceColor. Defaults width: 1, height: 1, depth: 1, fill: true
ZBox(
height: 100,
width: 100,
depth: 100,
color: Color(0xffCC2255),
frontColor: Color(0xffCC2255),
topColor: Colors.yellow,
leftColor: Colors.green,
rightColor: Colors.blue,
bottomColor: Colors.orange,
rearColor: Colors.red,
)