The template on one page is not getting applied to next pages automaticaly while paginating.

Hey team, I have created a design template on my first page. I also enabled pagination if  one element exceeds the current page it should move to next page. I want the back ground design of my first page also to paginate while the text over it paginates.

May you help me in solving this myth.


My Code:

Future<List<int>> generateTemplate() async {
//Create a new PDF document
  PdfDocument document = PdfDocument();
//Add a page to the document
  PdfPage page = document.pages.add();

  final Size pageSize = page.getClientSize();
  //Draw rectangle
  page.graphics.drawRectangle(
      bounds: Rect.fromLTWH(0, 0, pageSize.width, pageSize.height * 0.25),
      brush: PdfSolidBrush(PdfColor(91, 126, 215)));
  page.graphics.drawRectangle(
      bounds:
          Rect.fromLTWH(0, 0, pageSize.width * 0.35, pageSize.height * 0.25),
      brush: PdfSolidBrush(PdfColor(65, 104, 205)));
  page.graphics.drawRectangle(
      bounds: Rect.fromLTWH(0, pageSize.height * 0.25, pageSize.width * 0.35,
          pageSize.height * 0.75),
      brush: PdfSolidBrush(PdfColor(80, 204, 205)));
  page.graphics.drawRectangle(
      bounds: Rect.fromLTWH(pageSize.width * 0.35, pageSize.height * 0.25,
          pageSize.width * 0.65, pageSize.height * 0.75),
      brush: PdfSolidBrush(PdfColor(255, 104, 205)));

//Text string
  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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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, 14));
//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, page.getClientSize().height),
      format: layoutFormat)!;
 List<int> bytes = await document.save();
  document.dispose();

  return bytes;
}

Attachment: ​I have attached the output pdf file having a background design on just first page.
What I want to achieve: ​I want the background design on first page to be paginated on all new paginated pages.

 

Attachment: pdf_5bd5625a.zip

4 Replies 1 reply marked as answer

GK Gowthamraj Kumar Syncfusion Team August 18, 2022 10:53 AM UTC

Hi Zia Ur,

Syncfusion Flutter PDF allows you to create a multi-column background design in a PDF document by using PdfTextElement class and beginPageLayout event. We have shared the code sample to achieve your requirement with an output document for your reference. Please try the below code snippet on your end and let us know if it satisfies your requirement or not.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Code-739281779

Output: https://www.syncfusion.com/downloads/support/directtrac/general/pd/FlutterEvent1400131026

Please refer to the code snippet with page background event code;

//Create a new PDF document

    PdfDocument document = PdfDocument();

    //Add a page to the document

    PdfPage page = document.pages.add();

    drawPageBackground(page);

    //Text string

    String text =

        'Your long text';

    //Create a text element with the text and font

    PdfTextElement textElement = PdfTextElement(

        text: text, font: PdfStandardFont(PdfFontFamily.timesRoman, 14));

 

    textElement.beginPageLayout = (Object sender, BeginPageLayoutArgs args) {

      drawPageBackground(args.page);

    };

    //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, page.getClientSize().height),

        format: layoutFormat)!;

    List<int> bytes = await document.save();

    document.dispose();

    return bytes;

 



void drawPageBackground(PdfPage page) {

    final Size pageSize = page.getClientSize();

    //Draw rectangle

    page.graphics.drawRectangle(

        bounds: Rect.fromLTWH(0, 0, pageSize.width, pageSize.height * 0.25),

        brush: PdfSolidBrush(PdfColor(91, 126, 215)));

    page.graphics.drawRectangle(

        bounds:

            Rect.fromLTWH(0, 0, pageSize.width * 0.35, pageSize.height * 0.25),

        brush: PdfSolidBrush(PdfColor(65, 104, 205)));

    page.graphics.drawRectangle(

        bounds: Rect.fromLTWH(0, pageSize.height * 0.25, pageSize.width * 0.35,

            pageSize.height * 0.75),

        brush: PdfSolidBrush(PdfColor(80, 204, 205)));

    page.graphics.drawRectangle(

        bounds: Rect.fromLTWH(pageSize.width * 0.35, pageSize.height * 0.25,

            pageSize.width * 0.65, pageSize.height * 0.75),

        brush: PdfSolidBrush(PdfColor(255, 104, 205)));

  }

 

 


Please refer to the below documentation page for PDF flutter,

https://help.syncfusion.com/flutter/pdf/working-with-text#creating-a-multicolumn-pdf-document


Please let us know if you need any further assistance in this.


Regards,

Gowthamraj K

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.





ZU Zia Ur August 19, 2022 03:17 PM UTC

hey @Gowthamraj Kumar  thanks for your assist. Your answer is comprehensive but there is another issue 

What if we draw a text and it ends at the mid of 4th page and then if we draw our second text then First it is overriding the 4th page's background design and then drawing the next text from the mid of 4th page.

Now the first half of previous page gets under the newly created background resulting in following pdf which is the desired result.   (Check the attached sample).


My code: 


//Create a new PDF document

  PdfDocument document = PdfDocument();

  //Add a page to the document

  PdfPage page = document.pages.add();

  drawPageBackground(page);

  //Text string

  //Create a text element with the text and font

  PdfTextElement textElement = PdfTextElement(
    text: text,
    font: PdfStandardFont(PdfFontFamily.timesRoman, 14),
  );

  textElement.beginPageLayout = (Object sender, BeginPageLayoutArgs args) {
    drawPageBackground(args.page);
  };

  //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, page.getClientSize().height),
      format: layoutFormat)!;

  textElement.draw(
      page: result.page,
      bounds: Rect.fromLTWH(0, result.bounds.bottom + 50,
          page.getClientSize().width, page.getClientSize().height),
      format: layoutFormat)!;
 

  List<int> bytes = await document.save();

  document.dispose();

  return bytes;


void drawPageBackground(PdfPage page) {
  final Size pageSize = page.getClientSize();

  //Draw rectangle

  page.graphics.drawRectangle(
      bounds: Rect.fromLTWH(0, 0, pageSize.width, pageSize.height * 0.25),
      brush: PdfSolidBrush(PdfColor(91, 126, 215)));

  page.graphics.drawRectangle(
      bounds:
          Rect.fromLTWH(0, 0, pageSize.width * 0.35, pageSize.height * 0.25),
      brush: PdfSolidBrush(PdfColor(65, 104, 205)));

  page.graphics.drawRectangle(
      bounds: Rect.fromLTWH(0, pageSize.height * 0.25, pageSize.width * 0.35,
          pageSize.height * 0.75),
      brush: PdfSolidBrush(PdfColor(80, 204, 205)));

  page.graphics.drawRectangle(
      bounds: Rect.fromLTWH(pageSize.width * 0.35, pageSize.height * 0.25,
          pageSize.width * 0.65, pageSize.height * 0.75),
      brush: PdfSolidBrush(PdfColor(255, 104, 205)));
}



Desired Resukt: I want to get rid of this background design overriding that is causing some missing text in pdf by hiding it under the text.

Please help me to solve this issue.

Thanks in advance.



Attachment: sample_810934c1.zip


ZU Zia Ur August 20, 2022 03:53 PM UTC

Hey team! Any solutions? or If you are working on it.?



GK Gowthamraj Kumar Syncfusion Team August 22, 2022 09:26 AM UTC

Hi Zia Ur,


The reported behavior occurs due to that first text element ends at 4th page with background design and then again another text element start at mid of the 4th page, the background design drawn on the existing content. So that the text are not visible. This is not an issue. We can overcome this problem by creating a flag called as previousPage and skips the already background designed page. Please try the below code snippet and let us know the result.


  PdfTextElement textElement = PdfTextElement(

    text: text,

    font: PdfStandardFont(PdfFontFamily.timesRoman, 14),

  );

 

  PdfPage? previousPage;

 

  textElement.beginPageLayout = (Object sender, BeginPageLayoutArgs args) {

    if (previousPage != args.page) {

      drawPageBackground(args.page);

    }

 

    previousPage = args.page;

  };


Please find the modified code snippet and output document from below link,

Code: https://www.syncfusion.com/downloads/support/directtrac/general/ze/1768881142435620

Output: https://www.syncfusion.com/downloads/support/directtrac/general/pd/FlutterBackgroundDesignOutput1629826798


Please let us know if you need any further assistance in this.


Regards,

Gowthamraj K


Marked as answer
Loader.
Up arrow icon