Reputation: 4731
I would like to use PieChart (from fl_chart package) with AspectRatio widget for responsive/adaptative UI.
I already done same thing with LineChart and AspectRatio and it run like a charm.
But for PieChart I can't do that. I try :
On this container piece of code
Expanded(
child: Row(children: [
Expanded(child: Container(width: 648, color: MyColors.mainBackground, child: BalanceYearChart(year: currentYear, month: currentMonth))),
Expanded(child: Container(width: 648, color: MyColors.mainBackground, child: PieCategoryChart(year: currentYear, month: currentMonth))),
Expanded(child: Container(width: 648, color: MyColors.mainBackground, child: LineSoldeChart(year: currentYear, month: currentMonth, lastMonth: 12))),
]),
),
Only PieChart not run with AspectRatio but BalanceYearChart and LineSoldeChart Widget run like a charm
Sample code of the PieChart
return Column(crossAxisAlignment: CrossAxisAlignment.stretch, children: [
Row(mainAxisSize: MainAxisSize.min, children: [
makeTransactionsIcon(),
const SizedBox(width: 38),
const Text('Ratio', style: TextStyle(color: Colors.white, fontSize: 22)),
const SizedBox(width: 4),
const Text('expenses',
style: TextStyle(color: Color(0xff77839a), fontSize: 16)),
]),
SizedBox(
width: 300,
height: 35,
child: Padding(
padding: const EdgeInsets.only(right: 120, top: 15),
child: Text(
valueDisplay == 0 ? '' : '$valueDisplay€',
textAlign: TextAlign.center,
style: TextStyle(
color: MyColors.getColor(colorDisplay), fontSize: 18),
))),
SizedBox(
width: 100,
height: 330,
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
const SizedBox(height: 1),
Expanded(
child: PieChart(
PieChartData(
pieTouchData: PieTouchData(
touchCallback: (FlTouchEvent event, pieTouchResponse) {
setState(() {
if (!event.isInterestedForInteractions ||
pieTouchResponse == null ||
pieTouchResponse.touchedSection == null) {
touchedIndex = -1;
return;
}
touchedIndex =
pieTouchResponse.touchedSection!.touchedSectionIndex;
if (touchedIndex != -1) {
valueDisplay =
data.values.elementAt(touchedIndex)['sum'].round();
colorDisplay = data.values
.elementAt(touchedIndex)['categoryColor'];
} else {
valueDisplay = 0;
}
});
},
),
borderData: FlBorderData(show: true),
sectionsSpace: 5,
centerSpaceRadius: 75,
sections: showingSections(data),
),
),
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: widgetsLegend),
const SizedBox(width: 10),
],
),
),
]);
Example of the AspectRatio run correctly with LineSoldeChart
return AspectRatio(
aspectRatio: 1.23,
child: Stack(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
const SizedBox(height: 37),
Text(
isShowingMainData ? 'Main Balance' : 'Month measure',
style: const TextStyle(
color: Color(0xFF50E4FF),
fontSize: 32,
fontWeight: FontWeight.bold,
letterSpacing: 2),
textAlign: TextAlign.center,
),
const SizedBox(height: 37),
Expanded(
child: Padding(
padding: const EdgeInsets.only(right: 16, left: 6),
child: _LineChart(
isShowingMainData: isShowingMainData,
data: data,
month: widget.month,
lastMonth: widget.lastMonth,
year: widget.year),
),
),
const SizedBox(height: 10),
],
),
IconButton(
icon: Icon(Icons.refresh,
color: Colors.white.withOpacity(isShowingMainData ? 1.0 : 0.5)),
onPressed: () {
setState(() {
isShowingMainData = !isShowingMainData;
});
},
)
],
),
);
In this context, why my PieChart not run with AspectRatio widget whereas 2 others widget run correctly ?
Upvotes: 0
Views: 41