flutter睡眠与冥想数据可视化神器：sleep_stage_chart插件全解析

在健康类 App 开发中，睡眠周期分析和冥想数据展示是核心功能模块。一个直观、美观且交互流畅的可视化图表，能极大提升用户对健康数据的理解和使用体验。今天给大家推荐一款专为 Flutter 开发者打造的全能型图表插件------sleep_stage_chart，它不仅能完美呈现睡眠阶段数据，还支持冥想时长可视化，跨平台兼容且高度可定制。

1. 简介

sleep_stage_chart是一款专注于睡眠阶段和冥想数据可视化的 Flutter 插件，借鉴了 Apple Health 应用的优雅设计风格，提供了平滑的过渡效果和丰富的交互能力。该插件支持 Android、iOS 和 Windows 三大平台，能够满足健康类 App 对睡眠周期分析、冥想时长统计等场景的可视化需求。

1.1. 例图

1.2. 核心功能

该插件的功能覆盖了健康数据可视化的核心需求，同时提供了足够的灵活性：

• 📊 双图表支持：同时兼容睡眠阶段图（浅睡/深睡/REM/清醒状态）和冥想时长图
• 🎨 深度定制化：支持颜色、样式、布局、网格线等全维度自定义
• 📱 跨平台兼容：无缝运行于 Android、iOS、Windows 平台
• 🤏 交互体验：支持触摸拖拽指示器，查看不同时段的详细数据
• 🕐 精准时间展示：清晰呈现时间范围、阶段时长，支持自定义时间格式化
• 🎀 样式扩展：支持自定义底部组件、圆角、背景色等外观属性
• 📖 完善文档：提供完整的 API 说明和可直接运行的示例代码

2. 快速集成

在项目的 pubspec.yaml 文件中添加插件依赖：

dependencies:
  sleep_stage_chart: ^1.1.2  # 建议使用最新版本

执行安装命令：

flutter pub get

2.1. 基础使用示例

插件提供了两种核心图表场景：睡眠阶段图和冥想时长图，以下是最简实现示例。

睡眠阶段图

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

class SleepChartDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 构造睡眠数据：包含阶段类型、起止时间、描述信息
    final sleepData = [
      SleepStageDetails(
        model: SleepStageEnum.light,  // 浅睡
        startTime: DateTime(2025, 1, 1, 22, 30),
        endTime: DateTime(2025, 1, 1, 23, 30),
        info: ['浅睡，睡眠质量良好'],
      ),
      SleepStageDetails(
        model: SleepStageEnum.deep,   // 深睡
        startTime: DateTime(2025, 1, 1, 23, 30),
        endTime: DateTime(2025, 1, 2, 1, 0),
        info: ['深睡，身体修复阶段'],
      ),
      SleepStageDetails(
        model: SleepStageEnum.rem,    // REM睡眠（快速眼动）
        startTime: DateTime(2025, 1, 2, 1, 0),
        endTime: DateTime(2025, 1, 2, 2, 15),
        info: ['REM睡眠，大脑活跃'],
      ),
      SleepStageDetails(
        model: SleepStageEnum.awake,  // 清醒
        startTime: DateTime(2025, 1, 2, 6, 0),
        endTime: DateTime(2025, 1, 2, 6, 30),
        info: ['清醒，准备起床'],
      ),
    ];

    return Container(
      height: 300,
      margin: const EdgeInsets.all(16),
      child: SleepStageChart(
        details: sleepData,  // 睡眠数据（必填）
        startTime: DateTime(2025, 1, 1, 22, 30),  // 开始时间（必填）
        endTime: DateTime(2025, 1, 2, 6, 30),     // 结束时间（必填）
        backgroundColor: Colors.white,            // 背景色（必填）
        heightUnitRatio: 1 / 8,                   // 高度比例单位
        onIndicatorMoved: (stage) {               // 指示器移动回调
          print('当前阶段：${stage.model.name}，时长：${stage.duration}分钟');
        },
        bottomChild: const [Text('入睡'), Text('起床')],  // 底部自定义文本
        stageColors: {  // 自定义各阶段颜色
          SleepStageEnum.light: Colors.blue.shade300,
          SleepStageEnum.deep: Colors.blue.shade700,
          SleepStageEnum.rem: Colors.teal.shade400,
          SleepStageEnum.awake: Colors.orange.shade300,
        },
      ),
    );
  }
}

冥想时长图

冥想图表通常需要展示全天或特定时段的冥想分布，可通过统一颜色和时间轴配置实现：

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

class MeditationChartDemo extends StatelessWidget {
  final DateTime dayStart = DateTime(2025, 1, 1);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 300,
      margin: const EdgeInsets.all(16),
      child: SleepStageChart(
        details: [
          SleepStageDetails(
            model: SleepStageEnum.light,
            startTime: dayStart.add(const Duration(minutes: 30)),
            endTime: dayStart.add(const Duration(minutes: 75)),
            info: ['晨间冥想，专注呼吸'],
          ),
          SleepStageDetails(
            model: SleepStageEnum.light,
            startTime: dayStart.add(const Duration(hours: 19)),
            endTime: dayStart.add(const Duration(hours: 20, minutes: 20)),
            info: ['睡前冥想，放松身心'],
          ),
        ],
        startTime: dayStart,
        endTime: dayStart.add(const Duration(days: 1)),
        backgroundColor: Colors.transparent,
        heightUnitRatio: 1 / 8,
        allDayModel: true,  // 开启全天模式
        minuteInterval: 360,  // 时间轴间隔：6小时
        stageColors: const {  // 统一冥想颜色
          SleepStageEnum.light: Color(0xFF43CAC4),
          SleepStageEnum.deep: Color(0xFF43CAC4),
          SleepStageEnum.rem: Color(0xFF43CAC4),
          SleepStageEnum.awake: Color(0xFF43CAC4),
        },
        bottomChild: ['00:00', '06:00', '12:00', '18:00', '00:00']
            .map((time) => Text(time, style: const TextStyle(fontSize: 12)))
            .toList(),
        showVerticalLine: true,  // 显示竖线分隔
        showHorizontalLine: false,  // 隐藏横线
        borderRadius: 12,  // 圆角优化
      ),
    );
  }
}

2.2. 高级定制指南

sleep_stage_chart提供了丰富的定制属性，以下是常见场景的定制方案。

颜色定制

通过 stageColors 属性自定义各睡眠阶段的颜色，支持所有 SleepStageEnum 类型：

stageColors: const {
  SleepStageEnum.light: Color(0xFFE3F2FD),  // 浅睡-淡蓝
  SleepStageEnum.deep: Color(0xFF90CAF9),   // 深睡-中蓝
  SleepStageEnum.rem: Color(0xFF42A5F5),    // REM-深蓝
  SleepStageEnum.awake: Color(0xFFFFE0B2),  // 清醒-淡橙
  SleepStageEnum.notWorn: Color(0xFFF5F5F5),// 未佩戴-灰色
  SleepStageEnum.unknown: Color(0xFFEEEEEE),// 未知-浅灰
},

网格线定制

控制网格线的显示/隐藏和样式：

// 横线样式
horizontalLineStyle: SleepStageChartLineStyle(
  width: 1.0,
  color: Colors.grey.shade200,
  space: 2.0,  // 虚线间隔
),
// 竖线样式
verticalLineStyle: SleepStageChartLineStyle(
  width: 1.0,
  color: Colors.grey.shade200,
),
showHorizontalLine: true,  // 显示横线
showVerticalLine: true,    // 显示竖线
horizontalLineCount: 6,    // 横线数量（分割图表高度）

时间格式化

通过 dateFormatter 自定义时间轴的显示格式：

dateFormatter: (DateTime date) {
  // 自定义格式：小时-分钟（补零）
  return '${date.hour.toString().padLeft(2, '0')}:${date.minute.toString().padLeft(2, '0')}';
},

交互控制

控制指示器的显示和回调：

hasIndicator: true,  // 显示触摸指示器
onIndicatorMoved: (SleepStageDetails stage) {
  // 指示器移动时回调，可用于更新详情面板
  setState(() {
    _currentStage = stage;
    _currentDuration = '${stage.duration}分钟';
    _currentInfo = stage.info.join(' ');
  });
},

3. 核心 API 参考

下面是核心的api属性列举：

SleepStageChart（主组件）

属性名	类型	默认值	描述
details	List	-	核心数据（必填）
startTime	DateTime	-	开始时间（必填）
endTime	DateTime	-	结束时间（必填）
backgroundColor	Color	-	背景色（必填）
stageColors	Map<SleepStageEnum, Color>?	null	阶段颜色映射
heightUnitRatio	double	-	高度比例单位
borderRadius	double	8.0	圆角半径
showVerticalLine	bool	true	是否显示竖线
showHorizontalLine	bool	true	是否显示横线
hasIndicator	bool	true	是否显示触摸指示器
onIndicatorMoved	void Function(SleepStageDetails)?	null	指示器移动回调
allDayModel	bool	false	是否开启全天模式
minuteInterval	int	360	全天模式时间间隔（分钟）
bottomChild	List	[]	底部自定义组件列表
dateFormatter	String Function(DateTime)?	null	时间格式化函数

SleepStageDetails（数据模型）

属性名	类型	描述
model	SleepStageEnum	睡眠/冥想阶段类型
startTime	DateTime	阶段开始时间
endTime	DateTime	阶段结束时间
info	List	阶段描述信息
duration	int	时长（分钟，自动计算）

SleepStageEnum（阶段枚举）

枚举值	描述
light	浅睡/冥想
deep	深睡
rem	REM睡眠
awake	清醒
unknown	未知状态

4. 示例App项目

插件提供了完整的示例项目，可直接克隆源码运行体验：

# 克隆仓库
git clone https://github.com/wp993080086/sleep_stage_chart.git

# 进入示例目录
cd sleep_stage_chart/example

# 安装依赖并运行
flutter pub get
flutter run

示例项目包含了睡眠图表、冥想图表的各种定制场景，可直接参考复用。

5. 总结

sleep_stage_chart 是一款功能全面、高度可定制的 Flutter 健康数据可视化插件，凭借其优雅的设计风格、流畅的交互体验和跨平台兼容性，能够快速满足睡眠和冥想数据的可视化需求。无论是快速集成基础图表，还是深度定制符合 App 风格的可视化效果，该插件都能提供简洁高效的解决方案。

适用场景：

• 睡眠监测类 App：展示深睡、浅睡、REM 睡眠周期分布
• 冥想类 App：统计每日/每周冥想时长和时段分布
• 健康管理 App：整合睡眠与冥想数据的综合可视化
• 智能穿戴设备配套 App：同步设备采集的睡眠数据展示

如果你的项目中需要实现睡眠周期分析或冥想数据展示，不妨试试 sleep_stage_chart，让健康数据可视化开发更高效！

相关链接：

• GitHub仓库

• 中文文档

• pub.dev仓库

---

本次分享就到这儿啦，我是鹏多多，深耕前端的技术创作者，如果您看了觉得有帮助，欢迎评论，关注，点赞，转发，我们下次见~

PS：在本页按F12，在console中输入document.getElementsByClassName('panel-btn')[0].click();有惊喜哦~

往期文章

• flutter图片选择库multi_image_picker_plus和image_picker的对比和使用解析
• 解锁flutter弹窗新姿势：dialog-flutter_smart_dialog插件解读+案例
• flutter-切换状态显示不同组件10种实现方案全解析
• flutter-详解控制组件显示的两种方式Offstage与Visibility
• flutter-使用AnimatedDefaultTextStyle实现文本动画
• flutter-使用SafeArea组件处理各机型的安全距离
• flutter-实现渐变色边框背景以及渐变色文字
• flutter-使用confetti制作炫酷纸屑爆炸粒子动画