Shapes Drawing in Flutter PDF

14 Dec 20247 minutes to read

Syncfusion® Flutter PDF has support for adding the following shapes:

  • Polygon
  • Line
  • Curve
  • Path
  • Rectangle
  • Pie
  • Arc
  • Bezier
  • Ellipse

Adding shapes to a PDF document

This package supports adding shapes with various color and transparency levels.

Polygon

You can draw a polygon in PDF document by using the drawPolygon method of PdfGraphics. The following code snippet explains how to draw a polygon in the new PDF document.

  • DART
    • //Create a new PDF document
PdfDocument document = PdfDocument();

//Draw a polygon on PDF document
document.pages.add().graphics.drawPolygon(
    [Offset(10, 100), Offset(10, 200), Offset(100, 100), Offset(55, 150)],
    pen: PdfPens.black, brush: PdfSolidBrush(PdfColor(165, 42, 42)));

//Save the PDF document
File('Polygon.pdf').writeAsBytes(await document.save());

//Dispose the document
document.dispose();

    Line

    You can draw a line in PDF document by using the drawLine method of PdfGraphics. The following code snippet explains how to draw a line in the new PDF document.

  • DART
    • //Create a new PDF document
PdfDocument document = PdfDocument();

//Draw a line on PDF document
document.pages.add().graphics.drawLine(
    PdfPen(PdfColor(165, 42, 42), width: 5),
    Offset(10, 100),
    Offset(10, 200));

//Save the PDF document
File('Line.pdf').writeAsBytes(await document.save());

//Dispose the document
document.dispose();

    Curve

    You can draw a curve in PDF document by using the draw method of PdfBezierCurve. The following code snippet explains how to draw a curve in the new PDF document.

  • DART
    • //Create a new PDF document
final PdfDocument document = PdfDocument();

//Create an instance of Bezier curve
final PdfBezierCurve bezier = PdfBezierCurve(
    Offset(100, 10), Offset(150, 50), Offset(50, 80), Offset(100, 10));

//Draw a Bezier curve
bezier.draw(
    page: document.pages.add(), bounds: Rect.fromLTWH(200, 100, 0, 0));

//Save the PDF document
File('Curve.pdf').writeAsBytes(await document.save());

//Dispose the document
document.dispose();

    Path

    You can draw a path in PDF document by using the draw method of PdfPath. The following code snippet explains how to draw a path in the new PDF document.

  • DART
    • //Create a new PDF document
final PdfDocument document = PdfDocument();

//Create an instance of the path
final PdfPath path = PdfPath();

//Add the lines to draw path
path.addLine(Offset(10, 100), Offset(10, 200));
path.addLine(Offset(100, 100), Offset(100, 200));
path.addLine(Offset(100, 200), Offset(55, 150));

//Draw the path
path.draw(page: document.pages.add(), bounds: Rect.zero);

//Save the PDF document
File('Path.pdf').writeAsBytes(await document.save());

//Dispose the document
document.dispose();

    Rectangle

    You can draw a rectangle in PDF document by using the drawRectangle method of PdfGraphics. The following code snippet explains how to draw a rectangle in the new PDF document.

  • DART
    • //Create a new PDF document
final PdfDocument document = PdfDocument();

//Draw the rectangle on PDF document
document.pages.add().graphics.drawRectangle(
    brush: PdfBrushes.chocolate, bounds: Rect.fromLTWH(10, 10, 100, 50));

//Save the PDF document
File('Rectangle.pdf').writeAsBytes(await document.save());

//Dispose the document
document.dispose();

    Pie

    You can draw a pie in PDF document by using the drawPie method of PdfGraphics. The following code snippet explains how to draw a pie in the new PDF document.

  • DART
    • //Create a new PDF document
final PdfDocument document = PdfDocument();

//Draw a pie on page
document.pages.add().graphics.drawPie(
    Rect.fromLTWH(10, 50, 200, 200), 90, 180,
    pen: PdfPen(PdfColor(165, 42, 42), width: 5), brush: PdfBrushes.green);

//Save the PDF document
File('Pie.pdf').writeAsBytes(await document.save());

//Dispose the document
document.dispose();

    Arc

    You can draw an arc in PDF document by using the drawArc method of PdfGraphics. The following code snippet explains how to draw an arc in the new PDF document.

  • DART
    • //Create a new PDF document
final PdfDocument document = PdfDocument();

//Draw arc on page
document.pages.add().graphics.drawArc(
    Rect.fromLTWH(100, 140, 200, 400), 70, 190,
    pen: PdfPen(PdfColor(165, 42, 42), width: 5));

//Save the PDF document
File('Arc.pdf').writeAsBytes(await document.save());

//Dispose the document
document.dispose();

    Bezier

    You can draw a bezier in PDF document by using the drawBezier method of PdfGraphics. The following code snippet explains how to draw a bezier in the new PDF document.

  • DART
    • //Create a new PDF document
final PdfDocument document = PdfDocument();

//Draw Bezier on page
document.pages.add().graphics.drawBezier(
    Offset(100, 10), Offset(150, 50), Offset(50, 80), Offset(100, 10),
    pen: PdfPen(PdfColor(165, 42, 42), width: 1));

//Save the PDF document
File('Bezier.pdf').writeAsBytes(await document.save());

//Dispose the document
document.dispose();

    Ellipse

    You can draw an ellipse in PDF document by using the drawEllipse method of PdfGraphics. The following code snippet explains how to draw an ellipse in the new PDF document.

  • DART
    • //Create a new PDF document
final PdfDocument document = PdfDocument();

//Draw an Ellipse on page
document.pages.add().graphics.drawEllipse(Rect.fromLTWH(10, 200, 450, 150),
    pen: PdfPen(PdfColor(165, 42, 42), width: 5),
    brush: PdfBrushes.darkOrange);

//Save the PDF document
File('Ellipse.pdf').writeAsBytes(await document.save());

//Dispose the document
document.dispose();