Category / Section
How to convert the SfDateRangePicker control into pdf using PDF viewer
2 mins read
In the Flutter date range picker, convert the SfDateRangePicker into pdf by using the PDF Viewer control.
STEP 1: Add the required packages in the Pubspec.yaml file.
dependencies: flutter: sdk: flutter syncfusion_flutter_datepicker: ^19.2.47 syncfusion_flutter_pdf: ^19.2.46-beta path_provider: ^2.0.2 open_file: ^3.2.1
STEP 2: Add the following methods for converting the picker to pdf.
Future<void> _renderPickerPDF() async {
PdfDocument document = PdfDocument();
PdfPage page = document.pages.add();
final RenderRepaintBoundary boundary =
_globalKey.currentContext?.findRenderObject() as RenderRepaintBoundary;
final ui.Image data = await boundary.toImage(pixelRatio: 3.0);
final ByteData? bytes =
await data.toByteData(format: ui.ImageByteFormat.png);
final Uint8List imageBytes =
bytes!.buffer.asUint8List(bytes.offsetInBytes, bytes.lengthInBytes);
page.graphics
.drawImage(PdfBitmap(imageBytes), Rect.fromLTWH(25, 50, 300, 300));
List<int> byteData = document.save();
document.dispose();
Directory? directory = await getExternalStorageDirectory();
String path = directory!.path;
print(path.toString() + ' Path');
File file = File('$path/Output.pdf');
await file.writeAsBytes(byteData, flush: true);
OpenFile.open('$path/Output.pdf');
}
STEP 3: Call this method using onPressed() callback of the button.
body: Column( children: [ Container( height: 400, width: 400, child: RepaintBoundary( key: _globalKey, child: SafeArea(child: SfDateRangePicker()), ), ), Padding( padding: const EdgeInsets.only(top: 10.0), child: ElevatedButton( onPressed: _renderPickerPDF, child: Text(Picker to pdf'),), ), ], ),
|
