How to set the height of a grid row in a PDF document using Flutter?
The Flutter PDF library is used to create, read, and edit PDF documents programmatically without Adobe dependencies. Using this library, you can set the height of a grid row in a PDF document using Flutter.
Steps to set the height of a grid row in a PDF document programmatically:
-
Create a new Flutter application project.
- Open Visual Studio Code (After installing the Dart and Flutter extensions as stated in this setup editor page).
- Click View -> Command Palette.
- Type Flutter and choose Flutter: New Project.
- Enter the project name and press Enter.
- 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 and get a comment. or Get packages option from the Visual Studio code.
dependencies:
syncfusion_flutter_pdf: ^25.1.35
- Import the following package in your main.dart file.
import 'package:syncfusion_flutter_pdf/pdf.dart';
- Add the following code in lib/main.dart file to create a simple button.
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
TextButton(
child: Text(
'Set the height of a grid row',
style: TextStyle(color: Colors.white),
),
style: ButtonStyle(
backgroundColor: MaterialStateProperty.resolveWith(
(states) => Colors.blue)),
onPressed: setHeight,
)
],
),
),
);
}
- Include the following code sample in the setHeight method to set the height of a grid row in a PDF document.
Future<void> setHeight() async {
//Create a new PDF document.
PdfDocument document = PdfDocument();
//Create a PdfGrid.
PdfGrid grid = PdfGrid();
//Add columns to grid.
grid.columns.add(count: 3);
//Add headers to grid.
grid.headers.add(2);
PdfGridRow header = grid.headers[0];
header.cells[0].value = 'Employee ID';
header.cells[1].value = 'Employee Name';
header.cells[2].value = 'Salary';
//Add rows to grid.
PdfGridRow row1 = grid.rows.add();
row1.cells[0].value = 'E01';
row1.cells[1].value = 'Clay';
row1.cells[2].value = '\$10,000';
PdfGridRow row2 = grid.rows.add();
row2.cells[0].value = 'E02';
row2.cells[1].value = 'Simon';
row2.cells[2].value = '\$12,000';
//Set the row height.
row1.height = 50;
row2.height = 50;
//Set the row style.
row1.style = PdfGridRowStyle(
backgroundBrush: PdfBrushes.dimGray,
textPen: PdfPens.lightGoldenrodYellow,
textBrush: PdfBrushes.darkOrange,
font: PdfStandardFont(PdfFontFamily.timesRoman, 12));
//Create the PDF grid row style. Assign to second row.
PdfGridRowStyle rowStyle = PdfGridRowStyle(
backgroundBrush: PdfBrushes.lightGoldenrodYellow,
textPen: PdfPens.indianRed,
textBrush: PdfBrushes.lightYellow,
font: PdfStandardFont(PdfFontFamily.timesRoman, 12));
row2.style = rowStyle;
//Draw the grid on the PDF document page.
grid.draw(
page: document.pages.add(), bounds: const Rect.fromLTWH(0, 0, 0, 0));
//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 load a PDF in the Flutter project.
a. Import the following package in your main.dart file.
import 'package:flutter/services.dart';
b. Add the following code in the lib/main.dart file to read the existing PDF file.
Future<List<int>> _readPdfDocumentData(String name) async {
final ByteData data = await rootBundle.load('assets/pdf/$name');
return data.buffer.asUint8List(data.offsetInBytes, data.lengthInBytes);
- Follow these steps to launch the generated PDF file on desktop, mobile, and web platforms.
Web
a. 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';
b. Include the following code sample in save_file_web.dart file to open a PDF document on the 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:
a. 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 on mobile devices
b. 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';
c. Include the following code sample in save_file_mobile_and_desktop.dart to open a 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 the PDF data.
File file = File('$path/$fileName');
//Write the PDF data.
await file.writeAsBytes(bytes, flush: true);
//Open a PDF document on mobile.
OpenFile.open('$path/$fileName');
}
}
- Run the sample using the flutter run command. This will set the height of a grid row in a PDF document. After the application launches, you will get a PDF document as follows.
A complete working sample can be downloaded from Set_the_height_of_a_grid_row.zip.
Take a moment to peruse the documentation, where you can find other options like removing pages from a PDF document. Also, features like extract or find text from PDF documents with code examples.