[2E2C134B-7352-41E0-92BD-4922751162CC.jpeg]Updated: 29 April 2022 Hi FF community, Hope this custom widget useful for someone..A customizable line chart Preview:[8E2EADDB-1BAF-4C5D-A943-9E9E47C06FAD.gif] Package (pubspec dependency): fl_chart https://pub.dev/packages/fl_chart Additional parameters:[8085C42F-BD64-4492-9E4C-43639A75B9F1.jpeg] Code:
import 'package:fl_chart/fl_chart.dart';
class LineChart1 extends StatefulWidget {
const LineChart1({
Key key,
this.width,
this.height,
this.gradientColor1,
this.gradientColor2,
this.minX,
this.minY,
this.maxX,
this.maxY,
this.verticalLineColor,
this.horizontalLineColor,
this.backgroundColor,
this.bottomTitlesColor,
this.leftTitlesColor,
this.bottomTitle1,
this.bottomTitle2,
this.bottomTitle3,
this.bottomTitle4,
this.bottomTitle5,
this.bottomTitle6,
this.bottomTitle7,
this.bottomTitle8,
this.bottomTitle9,
this.bottomTitle10,
this.bottomTitle11,
this.leftTitle1,
this.leftTitle2,
this.leftTitle3,
this.leftTitle4,
this.leftTitle5,
this.leftTitle6,
this.value0,
this.value1,
this.value2,
this.value3,
this.value4,
this.value5,
this.value6,
this.value7,
this.value8,
this.value9,
this.value10,
this.value11,
}) : super(key: key);
final double width;
final double height;
final Color gradientColor1;
final Color gradientColor2;
final double minX;
final double minY;
final double maxX;
final double maxY;
final Color verticalLineColor;
final Color horizontalLineColor;
final Color backgroundColor;
final Color bottomTitlesColor;
final Color leftTitlesColor;
final String bottomTitle1;
final String bottomTitle2;
final String bottomTitle3;
final String bottomTitle4;
final String bottomTitle5;
final String bottomTitle6;
final String bottomTitle7;
final String bottomTitle8;
final String bottomTitle9;
final String bottomTitle10;
final String bottomTitle11;
final String leftTitle1;
final String leftTitle2;
final String leftTitle3;
final String leftTitle4;
final String leftTitle5;
final String leftTitle6;
final double value0;
final double value1;
final double value2;
final double value3;
final double value4;
final double value5;
final double value6;
final double value7;
final double value8;
final double value9;
final double value10;
final double value11;
@override
_LineChart1State createState() => _LineChart1State();
}
class _LineChart1State extends State {
@override
Widget build(BuildContext context) {
return Stack(
children: [
AspectRatio(
aspectRatio: 1.70,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(18),
),
color: widget.backgroundColor),
child: Padding(
padding: const EdgeInsets.only(
right: 18.0, left: 12.0, top: 24, bottom: 12),
child: LineChart(
mainData(),
),
),
),
),
],
);
}
LineChartData mainData() {
List gradientColors = [
widget.gradientColor1,
widget.gradientColor2,
];
return LineChartData(
gridData: FlGridData(
show: true,
drawVerticalLine: true,
getDrawingHorizontalLine: (value) {
return FlLine(
color: widget.horizontalLineColor,
strokeWidth: 1,
);
},
getDrawingVerticalLine: (value) {
return FlLine(
color: widget.verticalLineColor,
strokeWidth: 1,
);
},
),
titlesData: FlTitlesData(
show: true,
rightTitles: AxisTitles(
sideTitles: SideTitles(showTitles: false),
),
topTitles: AxisTitles(
sideTitles: SideTitles(showTitles: false),
),
bottomTitles: AxisTitles(
sideTitles: SideTitles(
showTitles: true,
reservedSize: 22,
interval: 1,
getTitlesWidget: bottomTitleWidgets,
),
),
leftTitles: AxisTitles(
sideTitles: SideTitles(
showTitles: true,
interval: 1,
getTitlesWidget: leftTitleWidgets,
),
),
),
borderData: FlBorderData(
show: true,
border: Border.all(color: const Color(0xff37434d), width: 1)),
minX: widget.minX,
maxX: widget.maxX,
minY: widget.minY,
maxY: widget.maxY,
lineBarsData: [
LineChartBarData(
spots: [
FlSpot(0, widget.value0),
FlSpot(1, widget.value1),
FlSpot(2, widget.value2),
FlSpot(3, widget.value3),
FlSpot(4, widget.value4),
FlSpot(5, widget.value5),
FlSpot(6, widget.value6),
FlSpot(7, widget.value7),
FlSpot(8, widget.value8),
FlSpot(9, widget.value9),
FlSpot(10, widget.value10),
FlSpot(11, widget.value11),
],
isCurved: true,
gradient: LinearGradient(
colors: gradientColors,
begin: Alignment.centerLeft,
end: Alignment.centerRight,
),
barWidth: 5,
isStrokeCapRound: true,
dotData: FlDotData(
show: false,
),
belowBarData: BarAreaData(
show: true,
gradient: LinearGradient(
colors: gradientColors
.map((color) => color.withOpacity(0.3))
.toList(),
begin: Alignment.centerLeft,
end: Alignment.centerRight,
),
),
),
],
);
}
Widget bottomTitleWidgets(double value, TitleMeta meta) {
const style = TextStyle(
color: Color(0xff68737d),
fontWeight: FontWeight.bold,
fontSize: 16,
);
Widget text;
switch (value.toInt()) {
case 2:
text = const Text('MAR', style: style);
break;
case 5:
text = const Text('JUN', style: style);
break;
case 8:
text = const Text('SEP', style: style);
break;
default:
text = const Text('', style: style);
break;
}
return Padding(child: text, padding: const EdgeInsets.only(top: 8.0));
}
Widget leftTitleWidgets(double value, TitleMeta meta) {
const style = TextStyle(
color: Color(0xff67727d),
fontWeight: FontWeight.bold,
fontSize: 15,
);
String text;
switch (value.toInt()) {
case 1:
text = '10K';
break;
case 3:
text = '30k';
break;
case 5:
text = '50k';
break;
default:
return Container();
}
return Text(text, style: style, textAlign: TextAlign.left);
}
}
Of course, you can modify, add and delete according to your needs and your use-case....