如何用Fl-Chart包在Flutter饼图中间添加图片、图标等对象？

Fl-Chart本身没有直接提供在饼图中间插入内容的API，但可以通过Flutter的Stack组件轻松实现你要的效果——把饼图和中间的自定义组件（图标、图片或任意Widget）叠加在一起，核心思路如下：

实现步骤 #

1. 引入依赖
   在pubspec.yaml中添加fl_chart包（使用最新版本）：

   dependencies:
     fl_chart: ^latest_version
   

2. 用Stack组合饼图与中间内容
   使用Stack将PieChart放在底层，中间内容通过Alignment.center定位在饼图正中心。注意要把PieChartData的centerSpaceRadius设为0，避免饼图自带中间空白影响布局。

完整代码示例 #

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

class CenteredContentPieChart extends StatelessWidget {
  const CenteredContentPieChart({super.key});

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 300,
      height: 300,
      child: Stack(
        alignment: Alignment.center,
        children: [
          // 底层饼图
          PieChart(
            PieChartData(
              sectionsSpace: 2,
              centerSpaceRadius: 0, // 取消饼图自带的中间空白
              sections: [
                PieChartSectionData(
                  color: const Color(0xff0293ee),
                  value: 35,
                  title: '35%',
                  radius: 100,
                  titleStyle: const TextStyle(color: Colors.white, fontSize: 16),
                ),
                PieChartSectionData(
                  color: const Color(0xfff8b250),
                  value: 45,
                  title: '45%',
                  radius: 100,
                  titleStyle: const TextStyle(color: Colors.white, fontSize: 16),
                ),
                PieChartSectionData(
                  color: const Color(0xff845bef),
                  value: 20,
                  title: '20%',
                  radius: 100,
                  titleStyle: const TextStyle(color: Colors.white, fontSize: 16),
                ),
              ],
            ),
          ),
          // 中间的自定义内容：这里用跑步图标实现你要的效果
          const Icon(
            Icons.run_circle_outlined,
            size: 80,
            color: Colors.white,
          ),
          // 如果要替换成图片，使用以下代码：
          // Image.asset(
          //   'assets/runner_image.png', // 替换为你的图片路径
          //   width: 80,
          //   height: 80,
          //   fit: BoxFit.contain,
          // ),
        ],
      ),
    );
  }
}

关键注意事项 #

• centerSpaceRadius: 0：必须设置为0，否则饼图中间会保留空白，导致中间内容无法贴合饼图中心。
• 自定义内容灵活度：中间的组件可以是任意Widget，比如文本、图标、图片甚至是嵌套的布局组件，完全根据需求调整。
• 大小适配：通过外层SizedBox的宽高控制饼图整体尺寸，中间内容的大小对应调整即可保持视觉协调。

内容的提问来源于stack exchange，提问作者saeed z