如何在Flutter应用中绘制BMI等级低-中-高图表？

一、可用的Flutter包推荐 #

• flutter_charts：支持创建分段式水平/垂直条形图，适配BMI多等级区间展示需求，可自定义各区间颜色、标签，还能添加标记点定位当前BMI值。
• syncfusion_flutter_charts：功能全面，其分段条形图可完美匹配这类多区间BMI样式，支持自定义区间样式、提示框，能便捷添加当前值指示器。
• charts_flutter（谷歌官方维护）：通过配置多数据系列可实现分段效果，适合需要高度自定义的场景。

二、手动实现思路（无需第三方包） #

不想依赖第三方包的话，可通过Flutter原生组件组合实现：

1. 用Row+Container构建分段颜色条，每个区间对应一个带颜色的Container，通过flex属性设置宽度比例匹配BMI数值区间。
2. 在颜色条上方/下方用Text组件标注各等级名称（如偏瘦、正常、偏胖等）。
3. 借助Stack+Positioned放置指示器（比如带箭头的圆圈），根据当前BMI值计算对应水平位置。

示例代码片段：

Stack(
  alignment: Alignment.bottomCenter,
  children: [
    // 分段颜色条
    Row(
      children: [
        Expanded(
          flex: 18, // 对应BMI <18.5的区间比例
          child: Container(height: 40, color: Colors.blue),
        ),
        Expanded(
          flex: 6, // 对应18.5-24.9的区间比例
          child: Container(height: 40, color: Colors.green),
        ),
        Expanded(
          flex: 5, // 对应25-29.9的区间比例
          child: Container(height: 40, color: Colors.yellow),
        ),
        Expanded(
          flex: 10, // 对应≥30的区间比例
          child: Container(height: 40, color: Colors.red),
        ),
      ],
    ),
    // 等级标签
    Padding(
      padding: const EdgeInsets.only(top: 50),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: const [
          Text("偏瘦"),
          Text("正常"),
          Text("偏胖"),
          Text("肥胖"),
        ],
      ),
    ),
    // 当前BMI标记
    Positioned(
      left: calculatePosition(currentBMI), // 自定义计算位置的方法
      bottom: 50,
      child: const Icon(Icons.arrow_drop_down, size: 30, color: Colors.black),
    ),
  ],
)

三、注意事项 #

• 区间比例要和BMI标准数值对应，保证视觉展示的准确性。
• 配色尽量遵循通用健康等级逻辑（如绿色代表正常、红色代表肥胖），提升用户认知效率。
• 适配不同屏幕尺寸时，建议用MediaQuery或LayoutBuilder动态调整组件大小。

内容的提问来源于stack exchange，提问作者taha khamis