179 lines
5.4 KiB
Dart
179 lines
5.4 KiB
Dart
import 'package:fl_chart/fl_chart.dart';
|
|
|
|
import 'package:flutter/material.dart';
|
|
|
|
import '../../../themes/charts/appChartColors.dart';
|
|
|
|
class BarChartSample4 extends StatefulWidget {
|
|
BarChartSample4({super.key});
|
|
|
|
final Color dark = Colors.blueAccent;
|
|
final Color normal = AppColors.contentColorCyan;
|
|
final Color light = Colors.limeAccent;
|
|
|
|
@override
|
|
State<StatefulWidget> createState() => BarChartSample4State();
|
|
}
|
|
|
|
class BarChartSample4State extends State<BarChartSample4> {
|
|
int rotationTurns = 1;
|
|
Widget bottomTitles(double value, TitleMeta meta) {
|
|
const style = TextStyle(fontSize: 10);
|
|
String text = switch (value.toInt()) {
|
|
0 => 'Apr',
|
|
1 => 'May',
|
|
2 => 'Jun',
|
|
3 => 'Jul',
|
|
4 => 'Aug',
|
|
_ => '',
|
|
};
|
|
return SideTitleWidget(
|
|
meta: meta,
|
|
child: Text(text, style: style),
|
|
);
|
|
}
|
|
|
|
Widget leftTitles(double value, TitleMeta meta) {
|
|
if (value == meta.max) {
|
|
return Container();
|
|
}
|
|
const style = TextStyle(fontSize: 10);
|
|
return SideTitleWidget(
|
|
meta: meta,
|
|
child: Text(meta.formattedValue, style: style),
|
|
);
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return SelectionArea(
|
|
child: AspectRatio(
|
|
aspectRatio: 1.66,
|
|
child: Padding(
|
|
padding: const EdgeInsets.only(top: 16),
|
|
child: LayoutBuilder(
|
|
builder: (context, constraints) {
|
|
final barsSpace = 4.0 * constraints.maxWidth / 400;
|
|
final barsWidth = 8.0 * constraints.maxWidth / 400;
|
|
return BarChart(
|
|
BarChartData(
|
|
alignment: BarChartAlignment.center,
|
|
rotationQuarterTurns: rotationTurns,
|
|
barTouchData: BarTouchData(enabled: false),
|
|
|
|
titlesData: FlTitlesData(
|
|
show: true,
|
|
bottomTitles: AxisTitles(
|
|
sideTitles: SideTitles(
|
|
showTitles: true,
|
|
reservedSize: 28,
|
|
getTitlesWidget: bottomTitles,
|
|
),
|
|
),
|
|
leftTitles: AxisTitles(
|
|
sideTitles: SideTitles(
|
|
showTitles: true,
|
|
reservedSize: 40,
|
|
getTitlesWidget: leftTitles,
|
|
),
|
|
),
|
|
topTitles: const AxisTitles(
|
|
sideTitles: SideTitles(showTitles: false),
|
|
),
|
|
rightTitles: const AxisTitles(
|
|
sideTitles: SideTitles(showTitles: false),
|
|
),
|
|
),
|
|
gridData: FlGridData(
|
|
show: true,
|
|
checkToShowHorizontalLine: (value) => value % 10 == 0,
|
|
getDrawingHorizontalLine: (value) => FlLine(
|
|
color: AppColors.borderColor.withValues(alpha: 0.1),
|
|
strokeWidth: 1,
|
|
),
|
|
drawVerticalLine: false,
|
|
),
|
|
borderData: FlBorderData(show: false),
|
|
groupsSpace: barsSpace,
|
|
barGroups: getData(barsWidth),
|
|
),
|
|
);
|
|
},
|
|
),
|
|
),
|
|
) );
|
|
}
|
|
|
|
List<BarChartGroupData> getData(double barsWidth) {
|
|
return [
|
|
/// -------------------- 1st Group --------------------
|
|
BarChartGroupData(
|
|
x: 0,
|
|
barRods: [
|
|
/// Last Month
|
|
BarChartRodData(
|
|
toY: 20000000000,
|
|
rodStackItems: [
|
|
BarChartRodStackItem(0, 3000000000, Colors.cyan),
|
|
BarChartRodStackItem(3000000000, 11000000000, Colors.blueAccent),
|
|
BarChartRodStackItem(11000000000, 20000000000, Colors.grey),
|
|
],
|
|
width: barsWidth,
|
|
borderRadius: BorderRadius.zero,
|
|
),
|
|
|
|
/// Current Month
|
|
BarChartRodData(
|
|
toY: 24000000000,
|
|
rodStackItems: [
|
|
BarChartRodStackItem(0, 2000000000, Colors.redAccent),
|
|
BarChartRodStackItem(2000000000, 11000000000, Colors.greenAccent),
|
|
BarChartRodStackItem(
|
|
11000000000,
|
|
24000000000,
|
|
Colors.purpleAccent,
|
|
),
|
|
],
|
|
width: barsWidth,
|
|
borderRadius: BorderRadius.zero,
|
|
),
|
|
],
|
|
),
|
|
|
|
/// -------------------- 2nd Group --------------------
|
|
BarChartGroupData(
|
|
x: 1,
|
|
barRods: [
|
|
/// Last Month
|
|
BarChartRodData(
|
|
toY: 28000000000,
|
|
rodStackItems: [
|
|
BarChartRodStackItem(0, 8000000000, Colors.cyan),
|
|
BarChartRodStackItem(8000000000, 22000000000, Colors.blueAccent),
|
|
BarChartRodStackItem(22000000000, 28000000000, Colors.grey),
|
|
],
|
|
width: barsWidth,
|
|
borderRadius: BorderRadius.zero,
|
|
),
|
|
|
|
/// Current Month
|
|
BarChartRodData(
|
|
toY: 34000000000,
|
|
rodStackItems: [
|
|
BarChartRodStackItem(0, 8000000000, Colors.redAccent),
|
|
BarChartRodStackItem(8000000000, 27000000000, Colors.greenAccent),
|
|
BarChartRodStackItem(
|
|
27000000000,
|
|
34000000000,
|
|
Colors.purpleAccent,
|
|
),
|
|
],
|
|
width: barsWidth,
|
|
borderRadius: BorderRadius.zero,
|
|
),
|
|
],
|
|
),
|
|
];
|
|
}
|
|
}
|