Link Search Menu Expand Document

Shapes

ZShapes are a special type of Flutter widget that need to be inside a ZIllustration widget.

Table of contents

  1. ZRect
  2. ZRoundedRect
  3. ZCircle
  4. ZEllipse
  5. ZPolygon
  6. ZShape
    1. path
    2. Path commands
    3. ZLine
    4. ZMove
    5. ZArc
    6. ZBezier
    7. closed
  7. ZHemisphere
  8. ZCone
  9. ZCylinder
  10. ZBox

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,
)