Home > OS >  how to show piechart with grey colour circle instead of empty when data is null in flutter
how to show piechart with grey colour circle instead of empty when data is null in flutter

Time:11-28

I am creating a chartWidget with the use of fl_chart package,

if chart's data is empty its showing empty...but

I want it to show grey circle with the same size when chart's data is empty...like my attached image

here is my chart widget

class ChartWidget extends StatelessWidget {
  final Map<String, dynamic> mapdata;

  const ChartWidget({super.key, required this.mapdata});

  @override
  Widget build(BuildContext context) {
    return Container(
        padding: EdgeInsets.all(20),
        child: PieChart(
            PieChartData(
                sectionsSpace: 4,
                centerSpaceRadius: 50,
                sections: mapdata.entries
                    .map((e) => PieChartSectionData(
                    title: e.key.toString(), value: (e.value)))
                    .toList()))
    );
  }

}

homescreen

class HomeScreen extends StatelessWidget {
   HomeScreen({Key? key}) : super(key: key);


  Map<String,dynamic> expenseData={
    'Food':3000.0,
    'Medicine':4000.0,
    'Others':800.0
  };
  Map<String,dynamic> incomeData={};//here income data is empty

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
        Expanded(child: ChartWidget(mapdata: expenseData,)),
        Expanded(child: ChartWidget(mapdata: incomeData,)),
      ],),
    );
  }
}

enter image description here

CodePudding user response:

Try this:

sections: mapdata.isEmpty
                  ? [PieChartSectionData(color: Colors.grey)]
                  : mapdata.entries
                      .map((e) => PieChartSectionData(
                          title: e.key.toString(), value: (e.value)))
                      .toList(),

enter image description here

enter image description here

  • Related