Flutter血糖管理插件flutter_cgm的使用

Flutter实现的<cgm>库。

注意： 此库仍在开发中，尚未支持所有CGM功能。可能存在错误和未完成的功能。

功能

• 在画布上绘制解析后的CGM文件命令，或者在小部件中显示它们。

使用方法

绘制到画布

要将命令绘制到画布上：

final cgm = CGM.fromFile(file);

// 创建一个画布来绘制CGM命令
// 参数canvas是Flutter Canvas类的一个实例
final cgmCanvas = FlutterCGMCanvas(canvas);
final display = CGMDisplay(cgm);

// 将CGM命令绘制到画布上
display.paint(cgmCanvas);

在状态小部件中显示CGM文件

以下是一个完整的示例，展示如何在状态小部件中显示CGM文件。

class ExampleWidget extends StatefulWidget {
  [@override](/user/override)
  _ExampleWidgetState createState() => _ExampleWidgetState();
}

class _ExampleWidgetState extends State<ExampleWidget> {
  late final CGM cgm;

  [@override](/user/override)
  void initState() {
    super.initState();
    final file = File('path/to/file.cgm');
    cgm = CGM.fromFile(file);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return CGMWidget(
      cgm: cgm,
    );
  }
}

示例代码

以下是一个完整的示例，展示如何在Flutter应用中使用flutter_cgm插件。

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

void main() {
  WidgetsFlutterBinding.ensureInitialized();

  runApp(const ExampleApp());
}

/// 要在页面视图中显示的CGM名称列表。
const List<String> _cgmNames = ['fuel_pump', 'F421D014', 'F421D034', 'piston', 'engine', 'circuit_1', 'circuit_2'];

class ExampleApp extends StatefulWidget {
  const ExampleApp({super.key});

  [@override](/user/override)
  State<ExampleApp> createState() => _ExampleAppState();
}

class _ExampleAppState extends State<ExampleApp> {
  late List<CGM> cgms;
  late PageController _pageController;
  int _currentPage = 0;
  bool rasterize = true;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        extendBodyBehindAppBar: true,
        appBar: AppBar(
          backgroundColor: Colors.transparent,
          notificationPredicate: (notification) => false,
          title: const Text('CGM Example'),
        ),
        body: Stack(
          alignment: Alignment.center,
          children: [
            PageView(
              controller: _pageController,
              onPageChanged: (int page) => setState(() => _currentPage = page),
              children: cgms.map((CGM cgm) => _buildCGMWidget(context, cgm)).toList(),
            ),
            Positioned(
              bottom: 10,
              child: _buildButtons(context),
            ),
            Positioned(
              right: 0,
              child: Container(
                width: 300,
                height: MediaQuery.sizeOf(context).height,
                clipBehavior: Clip.antiAlias,
                decoration: BoxDecoration(
                  color: Theme.of(context).colorScheme.surfaceContainerLowest,
                  borderRadius: const BorderRadius.horizontal(left: Radius.circular(24)),
                  boxShadow: const [BoxShadow(color: Colors.black12, blurRadius: 10)],
                ),
                // 包裹在Material小部件中以获取ExpansionTile的墨水响应。
                child: Material(
                  color: Colors.transparent,
                  child: _buildInspector(context),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  [@override](/user/override)
  void initState() {
    super.initState();

    // 加载所有的CGM文件
    cgms = _cgmNames.map((String name) => CGM.fromPath('assets/$name.cgm')).toList();
    _pageController = PageController();
  }

  // 构建按钮组
  Widget _buildButtons(BuildContext context) {
    const easingDuration = Duration(milliseconds: 300);
    const easingCurve = Curves.easeInOut;

    return Row(
      children: [
        IconButton(
          icon: const Icon(Icons.arrow_back_ios),
          onPressed: () => _pageController.previousPage(duration: easingDuration, curve: easingCurve),
        ),
        Container(
          margin: const EdgeInsets.symmetric(horizontal: 10),
          padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
          decoration: BoxDecoration(
            color: Theme.of(context).colorScheme.surfaceContainerLowest,
            borderRadius: BorderRadius.circular(20),
            boxShadow: const [BoxShadow(color: Colors.black12, blurRadius: 10)],
          ),
          child: Row(
            children: [
              const Text('Rasterize', style: TextStyle(fontSize: 16)),
              const SizedBox(width: 10),
              Switch(
                value: rasterize,
                onChanged: (bool value) => setState(() => rasterize = value),
              ),
            ],
          ),
        ),
        IconButton(
          icon: const Icon(Icons.arrow_forward_ios),
          onPressed: () => _pageController.nextPage(duration: easingDuration, curve: easingCurve),
        ),
      ],
    );
  }

  // 构建交互式查看器
  InteractiveViewer _buildCGMWidget(BuildContext context, CGM cgm) {
    return InteractiveViewer(
      child: Center(
        child: Container(
          clipBehavior: Clip.antiAlias,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(14),
            boxShadow: const [BoxShadow(color: Colors.black12, blurRadius: 10)],
          ),
          child: CGMWidget(
            cgm: cgm,
            width: 600,
            rasterize: rasterize,
            color: Theme.of(context).colorScheme.surfaceContainerLowest,
            blendMode: BlendMode.darken,
          ),
        ),
      ),
    );
  }

  // 构建检查器
  Widget _buildInspector(BuildContext context) {
    return ListView(
      padding: const EdgeInsets.only(top: 10),
      children: [
        const Center(child: Text('Inspector', style: TextStyle(fontSize: 20))),
        const SizedBox(height: 20),
        ...cgms[_currentPage].commands.map(
              (command) => ExpansionTile(
                title: Text(command.runtimeType.toString()),
                dense: true,
                childrenPadding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
                children: [
                  Text(
                    command.toString(),
                    style: const TextStyle(fontSize: 12),
                  ),
                ],
              ),
            )
      ],
    );
  }
}