How to create a PDF file in Syncfusion Flutter PDF Library?

Flutter PDF is a non-UI PDF library written natively in Dart for creating PDF documents from scratch. Using this package, you can create a PDF document in the Flutter Mobile and Web platforms.

Steps to create a PDF document programmatically:

1. Create a new Flutter application project.

1. Open Visual Studio Code (after installing the Dart and Flutter extensions as stated in the setup editor page).
2. Click View -> Command Palette.

3. Type Flutter and choose Flutter: New Project.

4. Enter the project name and press the Enter button.
5. Now choose the location of the project.

2. Add the following code in your pubspec.yaml file to install the syncfusion® Flutter PDF package in your application. It will be automatically downloaded from Pub once you trigger the flutter pub get command or Get packages option from Visual Studio Code.

   dependencies:
     syncfusion_flutter_pdf: ^20.3.49
   

1. Import the following package in the main.dart file.

   import 'package:syncfusion_flutter_pdf/pdf.dart';
   

3. Add the following code in the lib/main.dart file to create a simple button.

   @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(
           title: Text(widget.title),
         ),
         body: Center(
           child: Column(
             mainAxisAlignment: MainAxisAlignment.center,
             children: <Widget>[
                TextButton(
               child: Text(
                 'Generate PDF',
                 style: TextStyle(color: Colors.white),
               ),
               style: ButtonStyle(
                   backgroundColor: MaterialStateProperty.resolveWith(
                       (states) => Colors.blue)),
               onPressed: _createPDF,
             )
             ],
           ),
         ),
       );
     }
    
   

4. Add the following code to the _createPDF function to create a PDF document programmatically.

   Future<void> _createPDF() async{
       // Create a PDF document.
       var document = PdfDocument();
    
       // Add page and draw text to the page.
       document.pages.add().graphics.drawString(
           'Hello World!', PdfStandardFont(PdfFontFamily.helvetica, 18),
           brush: PdfSolidBrush(PdfColor(0, 0, 0)),
           bounds: Rect.fromLTWH(0, 0, 500, 30));
           
       // Save the document.
       List<int> bytes = await document.save();
    
       // Dispose of the document.
       document.dispose();
    
       // Save the file and launch/download.
       SaveFile.saveAndLaunchFile(bytes, 'output.pdf');
     }
    
   

5. Follow the below steps to launch the generated PDF file on desktop, mobile, and web platforms.

Web:

1. Add the web package as a dependency in your pubspec.yaml file. Then, create a new Dart file named save_file_web.dart. Finally, add the following code to implement the file download functionality using the web package.

   import 'dart:convert';
   import 'package:web/web.dart' as web;

2. To enable file saving and initiate downloads in a Flutter web environment, use the following code within the saveAndLaunchFile method.

   // Function to save and launch a file for download in a web environment.
   Future<void> saveAndLaunchFile(List<int> bytes, String fileName) async {
     final web.HTMLAnchorElement anchor =
         web.document.createElement('a') as web.HTMLAnchorElement
           ..href = "data:application/octet-stream;base64,${base64Encode(bytes)}"
           ..style.display = 'none'
           ..download = fileName;
   
   // Insert the new element into the DOM.
   web.document.body!.appendChild(anchor);
   
   // Initiate the download.
   anchor.click();
   // Clean up the DOM by removing the anchor element.
   web.document.body!.removeChild(anchor);
   }

Desktop and Mobile:

3. Add the following dependencies in your pubspec.yaml file.

   open_file: ^3.2.1
   path_provider: ^2.0.11 # Open-source library to launch the PDF file in mobile devices
   

4. Create a new Dart file named save_file_mobile_and_desktop.dart under the lib folder and import the following packages in save_file_mobile_and_desktop.dart file.

   import 'dart:io';
   import 'package:open_file/open_file.dart';
   import 'package:path_provider/path_provider.dart';
   

5. Include the following code snippet in save_file_mobile_and_desktop.dart to open the PDF document on Desktop and Mobile.

   class SaveFile {
     static Future<void> saveAndLaunchFile(
         List<int> bytes, String fileName) async {
       // Get external storage directory.
       Directory directory = await getApplicationSupportDirectory();
       // Get directory path.
       String path = directory.path;
       // Create an empty file to write PDF data.
       File file = File('$path/$fileName');
       // Write PDF data.
       await file.writeAsBytes(bytes, flush: true);
       // Open the PDF document on mobile.
       OpenFile.open('$path/$fileName');
     }
   }
    
   

6. Run the sample using the flutter run command. This creates a simple PDF document. After the application launches, you will get the PDF document as follows.

You can download the complete work sample from create_pdf_sample.zip.

Take a moment to peruse the documentation, where you can find other options like drawing right-to-left text, consuming TrueType fonts, standards fonts, and CJK fonts. Also, the features like headers and footers, bookmarks, tables, hyperlinks PDF documents, and more with code examples.

Conclusion:

I hope you enjoyed learning about how to create a PDF file in the Syncfusion® Flutter PDF Library.

You can refer to our Flutter PDF feature tour page to learn about its other groundbreaking feature representations documentation and how to quickly get started with configuration specifications. You can also explore our Flutter PDF example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums or feedback portal. We are always happy to assist you!