Flutter智能手表界面插件flutter_watch_face的使用

flutter_watch_face 是一个Flutter插件，允许你通过ClockKit库和CLKWatchFaceLibrary类为iOS设备添加自定义表盘。该插件仅适用于iOS，并且要求最低iOS版本为14.0或更高。

功能

• 轻松将自定义表盘集成到你的Flutter应用中，用于iOS设备。
• 无缝与ClockKit库交互，以在Apple Watch上显示表盘。

安装

要在你的Flutter项目中使用flutter_watch_face，请按照以下步骤操作：

1. 在pubspec.yaml文件中添加以下依赖项：

   dependencies:
     flutter_watch_face: ^0.0.1
   

2. 运行flutter pub get以获取包。

使用方法

在Dart代码中导入插件：

import 'package:flutter_watch_face/flutter_watch_face.dart';

添加表盘

要向iOS设备添加表盘，可以使用以下代码：

final _flutterWatchFacePlugin = FlutterWatchFace();
_flutterWatchFacePlugin.addWatchFace(file.path);

确保在运行此代码时，设备正在运行iOS 14.0或更高版本。

示例代码

以下是一个完整的示例，展示如何使用flutter_watch_face插件：

示例代码（example/lib/main.dart）

import 'package:flutter/material.dart';
import 'dart:async';
import 'dart:io';
import 'package:flutter/services.dart';
import 'package:path_provider/path_provider.dart';

import 'package:flutter_watch_face/flutter_watch_face.dart';

void main() {
  runApp(const MyApp());
}

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _platformVersion = 'Unknown';
  final _flutterWatchFacePlugin = FlutterWatchFace();

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

  // 平台消息是异步的，因此我们在异步方法中初始化
  Future<void> initPlatformState() async {
    String platformVersion;
    // 平台消息可能会失败，因此我们使用try/catch处理PlatformException
    // 我们还处理消息可能返回null的情况
    try {
      platformVersion =
          await _flutterWatchFacePlugin.getPlatformVersion() ?? 'Unknown platform version';
    } on PlatformException {
      platformVersion = 'Failed to get platform version.';
    }

    // 如果小部件从树中被移除，而异步平台消息仍在进行中，则我们需要丢弃回复而不是调用setState
    if (!mounted) return;

    setState(() {
      _platformVersion = platformVersion;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('插件示例应用'),
        ),
        body: Center(
          child: TextButton(
            child: const Text('添加表盘'),
            onPressed: () async {
              try {
                // 你可以从任何地方获取数据，在此示例中，我从assets中获取
                final ByteData kimi = await rootBundle.load("assets/Astronomy.watchface");
                final Uint8List bytes = kimi.buffer.asUint8List();

                final Directory tempDir = await getTemporaryDirectory();
                final String tempFilePath = '${tempDir.path}/${"Astronomy.watchface".split('/').last}';

                final File tempFile = File(tempFilePath);
                await tempFile.writeAsBytes(bytes, flush: true);

                // 将文件路径传递给addWatchFace函数
                _flutterWatchFacePlugin.addWatchFace(tempFile.path);
              } catch (e) {
                print('发生错误: $e');
              }
            },
          ),
        ),
      ),
    );
  }
}