How to center form field text

Question

When filling the form in an external pdf application the text is centered, but if I'm filling the form with SfPdfViewer package in flutter the text is always aligned on the left. Is there a way to center it?

ManojKumar Arumugasamy · Answer

Hi ZaidAt present, we do
not support aligning the text in the text form fields. We are currently
checking the feasibility of supporting this enhancement in our PDF viewer and
will update you with further details on May 29, 2024. It would be more
helpful if you could share the PDF document that supports this functionality to
consider all the possible cases during implementation. Regards,
Manoj

ImmanKumarP Palanikumar · Answer

Hi Ziad Ghanem,We logged this as a feature request, please follow the below feedback link to know the status about this feature.Feedback link:

Support to maintain text alignment in the form fields in Flutter | Feedback Portal (syncfusion.com)

Regards,Imman Kumar P

ImmanKumarP Palanikumar · Answer

Hi Ziad Ghanem, We
are glad to announce that the "Support for Text alignment in the form fields" is available in our Essential Studio 2024 Volume
2 Service Pack release v26.2.4 which is rolled out and available for download
under the following link. Essential
Studio 2024 Volume 2 Service Pack Release v26.2.4 is available for download |
Announcements Forums | Syncfusion We thank you for your support and
appreciate your patience in waiting for this release. Please get in touch with
us if you would require any further assistance. Regards,  Imman Kumar P

Alexander Schröders · Answer

Hi Kumar,just found this thread when looking for a way to get form fields to align the text at the top and not to center it vertically. Is there any documentation on how to use the feature?#FB188404 - Provided text alignment support for form fields in PDF documents.I would appreciate any helpRegardsAlexander Schröders

Krithiga Perumal · Answer

Hi Alexander,

Syncfusion Flutter PDF Viewer does not support customizing text alignment for form fields directly. However, you can achieve your requirement by modifying the text alignment of the form fields in the PDF document using the Syncfusion Flutter PDF library. Once the alignment is modified, you can save the updated document and load it into the PDF Viewer.

Code snippet to modify the form fields text alignment:

  Future<void> _modifyAndLoadPdf() async {
    // Load the existing PDF document
    final PdfDocument document = PdfDocument(
        inputBytes: await _loadAssetPdf('assets/form_document.pdf'));
    // Access the form fields
    for (int i = 0; i < document.form.fields.count; i++) {
      final PdfField field = document.form.fields[i];
      if (field is PdfTextBoxField) {
        // Set text alignment here
        field.textAlignment = PdfTextAlignment.left;
      } else if (field is PdfListBoxField) {
        field.textAlignment = PdfTextAlignment.left;
      } else if (field is PdfComboBoxField) {
        field.textAlignment = PdfTextAlignment.left;
      }
    }
    // Save the modified PDF to a memory stream
    final List<int> bytes = document.saveSync();
    // Dispose of the document
    document.dispose();
    // Convert to Uint8List for loading in the PDF Viewer
    setState(() {
      _pdfData = Uint8List.fromList(bytes);
    });
  }

Code snippet to view the document saved:

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('PDF Form Alignment Example')),
      body: _pdfData != null
          ? SfPdfViewer.memory(
              _pdfData!,
              controller: _pdfViewerController,
            )
          : Center(child: CircularProgressIndicator()),
    );
  }
}

We have provided a sample implementation using the PDF Library for your reference. Please find the sample attached.

Regards,
Krithiga Perumal.

Attachment: text_alignment_sample_b5494100.zip

Alexander Schröders · Answer

Hi Krithiga,thank you for your reply. It looks like that it is possible to align the text horizontally. My problem is that in a multi line textbox the text is aliged vertically to the center when I view the document in Adobe Reader. Here an example of that. What I noticed is that the text is aligned to the top in the syncfusion pdf viewer Is there any way to change this vertical alignment?Regards Alexander

ImmanKumarP Palanikumar · Answer

Hi Alexander,Vertical text alignment in PDF form fields is not directly supported by PDF standards. It seems that there might be a specific way the document is generated to achieve this effect. Could you please share the PDF document where you observed this behavior? This will help us better assist you and provide an effective solution promptly.Regards,Imman Kumar P

Alexander Schröders · Answer

Hi Imman,sorry for the late response. The form fields are created with Adobe Acrobat Pro and I attached it to this post.To make it easier I uploaded three filesTemplate.pdf﻿﻿The original file that I want to edit with syncfusionSF Edited.pdfThe output that I currently get after my editsAdobe Edited.pdf﻿﻿I noticed that the text gets aligned as I want it to when I for example add one character to a Textbox in Adobe Acrobat and save the file. In this file I did that in the following Textbox. Regards AlexanderAttachment: PDF_Files_5cad4f86.zip

ImmanKumarP Palanikumar · Answer

Hi Alexander,Thank you for sharing the documents. We were able to replicate the reported issue where vertical alignment is applied to the text in the multi-line textbox field. We are currently validating this issue and will provide further updates once we identify its root cause.Regards,Imman Kumar P

ImmanKumarP Palanikumar · Answer

Hi Alexander,We have confirmed the issue "Textbox field text appearance wrongly added vertical alignment" as a defect in our product and we will include the fix in our February 11, 2025, weekly release.Please use the below feedback link to track the status of the reported bug.The vertical alignment of textbox field is incorrect in Flutter | Feedback PortalDisclaimer: “Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.Regards,Imman Kumar P

ImmanKumarP Palanikumar · Answer

Hi Alexander,The fix for the reported issue "The vertical alignment of textbox field is incorrect" has been included in our weekly NuGet release v28.2.4.Package link: https://pub.dev/packages/syncfusion_flutter_pdfviewer/versions/28.2.4 Changelog: https://pub.dev/packages/syncfusion_flutter_pdf/changelog#2824---02042025 Root Cause: While adding the form field's appearance stream, the text was placed in the wrong position within the field, which is the cause of the issue.Regards,Imman Kumar P

Alexander Schröders · Answer

Hi Imman,

thank you very much for the fix. I just tested it and it is looking good on my end now. Regards,Alexander

ImmanKumarP Palanikumar · Answer

Hi Alexander,Thank you for the confirmation. We are marking this ticket as solved.Regards,Imman Kumar P