Articles in this section
Category / Section

How to set the height of a grid row in a PDF document using Flutter?

5 mins read

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:

  1. Create a new Flutter application project.

    1. Open Visual Studio Code (After installing the Dart and Flutter extensions as stated in this setup editor page).
    2. Click View -> Command Palette.flut-2323_img1.png
    3. Type Flutter and choose Flutter: New Project.flut-2323_img3.png
    4. Enter the project name and press Enter.
    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 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
  1. Import the following package in your main.dart file.
import 'package:syncfusion_flutter_pdf/pdf.dart';
  1. 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,
           )
         ],
       ),
     ),
   );
 }
  1. 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');
 }
  1. 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);
  1. 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');
}
}
  1. 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.Screenshot (1316).png

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.

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied