Flutter中fl_chart数据为空时用灰色圆形替代空白饼图

在使用fl_chart开发饼图组件时，当数据源为空会出现空白区域，我们可以通过判断数据状态，替换为与正常饼图尺寸一致的灰色圆形占位符。

修改后的ChartWidget代码 #

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

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

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(20),
      child: mapdata.isEmpty
          ? Container(
              // 让容器占满父空间，匹配饼图的布局尺寸
              constraints: const BoxConstraints.expand(),
              decoration: const BoxDecoration(
                shape: BoxShape.circle,
                color: Colors.grey[300],
              ),
            )
          : PieChart(
              PieChartData(
                sectionsSpace: 4,
                centerSpaceRadius: 50,
                sections: mapdata.entries
                    .map((e) => PieChartSectionData(
                          title: e.key.toString(),
                          value: e.value,
                        ))
                    .toList(),
              ),
            ),
    );
  }
}

关键说明 #

• 通过mapdata.isEmpty判断数据源状态，为空时返回灰色圆形容器，否则渲染正常饼图
• 空数据占位容器使用BoxConstraints.expand()确保占满父级空间，和饼图的布局范围一致
• 利用BoxDecoration的BoxShape.circle实现圆形效果，颜色可根据需求调整（示例用Colors.grey[300]）
• 保留外层容器的padding配置，保证占位圆和正常饼图的整体尺寸完全匹配

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={};// 空数据

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

内容的提问来源于stack exchange，提问作者Irfan Ganatra