Text Drawing in Flutter PDF

10 Oct 202212 minutes to read

Drawing text in PDF document

You can add text to the PDF document by using the drawString method of PdfGraphics class as shown in the following code sample.

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

//Draw text
document.pages.add().graphics.drawString(
    'Hello World!!!', PdfStandardFont(PdfFontFamily.helvetica, 20),
    brush: PdfBrushes.black, bounds: Rect.fromLTWH(10, 10, 300, 50));

//Saves the document
File('Output.pdf').writeAsBytes(await document.save());

//Disposes the document
document.dispose();

    Drawing text in an existing document

    The following code sample explains how to add text in the existing PDF document by using the drawString method.

  • DART
    • //Loads an existing PDF document
PdfDocument document =
    PdfDocument(inputBytes: File('input.pdf').readAsBytesSync());
  
//Gets the first page from the document
PdfPage page = document.pages[0];

//Draw the text
page.graphics.drawString(
    'Hello World!', PdfStandardFont(PdfFontFamily.helvetica, 20),
    bounds: Rect.fromLTWH(40, 40, 500, 40));
 
//Saves the document
File('output.pdf').writeAsBytes(await document.save());

//Disposes the document
document.dispose();

    Drawing text using different fonts

    The Syncfusion Flutter PDF allows you to add text to the PDF document using the following types of fonts:

    • Standard fonts
    • TrueType fonts
    • Chinese, Japanese and Korean (CJK) fonts

    Draw text using standard fonts

    PDF has fourteen base fonts also known as standard fonts, which has special significance. The details can be referred from the link below.

    Standard type 1 fonts

    You can add text using the standard PDF fonts, by initializing the PdfFont class as PdfStandardFont class. The following code snippet explains this.

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

//Draw text
document.pages.add().graphics.drawString(
    'Hello World!!!', PdfStandardFont(PdfFontFamily.helvetica, 16),
    brush: PdfBrushes.black, bounds: Rect.fromLTWH(10, 10, 300, 50));

//Saves the document
File('Output.pdf').writeAsBytes(await document.save());

//Disposes the document
document.dispose();

    Draw text using TrueType fonts

    You can add text using the font data, by initializing PdfFont class as PdfTrueTypeFont class. The font data can be loaded from the disk. The font data can be initialized to PdfTrueTypeFont as a list of bytes or base64 string format. The following code snippet explains this.

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

//Draw text
document.pages.add().graphics.drawString('Hello World!!!',
    PdfTrueTypeFont(File('Arial.ttf').readAsBytesSync(), 14),
    brush: PdfBrushes.black, bounds: Rect.fromLTWH(10, 10, 300, 50));

//Saves the document
File('Output.pdf').writeAsBytes(await document.save());

//Disposes the document
document.dispose();

    Draw text using CJK fonts

    The Syncfusion Flutter PDF provides support to draw a CJK (Chinese, Japanese, Korean) text using some of the standard CJK fonts. The font data can be initialized by initializing PdfFont class as PDF CJK StandardFont. The following code sample explains this.

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

//Create page and draw text
document.pages.add().graphics.drawString(
    'こんにちは世界', PdfCjkStandardFont(PdfCjkFontFamily.heiseiMinchoW3, 20),
    brush: PdfBrushes.black, bounds: Rect.fromLTWH(10, 10, 300, 50));

//Saves the document
File('Output.pdf').writeAsBytes(await document.save());

//Disposes the document
document.dispose();

    Measuring a string

    The Syncfusion Flutter PDF allows you to measure the size of a string which uses the PdfFont using the measureString method of it and returns the size. Refer to the following code sample.

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

//Set a standard font
PdfFont font = PdfStandardFont(PdfFontFamily.helvetica, 12);

String text = 'Hello World!!!';

//Measure the text
Size size = font.measureString(text);

//Draw text
document.pages.add().graphics.drawString(text, font,
    brush: PdfBrushes.black,
    bounds: Rect.fromLTWH(0, 0, size.width, size.height));

//Saves the document
File('Output.pdf').writeAsBytes(await document.save());

//Disposes the document
document.dispose();

    Drawing Right-To-Left text

    The Syncfusion Flutter PDF allows you to draw the right-to-left language text in a PDF document. To draw RTL scripts such as Arabic, Hebrew, Persian, and Urdu, set the value of textDirection property in the PdfStringFormat class to rightToLeft using PdfTextDirection enum. The languages (e.g., Sindhi and Kurdish) that have more than one script and can be written in either right-to-left or left-to-right format. The leftToRight value of the textDirection property is used to draw RTL text in the left-to-right format. Refer to the following code sample.

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

//Adds a page to the document
PdfPage page = document.pages.add();

String text =
    'سنبدأ بنظرة عامة مفاهيمية على مستند PDF بسيط. تم تصميم هذا الفصل ليكون توجيهًا مختصرًا قبل الغوص في مستند حقيقي وإنشاءه من البداية.\r\n \r\nيمكن تقسيم ملف PDF إلى أربعة أجزاء: الرأس والجسم والجدول الإسناد الترافقي والمقطورة. يضع الرأس الملف كملف PDF ، حيث يحدد النص المستند المرئي ، ويسرد جدول الإسناد الترافقي موقع كل شيء في الملف ، ويوفر المقطع الدعائي تعليمات حول كيفية بدء قراءة الملف.\r\n\r\nرأس الصفحة هو ببساطة رقم إصدار PDF وتسلسل عشوائي للبيانات الثنائية. البيانات الثنائية تمنع التطبيقات الساذجة من معالجة ملف PDF كملف نصي. سيؤدي ذلك إلى ملف تالف ، لأن ملف PDF يتكون عادةً من نص عادي وبيانات ثنائية (على سبيل المثال ، يمكن تضمين ملف خط ثنائي بشكل مباشر في ملف PDF).\r\n\r\nלאחר הכותרת והגוף מגיע טבלת הפניה המקושרת. הוא מתעדת את מיקום הבית של כל אובייקט בגוף הקובץ. זה מאפשר גישה אקראית של המסמך, ולכן בעת עיבוד דף, רק את האובייקטים הנדרשים עבור דף זה נקראים מתוך הקובץ. זה עושה מסמכי PDF הרבה יותר מהר מאשר קודמיו PostScript, אשר היה צריך לקרוא את כל הקובץ לפני עיבוד זה.';

//Draw text
page.graphics.drawString(
    text, PdfTrueTypeFont(File('Arial.ttf').readAsBytesSync(), 14),
    brush: PdfBrushes.black,
    bounds: Rect.fromLTWH(
        0, 0, page.getClientSize().width, page.getClientSize().height),
    format: PdfStringFormat(
        textDirection: PdfTextDirection.rightToLeft,
        alignment: PdfTextAlignment.right,
        paragraphIndent: 35));

//Saves the document
File('Output.pdf').writeAsBytes(await document.save());

//Disposes the document
document.dispose();

    Creating a multicolumn PDF document

    Syncfusion Flutter PDF allows you to create a multi-column text in PDF document by using PdfTextElement class. The following code example explains the same.

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

//Adds a page to the document
PdfPage page = document.pages.add();

String text =
    'Adventure Works Cycles, the fictitious company on which the AdventureWorks sample databases are based, is a large, multinational manufacturing company. The company manufactures and sells metal and composite bicycles to North American, European and Asian commercial markets. While its base operation is located in Washington with 290 employees, several regional sales teams are located throughout their market base.';

//Create a text element with the text and font
//Draw the text in the first column
PdfTextElement(
        text: text, font: PdfStandardFont(PdfFontFamily.timesRoman, 14))
    .draw(
        page: page,
        bounds: Rect.fromLTWH(0, 0, page.getClientSize().width / 2,
            page.getClientSize().height / 2));

//Create a text element with the text and font
//Draw the text in second column
PdfTextElement(
        text: text, font: PdfStandardFont(PdfFontFamily.timesRoman, 14))
    .draw(
        page: page,
        bounds: Rect.fromLTWH(page.getClientSize().width / 2, 0,
            page.getClientSize().width / 2, page.getClientSize().height / 2));

//Saves the document
File('Output.pdf').writeAsBytes(await document.save());

// Disposes the document
document.dispose();

    The PdfLayoutFormat class helps to allow the text to flow across pages. The PdfLayoutResult class provides the rendered bounds of the previously added text, which can be used to place successive elements without overlapping.

    The following code snippet explains how to add elements relatively and also allow the text to flow across multiple pages.

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

//Adds a page to the document
PdfPage page = document.pages.add();

String text =
    'Adventure Works Cycles, the fictitious company on which the AdventureWorks sample databases are based, is a large, multinational manufacturing company. The company manufactures and sells metal and composite bicycles to North American, European and Asian commercial markets. While its base operation is located in Washington with 290 employees, several regional sales teams are located throughout their market base.';

//Create a text element with the text and font
PdfTextElement textElement = PdfTextElement(
    text: text, font: PdfStandardFont(PdfFontFamily.timesRoman, 20));

//Create layout format
PdfLayoutFormat layoutFormat = PdfLayoutFormat(
    layoutType: PdfLayoutType.paginate,
    breakType: PdfLayoutBreakType.fitPage);

//Draw the first paragraph
PdfLayoutResult result = textElement.draw(
    page: page,
    bounds: Rect.fromLTWH(0, 0, page.getClientSize().width / 2,
        page.getClientSize().height),
    format: layoutFormat)!;

//Draw the second paragraph from the first paragraph end position
textElement.draw(
    page: page,
    bounds: Rect.fromLTWH(0, result.bounds.bottom + 300,
        page.getClientSize().width / 2, page.getClientSize().height),
    format: layoutFormat);

//Saves the document
File('Output.pdf').writeAsBytes(await document.save());

//Disposes the document
document.dispose();

    Draw text with Pens and Brushes

    Pens and brushes are used to draw the content on PDF document with specific color and style.

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

//Add a new page and draw text using PdfPen and PdfSolidBrush
document.pages.add().graphics.drawString(
    'Hello World!', PdfStandardFont(PdfFontFamily.helvetica, 20),
    brush: PdfSolidBrush(PdfColor(0, 0, 0)),
    pen: PdfPen(PdfColor(255, 0, 0), width : 0.5),
    bounds: const Rect.fromLTWH(0, 0, 500, 50));

//Save the document
final List<int> bytes =await document.save();

//Dispose the document
document.dispose();

    The Syncfusion Flutter PDF has Pens and Brushes with various built-in colors to draw the content on PDF document.