Easily Export DataGrid to Excel and PDF in Flutter
Tags: flutter, dart, webdev, mobile
Published: 2021-10-14 12:29:06

---
title: Easily Export DataGrid to Excel and PDF in Flutter
published: true
date: 2021-10-14 11:00:50 UTC
tags: flutter, dart, webdev, mobile
canonical_url: https://www.syncfusion.com/blogs/post/easily-export-datagrid-to-excel-and-pdf-in-flutter.aspx
cover_image: https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Easily-Export-DataGrid-to-Excel-and-PDF-in-Flutter-672x372.png
---

We at Syncfusion have added an essential feature in our [Flutter DataGrid](https://www.syncfusion.com/flutter-widgets/flutter-datagrid "Link to Flutter DataGrid widget") in the [2021 Volume 3](https://www.syncfusion.com/forums/169291/essential-studio-2021-volume-3-main-release-v19-3-0-43-is-available-for-download "Link to download Essential Studio 2021 Volume 3") release. You can now export the Flutter DataGrid content such as column headers, rows, stacked header rows, and table summary rows to Excel and PDF documents, and customize the content that you export.

In this blog, we’ll learn how to easily export the Flutter DataGrid to Excel and PDF documents.

## How to export DataGrid to Excel and PDF

You can get both the Excel and PDF exporting functionalities in the [syncfusion\_flutter\_datagrid\_export](https://pub.dev/packages/syncfusion_flutter_datagrid_export "Link to Flutter DataGrid Export Library") package. We are using our [xlsio](https://pub.dev/packages/syncfusion_flutter_xlsio "Link to Excel (XlsIO) Library") and [pdf](https://pub.dev/packages/syncfusion_flutter_pdf "Link to Flutter PDF library") packages to export the DataGrid content to Excel and PDF, respectively.

Let’s see how it’s done!

**Step 1:** First, add the **syncfusion\_flutter\_datagrid\_export** package as a dependency in your **pubspec.yaml** file.

| `dependencies:
syncfusion_flutter_datagrid_export: ^xx.x.xx
` |

**Step 2:** Then, import the following files into your application:

| `import 'package:syncfusion_flutter_datagrid_export/export.dart';
import 'package:syncfusion_flutter_pdf/pdf.dart';
import 'package:syncfusion_flutter_xlsio/xlsio.dart'
` |

**Step 3:** Now, add the Flutter DataGrid with two buttons: one for exporting to Excel, and another for exporting to PDF format.

Refer to the following code.

```dart
@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          'Syncfusion Flutter DataGrid Export',
          overflow: TextOverflow.ellipsis,
        ),
      ),
      body: Column(
        children: <Widget>[
          Container(
            margin: const EdgeInsets.all(12.0),
            child: Row(
              children: <Widget>[
                SizedBox(
                  height: 40.0,
                  width: 150.0,
                  child: MaterialButton(
                      color: Colors.blue,
                      child: const Center(
                          child: Text(
                        'Export to Excel',
                        style: TextStyle(color: Colors.white),
                      )),
                      onPressed: exportDataGridToExcel),
                ),
                const Padding(padding: EdgeInsets.all(20)),
                SizedBox(
                  height: 40.0,
                  width: 150.0,
                  child: MaterialButton(
                      color: Colors.blue,
                      child: const Center(
                          child: Text(
                        'Export to PDF',
                        style: TextStyle(color: Colors.white),
                      )),
                      onPressed: exportDataGridToPdf),
                ),
              ],
            ),
          ),
          Expanded(
            child: SfDataGrid(
              source: employeeDataSource,
              columns: <GridColumn>[
                GridColumn(
                    columnName: 'ID',
                    label: Container(
                        padding: const EdgeInsets.all(16.0),
                        alignment: Alignment.center,
                        child: const Text(
                          'ID',
                        ))),
                GridColumn(
                    columnName: 'Name',
                    label: Container(
                        padding: const EdgeInsets.all(8.0),
                        alignment: Alignment.center,
                        child: const Text('Name'))),
                GridColumn(
                    columnName: 'Designation',
                    label: Container(
                        padding: const EdgeInsets.all(8.0),
                        alignment: Alignment.center,
                        child: const Text(
                          'Designation',
                          overflow: TextOverflow.ellipsis,
                        ))),
                GridColumn(
                    columnName: 'Salary',
                    label: Container(
                        padding: const EdgeInsets.all(8.0),
                        alignment: Alignment.center,
                        child: const Text('Salary'))),
              ],
            ),
          ),
        ],
      ),
    );
  }
```

**Step 4:** All the exporting-related methods are provided as extension methods in the [SfDataGridState](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGridState-class.html "Link to the SfDataGridState class of Flutter DataGrid widget") class. So, we have to create the [GlobalKey](https://api.flutter.dev/flutter/widgets/GlobalKey-class.html "Link to the GlobalKey class of Flutter DataGrid widget") with the **SfDataGridState** and assign the created key to the SfDataGrid.

Refer to the following code.

```dart
final GlobalKey<SfDataGridState> _key = GlobalKey<SfDataGridState>();

…..
          child: SfDataGrid(
            key: _key,
…..
```

**Step 5: To export to Excel** , you can access the exporting-related methods in the Flutter DataGrid through the \_ **key.currentState!** property **.** The following methods are available for Excel exporting:

- exportToWorkbook
- exportToWorksheet

When you call these methods, you don’t need to pass the rows or columns. They will be automatically taken from the corresponding DataGrid.

In the following code snippet, we perform the Excel exporting inside the **Export To Excel** button’s **onPressed** callback.

```dart
  void exportDataGridToExcel(){
    final Workbook workbook = _key.currentState!.exportToExcelWorkbook();
    final List<int> bytes = workbook.saveAsStream();
    File('DataGrid.xlsx').writeAsBytes(bytes);
    workbook.dispose();
  }
```

**Note:** For more details, refer to the [Create an Excel document in mobile](https://help.syncfusion.com/flutter/xlsio/getting-started#create-an-excel-document-in-mobile "Documentation link to create an Excel document in mobile"), [web](https://help.syncfusion.com/flutter/xlsio/getting-started#create-an-excel-document-in-web "Documentation link to create an Excel document in web"), and [desktop](https://help.syncfusion.com/flutter/xlsio/getting-started#create-an-excel-document-in-desktop "Documentation link to create an Excel document in desktop") documentations.

**Step 6: To export to PDF** , you can access the exporting-related methods in the Flutter DataGrid through the \_ **key.currentState!** property **.** The following methods are available for PDF exporting:

- exportToPdfDocument
- exportToPdfGrid

In the following code snippet, we perform the PDF exporting inside the **Export To PDF** button’s **onPressed** callback.

```dart
  Void exportDataGridToPdf() {
    final PdfDocument document =
        _key.currentState!.exportToPdfDocument();

    final List<int> bytes = document.save();
    File('DataGrid.pdf').writeAsBytes(bytes);
    document.dispose();
  }
```

**Note:** For more details, refer to the [save and download a PDF document on the web](https://help.syncfusion.com/flutter/pdf/getting-started#save-and-download-a-pdf-document-in-web "Documentation link to save and download a PDF document in web") and [mobile](https://help.syncfusion.com/flutter/pdf/getting-started#save-and-open-a-pdf-document-in-mobile "Documentation link to save and open a PDF document in mobile") documentations.

That’s all there is to it. If you press these **Export to Excel** and **Export to PDF** buttons, then the DataGrid content will be exported to Excel and PDF formats, respectively.

## Export customization

As I mentioned at the beginning, you can also perform several customizations while exporting the Flutter DataGrid. Excel and PDF exporting have different kinds of customizations based on their document behavior. They are:

- **Excel**
  - Export columns with the same width as in the DataGrid.
  - Exclude some columns from being exported.
  - Set the starting row and column indexes in an Excel sheet from where the DataGrid content should be started.
- **PDF**
  - Fit all the columns in a page instead of overflowing to another page.
  - Repeat the column headers on each page.
  - Exclude some columns from being exported.

**Note:** Refer to the [export To Excel](https://help.syncfusion.com/flutter/datagrid/export-to-excel "Documentation link to export to Excel in Flutter DataGrid") and [export To PDF](https://help.syncfusion.com/flutter/datagrid/export-to-pdf "Documentation link to export Flutter DataGrid to PDF") documentations for more details.

## Conclusion

Thanks for reading! I hope you now have enough information about the new exporting feature in the [Flutter DataGrid](https://www.syncfusion.com/flutter-widgets/flutter-datagrid "Link to Flutter DataGrid") that rolled out in the [2021 Volume 3](https://www.syncfusion.com/forums/169291/essential-studio-2021-volume-3-main-release-v19-3-0-43-is-available-for-download "Link to download Essential Studio 2021 Volume 3") release. This feature is also listed in our [Release Notes](https://help.syncfusion.com/common/essential-studio/release-notes/v19.3.0.43 "Link to Syncfusion release notes") and [What’s New](https://www.syncfusion.com/products/whatsnew "Link to Syncfusion What's New") pages. Try out this incredible feature and enjoy hassle-free exporting!

Browse our [Flutter documentation](https://help.syncfusion.com/flutter/introduction/overview "Documentation link to introduce Syncfusion Flutter Widgets") for complete details about our Flutter widgets. You can also see Syncfusion’s Flutter app with many examples in this [GitHub repository](https://github.com/syncfusion/flutter-examples "Link to Syncfusion Flutter demos on GitHub"). Don’t miss our demo app in [Google Play](https://play.google.com/store/apps/details?id=com.syncfusion.flutter.examples&hl=en "Link to Syncfusion Flutter UI Widgets app on Google Play Store") and the [App Store](https://apps.apple.com/in/app/syncfusion-flutter-ui-widgets/id1475231341 "Link to Syncfusion Flutter UI Widgets app on the App Store").

If you are not a customer yet, you can try our 30-day [free trial](https://www.syncfusion.com/downloads "Link to the free evaluation of the Syncfusion Essential Studio") to check out these features.

Also, you can contact us through our [support forum](https://www.syncfusion.com/forums "Link to the Syncfusion support forum"), [feedback portal](https://www.syncfusion.com/feedback "Link to Syncfusion Feedback Portal"), or [Direct-Trac support system](https://www.syncfusion.com/support/directtrac/incidents "Link to the Syncfusion support system Direct Trac"). We are always happy to assist you!

## Related blogs

- [Syncfusion Essential Studio 2021 Volume 3 Is Here!](https://dev.to/karthickramasamy08/syncfusion-essential-studio-2021-volume-3-is-here-4383-temp-slug-1354506 "Link to Syncfusion Essential Studio 2021 Volume 3 Is Here! blog")
- [What’s New in 2021 Volume 3: Flutter DataGrid](https://dev.to/karthickramasamy08/what-s-new-in-2021-volume-3-flutter-datagrid-185l-temp-slug-7804609 "Link to What’s New in 2021 Volume 3: Flutter DataGrid blog")
- [What’s New in 2021 Volume 3: Flutter Date Range Picker](https://dev.to/karthickramasamy08/what-s-new-in-2021-volume-3-flutter-date-range-picker-3ec9-temp-slug-4975296 "Link to What’s New in 2021 Volume 3: Flutter Date Range Picker blog")
- [Updating Live Data in Flutter Charts – A Complete Guide](https://dev.to/karthickramasamy08/updating-live-data-in-flutter-charts-a-complete-guide-3m4l-temp-slug-9275083 "Link to Updating Live Data in Flutter Charts – A Complete Guide blog")