How to apply linear gradient in flutter charts? - flutter

Question

How to apply linear gradient in the flutter charts?
I have tried with colors class but i am able to apply only a solid color and unable to find a way for using gradient in the graph bars.
chart.Series<Person,String>(
id:"Person3",
colorFn:(_,__)=>chart.MaterialPalette.red.shadeDefault,
domainFn: (Person dataPoint, _)=>dataPoint.name,
measureFn: (Person dataPoint, _)=>dataPoint.no,
data:data2,
)
Provide me some way to apply linear gradient

Answer 1

Apparently there is no such functionality yet. I managed to get it working with the following code:
Widget _buildChart() {
return Container(
height: 300,
child: ShaderMask(
child: charts.BarChart(
_createRandomData(),
animate: true,
primaryMeasureAxis: new charts.NumericAxisSpec(
renderSpec: new charts.NoneRenderSpec(), showAxisLine: false),
domainAxis: new charts.OrdinalAxisSpec(
showAxisLine: false, renderSpec: new charts.NoneRenderSpec()),
layoutConfig: new charts.LayoutConfig(
leftMarginSpec: new charts.MarginSpec.fixedPixel(0),
topMarginSpec: new charts.MarginSpec.fixedPixel(0),
rightMarginSpec: new charts.MarginSpec.fixedPixel(0),
bottomMarginSpec: new charts.MarginSpec.fixedPixel(0)),
defaultRenderer: new charts.BarRendererConfig(
cornerStrategy: const charts.ConstCornerStrategy(30)),
),
shaderCallback: (Rect bounds) {
return LinearGradient(
begin: Alignment.bottomCenter,
end: Alignment.topCenter,
colors: [Color(0xFF51DE93), Color(0xFFFFB540), Color(0xFFFA4169)],
stops: [
0.0,
0.5,
1.0,
],
).createShader(bounds);
},
blendMode: BlendMode.srcATop,
)
);
}
Result:

Answer 2

An Example of AreaSeries chart
#override
Widget build(BuildContext context) {
final List<Color> color = <Color>[];
color.add(Colors.blue[50]);
color.add(Colors.blue[100]);
color.add(Colors.blue);
final List<double> stops = <double>[];
stops.add(0.0);
stops.add(0.5);
stops.add(1.0);
final LinearGradient gradientColors =
LinearGradient(colors: color, stops: stops);
return Container(
width: double.infinity,
height: 250,
child: SfCartesianChart(
primaryXAxis: CategoryAxis(),
series: <AreaSeries<SalesData, String>>[
AreaSeries<SalesData, String>(
dataSource: <SalesData>[
SalesData('Jan', 85),
SalesData('Feb', 58),
SalesData('Mar', 64),
SalesData('Apr', 62),
SalesData('May', 78),
SalesData('Jun', 92),
SalesData('Jul', 90),
],
xValueMapper: (SalesData sales, _) => sales.year,
yValueMapper: (SalesData sales, _) => sales.sales,
gradient: gradientColors,
),
],
),
);
}

Answer 3

Use the property BoxDecoration of Container can implement it , like this :
#override
Widget build(BuildContext context) {
return Container(
width: double.infinity,
height: 370,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors(0XFFA573FF),
blurRadius: 10,
offset: Offset(2, 3)),
],
borderRadius: BorderRadius.all(Radius.circular(18)),
gradient: LinearGradient(colors: [
color: Colors(0XFFA573FF),
color: Colors(0XFF645AFF),
], stops: [
0.35,
1
], begin: Alignment.topLeft, end: Alignment.bottomRight)),
child:
SizedBox(
height: 280,
width: double.infinity,
child: StackedAreaCustomColorLineChart(
StackedAreaCustomColorLineChart._createSampleData())
// replace child with your chart here
),
);
}