polygon

Create any polygon easily in Flutter with this package!

animations_480.mov

Features

• Create regular convex polygons.
• Create regular star polygons.
• Create a polygon border.
• Clip any widget with a polygon shape.

Usage

Create a Polygon

With this package you can easily create any kind of polygons by just setting its vertices (in a [(-1,-1);(1,1)] rect).

const polygon = Polygon([
  Offset(0.25, -1),
  Offset(0, -0.25),
  Offset(0.5, 0),
  Offset(-0.25, 1),
  Offset(0, 0.25),
  Offset(-0.5, 0),
]);

You can then create a path from this polygon by using its computePath method. For example you can use it in a CustomPainter:

class PolygonPainter extends CustomPainter {
  PolygonPainter(this.polygon);

  final Polygon polygon;

  @override
  void paint(Canvas canvas, Size size) {
    canvas.drawPath(
      polygon.computePath(rect: Offset.zero & size),
      Paint()..color = Colors.yellow.shade800,
    );
  }

  @override
  bool shouldRepaint(PolygonPainter oldDelegate) {
    return oldDelegate.polygon != polygon;
  }
}

The computePath methods accepts various parameters and you can, for example apply a corner radius to all of the polygon’s corners:

PolygonBorder

This package has also a dedicated ShapeBorder called PolygonBorder, so that you can easily apply a color, a border, an image to the polygon or clip anything through Clip.shape.

DecoratedBox(
  decoration: ShapeDecoration(
    shape: PolygonBorder(
      polygon: polygon,
      turn: 0.125,
      radius: 20.0,
      borderAlign: BorderAlign.outside,
      side:  BorderSide(
        width: 4,
        color: Colors.red,
      ),
    ),
    color: Colors.pink,
  ),
  child: const SizedBox(
    height: 400,
    width: 400,
  ),
),

Specialized polygons.

This package comes with two specialized polygons: A RegularConvexPolygon which can create triangles, tetragons, pentagons, etc. A RegularStarPolygon which can create various star shapes.

playground_480.mov

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. By doing so, I will prioritize your issues or your pull-requests before the others.

Changelog

Please see the Changelog page to know what’s recently changed.

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.

GitHub

View Github