fl_chart Wrap PieChartSectionData with widget

1.6k views Asked by At

I am trying to create a pie chart with the fl_chart package and am wondering if i can wrap element in sections with flutter widget.

...    
PieChart(
                            PieChartData(
                              pieTouchData: pieTouchData,
                              borderData: FlBorderData(
                                show: false,
                              ),
                              centerSpaceRadius: 0,
                              sections: sections,
                              sectionsSpace: sections[index].value == 0 ? 0 : 1,
                            ),
                          )
...

here is the sections' code snippet:

...
    sections = List.generate(
                                categoryList.length,
                                (int sectionIndex) {
                                  
                                  return PieChartSectionData(
                                    titlePositionPercentageOffset: .98,
                                    titleStyle: TextSetting.title24.copyWith(
                                        fontFamily: "Parisienne",
                                        color: Colors.white,
                                        fontSize: fontSize),
                                    radius: radius,
                                    color: widget.transactionType ==
                                            TransactionType.expense
                                        ? AppColour.expensesColor[sectionIndex]
                                        : AppColour.incomesColor[sectionIndex],
                                    title: categoryList[sectionIndex],
                                    showTitle: value == 0 ? false : true,
                                    value: value,
                                  );
                                },
                              );
...

Additional: Im not sure this will be useful but just to clarify more :

    sections = [PieChartSectionData(........), 
PieChartSectionData(......),
]

The intended outcome should be:

sections = [FlutterWidget(child: PieChartSectionData(...), FlutterWidget(child: PieChartSectionData(...)];

The error im getting to do as intended are:

error: The argument type 'PieChartSectionData' can't be assigned to the parameter type 'Widget'. (argument_type_not_assignable at [expense_tracker] lib\screens\analysis_screen_component\monthly_piechart.dart:121)

From my understanding, its because PieChartSectionData is not a widget, but is there anything that i can do to make it as part of a widget?

Thanks!

1

There are 1 answers

0
Nikolay On

Maybe I not understand you, but I use this code for "sections"

List<PieChartSectionData> _listShow(
List<YourData> yourData,
  ) {
var all = 0;
var oneProcent;
for (int i = 0; i < yourData.length; i++) {
  all = all + yourData[i].count;
}
oneProcent = all / 100;

return yourData.asMap().entries.map((entry) {
  int index = entry.key;
  final _isTouched = index == _touchedIndex;
  final double _fontSize = _isTouched ? 20 : 16;
  final double _radius = _isTouched ? 170 : 150;
  var _countdouble = entry.value.count.toDouble();
  return PieChartSectionData(
      color: colorsList[index],
      value: _countdouble,
      title: '',
      radius: _radius,
      badgeWidget: Text(
        '${(entry.value.count / oneProcent).toStringAsFixed(2)}%',
        style: TextStyle(
          fontSize: _fontSize,
          fontWeight: FontWeight.bold,
          color: _isTouched ? Colors.black : Color(0xffffffff),
        ),
      ),
      badgePositionPercentageOffset: .80);
}).toList();

}