Articles in this section
Category / Section

How to fill the Flutter Pie Chart with desired images (SfCircularChart) ?

2 mins read

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);
  },
)

 

Filling the shader as a single segment

 

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,
    )
  ]
)

 

Mapping the shader for the points

 

Thus, we have filled the Flutter pie chart with the desired images.

 

View the sample in GitHub.

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied