How to set the page margin in a PDF using Syncfusion Flutter PDF Library?
The Flutter PDF library is used to create, read, and edit PDF documents. Using this library, you can set the page margin in PDF using Flutter.
Steps to set the page margin in a PDF document programmatically
- Create a new Flutter application project.
1.1.Open Visual Studio Code (After installing the Dart and Flutter extensions as stated in this setup editor page)
1.2.Click View -> Command Palette…
1.3.Type Flutter and choose Flutter: New Project.
1.4.Enter the project name and press the Enter button.
1.5.Now choose the location of the project.
- 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 the pub once you trigger the flutter pub get a comment or Get packages option from the Visual Studio Code.
dependencies: syncfusion_flutter_pdf: ^20.3.49
Import the following package in your main.dart file.
import 'package:syncfusion_flutter_pdf/pdf.dart';
- 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: _setMargin, ) ], ), ), ); }
- Add the following code to the _setMargin function to set the page margin to the PDF document programmatically.
Future<void> _setMargin() async { //Create a PDF document PdfDocument document = PdfDocument(); //Set margin to all the pages document.pageSettings.margins.all = 50; //Add a page PdfPage page = document.pages.add(); //Create PDF graphics for the page PdfGraphics graphics = page.graphics; //Draw the text graphics.drawString( 'Hello world!', PdfStandardFont(PdfFontFamily.helvetica, 14), bounds: Rect.fromLTWH(20, 20, 0, 0)); //Draw Rectangle to highlight margin graphics.drawRectangle( pen: PdfPen(PdfColor(255, 0, 0)), bounds: Rect.fromLTWH( 0, 0, page.getClientSize().width, page.getClientSize().height)); //Save the document List<int> bytes = await document.save(); //Dispose the document document.dispose(); //Save the file and launch/download. SaveFile.saveAndLaunchFile(bytes, 'output.pdf'); }
- Use the following code to save and launch the generated PDF file.
Web:
5.1.Create a new dart file named save_file_web.dart under the lib folder and import the following packages in save_file_web.dart file.
import 'dart:convert'; import 'dart:html';
5.2.Include the following code snippet in save_file_web.dart file to open the PDF document in Web.
class SaveFile { static Future<void> saveAndLaunchFile( List<int> bytes, String fileName) async { AnchorElement( href: 'data:application/octet-stream;charset=utf-16le;base64,${base64.encode(bytes)}') ..setAttribute('download', fileName) ..click(); } }
Desktop and Mobile:
5.3.Add the following dependencies in your pubspec.yaml file.
path_provider: ^2.0.11 open_file: ^3.2.1 #Open source library to launch the PDF file in mobile devices
5.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 'package:open_file/open_file.dart'; import 'package:path_provider/path_provider.dart'; import 'dart:io';
5.5.Include the following code snippet in save_file_mobile_and_desktop.dart to open the PDF document in 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 in mobile OpenFile.open('$path/$fileName'); } }
- Run the sample using the flutter run command. This will set the page margin in the PDF document. After the application launches, you will get the PDF document as follows.
A complete working sample can be downloaded from PageMarginSample.zip
Take a moment to peruse the documentation, where you can find the options like inserting, rotating, and removing the pages from an existing document. Also, the features like headers and footers, bookmarks, tables, hyperlink, annotation PDF documents, and more with code examples.