Exporting in Flutter Cartesian Charts (SfCartesianChart)

21 Apr 20213 minutes to read

SfCartesianChart provides support to export the Cartesian chart as a PNG image or as PDF document.

Export image

To export the Cartesian chart as a PNG image, we can get the image by calling toImage method in repaint boundary.

  • dart
  • Future<void> _renderCartesianImage() async {
          dart_ui.Image data = await _cartesianKey.currentState!.toImage(pixelRatio: 3.0);
          final bytes = await data.toByteData(format: dart_ui.ImageByteFormat.png);
          if (data != null) {
          await Navigator.of(context).push(
            MaterialPageRoute(
              builder: (BuildContext context) {
                return Scaffold(
                  appBar: AppBar(),
                  body: Center(
                    child: Container(
                      color: Colors.white,
                      child: Image.memory(bytes!.buffer.asUint8List()),
                    ),
                  ),
                );
              },
            ),
          );
        }
      }

    Export PDF

    Similar to the above way, we can also export the rendered chart as a PDF document. We create the pdf document using pdf component. This can be done in the application level itself and please find the code snippet below.

  • dart
  • Future<void> _renderCartesianPDF() async {
          var document = PdfDocument();
          PdfPage page = document.pages.add();
          dart_ui.Image data = await _cartesianKey. currentState!.toImage(pixelRatio: 3.0);
          final bytes = await data.toByteData(format: dart_ui.ImageByteFormat.png);
          final Uint8List imageBytes =
              bytes!.buffer.asUint8List(bytes.offsetInBytes, bytes.lengthInBytes);
          page.graphics
              .drawImage(PdfBitmap(imageBytes), Rect.fromLTWH(25, 50, 300, 300));
          var byteData = document.save();
          document.dispose();
          Directory directory = await getExternalStorageDirectory();
          String path = directory.path;
          File file = File('$path/Output.pdf');
          await file.writeAsBytes(byteData, flush: true);
          OpenFile.open('$path/Output.pdf');
        }

    pdf_export