We at Syncfusion have added an essential feature in our Flutter DataGrid in the 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.
You can get both the Excel and PDF exporting functionalities in the syncfusion_flutter_datagrid_export package. We are using our xlsio and pdf 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: |
Step 2: Then, import the following files into your application:
import 'package:syncfusion_flutter_datagrid_export/export.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.
@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 class. So, we have to create the GlobalKey with the SfDataGridState and assign the created key to the SfDataGrid.
Refer to the following code.
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:
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.
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, web, and 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:
In the following code snippet, we perform the PDF exporting inside the Export To PDF button’s onPressed callback.
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 and 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.
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:
Note: Refer to the export To Excel and export To PDF documentations for more details.
Thanks for reading! I hope you now have enough information about the new exporting feature in the Flutter DataGrid that rolled out in the 2021 Volume 3 release. This feature is also listed in our Release Notes and What’s New pages. Try out this incredible feature and enjoy hassle-free exporting!
Browse our Flutter documentation for complete details about our Flutter widgets. You can also see Syncfusion’s Flutter app with many examples in this GitHub repository. Don’t miss our demo app in Google Play and the App Store.
If you are not a customer yet, you can try our 30-day free trial to check out these features.
Also, you can contact us through our support forum, feedback portal, or Direct-Trac support system. We are always happy to assist you!