How to fill the Flutter Pie Chart with desired images (SfCircularChart) ?
Desired images can be filled into the pie chart and SfCircularChart supports two different ways to fill the shaders. The first way is to fill the image by considering the whole pie chart as a single segment and another way is mapping to the individual point using the shader mapper in the chart. For more information, refer to this help document.
The following steps explain how to apply the shaders to the Flutter pie chart.
Step 1: Import the packages ‘dart:ui’ and 'dart:async' along with the charts package.
import 'dart:ui' as ui; import 'dart:async'; import 'package:syncfusion_flutter_charts/charts.dart';
Step 2: Declare the required images of type Image.
ui.Image? image1; ui.Image? image2; ui.Image? image3; ui.Image? image4;
Step 3: Declare the variable renderWidget of type Widget, which has to be assigned with the chart or CircularProgressIndicator and returned from the widget build method.
/// Widget to be rendered. Widget? renderWidget;
Step 4: Define the getImage method, which loads and assigns the image from the images folder to the image objects.
void getImage() async {
final Completer<ImageInfo> completer = Completer();
final ImageProvider imageProvider = AssetImage('images/apple.png');
imageProvider
.resolve(const ImageConfiguration())
.addListener(ImageStreamListener((ImageInfo info, bool _) async {
completer.complete(info);
final ImageInfo imageInfo = await completer.future;
image1 = imageInfo.image;
}));
}
…
Step 5: If the images are non-null, then you can assign the chart, or else assign the CircularProgressIndicator.
// If the images are not null then we assign chart or we assign CircularProgressIndicator widget.
if (image1 != null && image2 != null && image3 != null && image4 != null) {
renderWidget = Scaffold(
body: CircularChart()
)
}
else{
renderWidget = CircularProgressIndicator()
}
Shader fill
Here, the given image is applied to the whole pie chart by considering it as a single segment using the onCreateShader. The following code sample explains how to apply the image to the pie chart.
SfCircularChart(
//Applies the given image to the whole pie chart
onCreateShader: (ChartShaderDetails chartShaderDetails) {
return ImageShader(image!, TileMode.mirror, TileMode.mirror,
Matrix4.identity().scaled(0.4).storage);
},
)
Mapping shaders for data points
The following code sample explains how to map the corresponding images to the respective data point of the pie chart, which we have mapped using the pointShaderMapper property.
SfCircularChart(
series: <PieSeries<_ChartShaderData, String>>[
PieSeries<_ChartShaderData, String>(
dataSource: <_ChartShaderData>[
_ChartShaderData('Apple', 25,
ui.ImageShader(
image1!,
TileMode.repeated,
TileMode.repeated,
Matrix4.identity().scaled(0.5).storage,
),
),
...
],
xValueMapper: (_ChartShaderData data, _) => data.x,
yValueMapper: (_ChartShaderData data, _) => data.y,
// Mpped using the PointShaderMapper property
pointShaderMapper: (dynamic data, _,
Color color, Rect rect) => data.shader,
)
]
)
Thus, we have filled the Flutter pie chart with the desired images.
