How to export the pie chart as an image (SfCircularChart) ?
In this article, we explain how to export the pie chart as an image using the Flutter circular chart.
The SfCircularChart widget provides an option to export the chart as an image. The following steps explain how to accomplish this exporting functionality.
Step 1: Initialize the variable _chartData which stores the data source and initialize the variable _circularChartKey which stores the global key of rendering the circular chart. This key is used to convert the chart into an image.
late GlobalKey<SfCircularChartState> _circularChartKey;
late List<ChartSampleData> _chartData;
@override
void initState() {
_circularChartKey = GlobalKey();
_chartData = < ChartSampleData >[
ChartSampleData ('Jan', 12),
ChartSampleData ('Feb', 28),
ChartSampleData ('Mar', 35),
ChartSampleData ('Apr', 47),
ChartSampleData ('Jun', 56),
ChartSampleData ('Jul', 70),
];
super.initState();
}
class ChartSampleData {
ChartSampleData ({this.x, this.y});
final String? x;
final num? y;
}
Step 2: Create the SfCircularChart widget with the PieSeries and assign the _chartData to the dataSource property and map the x, y values to xValueMapper, yValueMapper properties respectively. Also assign the _circularChartKey to the key property.
SfCircularChart( key: _circularChartKey, series: <CircularSeries< ChartSampleData, String>>[ PieSeries< ChartSampleData, String>( dataSource: _chartData, xValueMapper: (ChartSampleData data, _) => data.x, yValueMapper: (ChartSampleData data, _) => data.y ) ], )
Step 3: Import the dart files dart:typed_data and dart.ui files to use the Uint8List, ByteData.
import 'dart:typed_data'; import 'dart:ui' as ui;
Step 4: Create a separate method called _renderCircularImage in which we converted the rendered circular chart to an Image by using the toImage method. Then using this Image, convert it into a byte array using toByteData method. Further creates the Uint8List from the byte array which will be shown on the new page.
Future<void> _renderCircularImage() async {
final ui.Image? data = await _circularChartKey.currentState!.toImage(pixelRatio : 3.0);
final ByteData? bytes = await data!.toByteData(format : ui.ImageByteFormat.png);
final Uint8List imageBytes = bytes!.buffer.asUint8List(bytes.offsetInBytes, bytes.lengthInBytes);
await Navigator.of(context).push<dynamic>(
MaterialPageRoute<dynamic>(
builder: (BuildContext context) {
return Scaffold(
body:Image.memory(imageBytes)
);
},
),
);
}
Step 5: Add the TextButton widget and call the _renderCircularImage method to render the chart image on a new page.
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
SfCircularChart(
key: _circularChartKey,
series: <CircularSeries<ChartSampleData, String>>[
PieSeries<ChartSampleData, String>(
dataSource: _chartData,
xValueMapper: (ChartSampleData data, _) => data.x,
yValueMapper: (ChartSampleData data, _) => data.y,
)
]
),
TextButton(
child: Text('Export as image'),
onPressed: () {
_renderCircularImage();
},
)
]
);
}
Now if we tap the TextButton the exported image of the circular chart will render on the new page.
