Badge not showing when pie chart drawn for the first time

[nicolo-fr]

Describe the bug
I want to show a dynamically generated pie chart with badges. Badges are not showing when pie chart is draw for the first time.

To Reproduce
See code below (it is based on code provided already in issue #507 )
Tap "month 1", a piechart is drawn with no badge.
Tap "month 2" a pie chart is is drawn with badges.
Tap "month3", a placeholder is displayed because there is no data (this is the intended behaviour).
Tap either "month1" or "month2", again a piechart is drawn with no badge

Screenshots
If applicable, add screenshots, or videoshots to help explain your problem.

Versions

• which version of the Flutter are you using? 0.12.1
• which version of the FlChart are you using? PieChart

---

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:fl_chart/fl_chart.dart';

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {
@OverRide
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'FL Chart demo'),
);
}
}

class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);

final String title;

@OverRide
_MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
List categoriesMonth1 = [
Category(
color: Colors.blue,
title: 'Travel',
value: 100,
icon: Icon(Icons.card_travel),
)
];

List categoriesMonth2 = [
Category(
color: Colors.blue,
title: 'Travel',
value: 50,
icon: Icon(Icons.card_travel),
),
Category(
color: Colors.amber,
title: 'Food',
value: 50,
icon: Icon(Icons.restaurant)
),
];

List categoriesMonth3 = [];

List monthOnDisplay = [];

void showCategoriesMonth1() {
setState(() {
monthOnDisplay = categoriesMonth1;
});
}
void showCategoriesMonth2() {
setState(() {
monthOnDisplay = categoriesMonth2;
});
}
void showCategoriesMonth3() {
setState(() {
monthOnDisplay = categoriesMonth3;
});
}

@OverRide
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
RaisedButton(onPressed: showCategoriesMonth1, child: Text('Month 1')),
RaisedButton(onPressed: showCategoriesMonth2, child: Text('Month 2')),
RaisedButton(onPressed: showCategoriesMonth3, child: Text('Month 3')),
],
),
monthOnDisplay.isEmpty ? Text('No transaction') : CustomPieChart(monthOnDisplay),
],
),
),
);
}
}

class Category {
Color color;
double value;
String title;
Icon icon;
Category({this.color, this.icon, this.title, this.value});
}

class CustomPieChart extends StatelessWidget {
List categoriesList;
CustomPieChart(this.categoriesList);
@OverRide
Widget build(BuildContext context) {
final double radius = 24;
final double widgetSize = 60;

final List<PieChartSectionData> sectionList = [];

categoriesList.forEach((category) {
  PieChartSectionData sectionData = PieChartSectionData(
    color: category.color,
    value: category.value,
    title: category.title,
    showTitle: false,
    radius: radius,
    badgeWidget: _Badge(
      category.icon,
      size: widgetSize,
      borderColor: category.color,
    ),
  );
  sectionList.add(sectionData);
});

return AspectRatio(
  aspectRatio: 16 / 9,
  child: Container(
    child: AspectRatio(
      aspectRatio: 1,
      child: PieChart(
        PieChartData(
          borderData: FlBorderData(
            show: false,
          ),
          sectionsSpace: 0,
          centerSpaceRadius: 72,
          sections: sectionList,
        ),
      ),
    ),
  ),
);

}
}

class _Badge extends StatelessWidget {
final Icon icon;
final double size;
final Color borderColor;

const _Badge(
this.icon, {
Key key,
@required this.size,
@required this.borderColor,
}) : super(key: key);

@OverRide
Widget build(BuildContext context) {
return AnimatedContainer(
duration: PieChart.defaultDuration,
width: size,
height: size,
padding: EdgeInsets.all(size * .15),
child: Center(child: icon),
);
}
}

[gmaggio]

@imaNNeoFighT Yes, I noticed this issue as well even before version 0.12.1. So the badges don't show on initial render. But tapping on the chart slices reveals the badge. I've been trying to look into it but still cannot figure out why.

[imaNNeo]

Hi. I apologize I didn't test it before publishing 0.12.1.
Now it has just been fixed in 0.12.2

Please check it out!.

Thanks!

[nicolo-fr]

Thank you so much @imaNNeoFighT, and merry Xmas!