How to fill the Flutter Pie Chart with gradient (SfCircularChart) ?
SfCircularChart supports three gradient types: linear, sweep, and radial. Follow these steps to achieve these gradients in your 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. Both lists 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 demonstrates how to apply a linear gradient to a pie chart:
SfCircularChart(
onCreateShader: (ChartShaderDetails chartShaderDetails) {
return ui.Gradient.linear(chartShaderDetails.outerRect.topRight,
chartShaderDetails.outerRect.centerLeft, colors, stops);
},
);
Sweep Gradient
First, define the _degreeToRadian and _resolveTransform methods, which are used to convert 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 demonstrates how to apply a 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 demonstrates how to apply a 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 gradients to the individual data points using the pointShaderMapper property. For further information, refer to this help document.
Thus, gradients can be effectively applied to Flutter pie charts using SfCircularChart.
View the Github Sample here.
