How to fill the Flutter Pie Chart with gradient (SfCircularChart) ?
SfCircularChart supports three gradient types: linear, sweep, and radial. Follow these steps to achieve those gradients in our chart using the onCreateShader event. For more information, refer to this help document.
Step 1: Along with the charts package, import the packages ‘dart:ui’ and ‘dart:typed data’.
import 'dart:ui' as ui; import 'dart:typed_data'; import 'package:syncfusion_flutter_charts/charts.dart';
Step 2: Declare and define the required list of colors and stops as follows, in which both must be of equal length.
// Colors to be given for the gradient. List<Color> colors = <Color> [ const Color.fromRGBO(75, 135, 185, 1), const Color.fromRGBO(192, 108, 132, 1), const Color.fromRGBO(246, 114, 128, 1), const Color.fromRGBO(248, 177, 149, 1), const Color.fromRGBO(116, 180, 155, 1) ]; // Stop value denotes fractions along the gradient List<double> stops = <double> [0.2, 0.4, 0.6, 0.8, 1];
Linear Gradient
The following code sample explains how to apply the linear gradient to a pie chart.
SfCircularChart(
onCreateShader: (ChartShaderDetails chartShaderDetails) {
return ui.Gradient.linear(chartShaderDetails.outerRect.topRight,
chartShaderDetails.outerRect.centerLeft, colors, stops);
},
);
Sweep Gradient
Define the _degreeToRadian and _resolveTransform methods, which are used to convert the degrees to radians and rotate the sweep gradient based on the given start and end angles, respectively.
// Rotate the sweep gradient according to the start angle
Float64List _resolveTransform(Rect bounds, TextDirection textDirection) {
final GradientTransform transform = GradientRotation(_degreeToRadian(-90));
return transform.transform(bounds, textDirection: textDirection)!.storage;
}
// Convert degree to radian
double _degreeToRadian(int deg) => deg * (3.141592653589793 / 180);
The following code sample explains how to apply the sweep gradient to a pie chart.
SfCircularChart(
onCreateShader: (ChartShaderDetails chartShaderDetails) {
return ui.Gradient.sweep(
chartShaderDetails.outerRect.center,
colors,
stops,
TileMode.clamp,
_degreeToRadian(0),
_degreeToRadian(360),
_resolveTransform(chartShaderDetails.outerRect, TextDirection.ltr)
);
},
)
Radial Gradient
The following code sample explains how to apply the radial gradient to a pie chart.
SfCircularChart(
onCreateShader: (ChartShaderDetails chartShaderDetails) {
return ui.Gradient.radial(
chartShaderDetails.outerRect.center,
chartShaderDetails.outerRect.right - chartShaderDetails.outerRect.center.dx,
colors,
stops
);
},
)
You can also apply the gradient to the individual data points using the pointShaderMapper property. For further information, refer to this help document.
Thus, the gradient has been filled into the Flutter pie chart.
