Exception caught by rendering library Bad state: No element - flutter

Question

So I have a 2 bar chart widgets within a Stack, upon pressing a button, the page switches between these 2 charts. The problem is when I switch to the 2nd bar chart, the x-axis values disappear. I get the error
════════ Exception caught by rendering library ═════════════════════════════════
Bad state: No element
The relevant error-causing widget was
BarChart
Here is the first bar chart widget output
2nd bar chart widget output
Here are my bar chart Widgets
BarChartWidget
class BarChartWidget extends StatelessWidget {
final double barWidth = 22;
#override
Widget build(BuildContext context) => BarChart(
BarChartData(
alignment: BarChartAlignment.center,
maxY: 50,
groupsSpace: 12,
barTouchData: BarTouchData(enabled: true),
titlesData: FlTitlesData(
bottomTitles: BarTitles.getTopBottomTitles(),
leftTitles: BarTitles.getSideTitles(),
),
gridData: FlGridData(
checkToShowHorizontalLine: (value) =>
value % BarData.interval == 0,
checkToShowVerticalLine: (value) => value % BarData.interval == 0,
getDrawingHorizontalLine: (value) {
if (value == 0) {
return FlLine(
color: const Color(0xff363753),
strokeWidth: 3,
);
} else {
return FlLine(
color: const Color(0xff2a2747),
strokeWidth: 0.8,
);
}
},
getDrawingVerticalLine: (value) {
if (value == 0) {
return FlLine(
color: const Color(0xff363753),
strokeWidth: 0.8,
);
} else {
return FlLine(
color: const Color(0xff2a2747),
strokeWidth: 3,
);
}
}),
barGroups: BarData.barData
.map(
(data) => BarChartGroupData(
x: data.id,
barRods: [
BarChartRodData(
y: data.y,
width: barWidth,
colors: [data.color],
borderRadius: data.y > 0
? BorderRadius.only(
topLeft: Radius.circular(6),
topRight: Radius.circular(6),
)
: BorderRadius.only(
bottomLeft: Radius.circular(6),
bottomRight: Radius.circular(6),
),
),
],
),
)
.toList(),
),
);
}
BarChartWidget2
class BarChartWidget2 extends StatelessWidget {
final double barWidth = 22;
#override
Widget build(BuildContext context) => BarChart(
BarChartData(
alignment: BarChartAlignment.center,
maxY: 50,
groupsSpace: 12,
barTouchData: BarTouchData(enabled: true),
titlesData: FlTitlesData(
bottomTitles: BarTitles.getTopBottomTitles(),
leftTitles: BarTitles.getSideTitles(),
),
gridData: FlGridData(
checkToShowHorizontalLine: (value) =>
value % BarData2.interval == 0,
checkToShowVerticalLine: (value) =>
value % BarData2.interval == 0,
getDrawingHorizontalLine: (value) {
if (value == 0) {
return FlLine(
color: const Color(0xff363753),
strokeWidth: 3,
);
} else {
return FlLine(
color: const Color(0xff2a2747),
strokeWidth: 0.8,
);
}
},
getDrawingVerticalLine: (value) {
if (value == 0) {
return FlLine(
color: const Color(0xff363753),
strokeWidth: 0.8,
);
} else {
return FlLine(
color: const Color(0xff2a2747),
strokeWidth: 3,
);
}
}),
barGroups: BarData2.barData2
.map(
(data) => BarChartGroupData(
x: data.id,
barRods: [
BarChartRodData(
y: data.y,
width: barWidth,
colors: [data.color],
borderRadius: data.y > 0
? BorderRadius.only(
topLeft: Radius.circular(6),
topRight: Radius.circular(6),
)
: BorderRadius.only(
bottomLeft: Radius.circular(6),
bottomRight: Radius.circular(6),
),
),
],
),
)
.toList(),
),
);
}
I'm not sure what I did wrong, the error is pointing to BarChartWidget2's BarChart. Any help is much appreciated