Flutter血糖管理插件flutter_cgm的使用
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),
),
],
),
)
],
);
}
}更多关于Flutter血糖管理插件flutter_cgm的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
