Flutter UI组件库插件flutter_smkit_ui的使用

flutter_smkit_ui 是一个用于 Flutter 应用程序的 UI 组件库插件。本文将通过一个完整的示例来展示如何在 Flutter 应用中使用 flutter_smkit_ui 插件。

开始使用

1. 添加依赖

首先，在你的 pubspec.yaml 文件中添加 flutter_smkit_ui 作为依赖项：

dependencies:
  flutter:
    sdk: flutter
  flutter_smkit_ui: ^1.0.0 # 确保使用最新版本

然后运行 flutter pub get 来安装依赖项。

2. 初始化插件

在应用启动时，需要初始化插件并进行配置。以下是一个示例代码：

import 'dart:async';
import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_smkit_ui/flutter_smkit_ui.dart';
import 'package:flutter_smkit_ui/models/sm_workout.dart';
import 'package:flutter_smkit_ui/models/smkit_ui_handlers.dart';
import 'package:path_provider/path_provider.dart';

import 'WorkoutResultScreen.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> {
  final _smkitUiFlutterPlugin = SmkitUiFlutterPlugin();
  String apiPublicKey = "YOUR-AUTH-KEY"; // 替换为你的 API 公钥
  bool isConfigured = false;
  String assessmentId = '';
  ValueNotifier<String> workoutResultNotifier = ValueNotifier("");
  final GlobalKey<NavigatorState> _navigatorKey = GlobalKey();

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

  void _handleWorkoutResult() {
    if (workoutResultNotifier.value.isNotEmpty) {
      WidgetsBinding.instance.addPostFrameCallback((_) {
        Future.delayed(Duration(seconds: 1), () {
          _navigateToWorkoutResult();
        });
      });
    }
  }

  void _navigateToWorkoutResult() {
    _navigatorKey.currentState?.push(
      MaterialPageRoute(
        builder: (context) => WorkoutResultScreen(
          workoutResult: workoutResultNotifier.value,
        ),
      ),
    );
  }

  // 平台消息是异步的，因此我们在此方法中进行初始化。
  Future<void> initPlatformState() async {
    // 如果小部件从树中被移除，而异步平台消息正在飞行，则我们应该丢弃回复而不是调用 setState 更新我们的非存在的外观。
    if (!mounted) return;

    _smkitUiFlutterPlugin.configure(key: apiPublicKey).then(
          (result) => {
            setState(() {
              isConfigured = result == true;
            })
          },
        );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorKey: _navigatorKey,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              isConfigured
                  ? Column(
                      children: [
                        ElevatedButton(
                          onPressed: () {
                            _smkitUiFlutterPlugin.startAssessment(
                              type: AssessmentTypes.fitness,
                              onHandle: (status) {
                                debugPrint(
                                    '_startWorkout status: ${status.operation} ${status.data}');
                                if (status.operation ==
                                        SMKitOperation.exerciseData &amp;&amp;
                                    status.data != null) {
                                  final workoutResult = status.data;
                                  debugPrint(
                                      '_startWorkout workoutResult: $workoutResult');
                                  if (workoutResult == null) {
                                    return;
                                  }
                                }
                              },
                            );
                          },
                          child: const Text('健身评估'),
                        ),
                        ElevatedButton(
                          onPressed: () {
                            _smkitUiFlutterPlugin.startAssessment(
                              type: AssessmentTypes.body360,
                              onHandle: (status) {
                                debugPrint(
                                    '_startWorkout status: ${status.operation} ${status.data}');
                                if (status.operation ==
                                        SMKitOperation.exerciseData &amp;&amp;
                                    status.data != null) {
                                  final workoutResult =
                                      status.data as SMKitAssessmentSummaryData;
                                  debugPrint(
                                      '_startWorkout body360: ${workoutResult.toString()}');
                                  if (workoutResult == null) {
                                    return;
                                  }
                                }
                              },
                            );
                          },
                          child: const Text('全身360度评估'),
                        ),
                        ElevatedButton(
                          onPressed: () {
                            startCustomaizedWorkout();
                          },
                          child: const Text('自定义训练'),
                        ),
                        ElevatedButton(
                          onPressed: () {
                            startCustomizedAssessment();
                          },
                          child: const Text('自定义评估'),
                        ),
                        Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: TextField(
                            onChanged: (value) {
                              setState(() {
                                assessmentId = value;
                              });
                            },
                            decoration: const InputDecoration(
                              labelText: '评估ID',
                            ),
                          ),
                        ),
                        ElevatedButton(
                          onPressed: () {
                            // 处理自定义评估的逻辑，包含评估ID
                            debugPrint('Custom Assessment ID: $assessmentId');

                            _smkitUiFlutterPlugin.startAssessment(
                              type: AssessmentTypes.custom,
                              assessmentID:
                                  assessmentId == "" ? null : assessmentId,
                              onHandle: (status) {
                                debugPrint(
                                    '_startWorkout status: ${status.operation} ${status.data}');
                                if (status.operation ==
                                        SMKitOperation.exerciseData &amp;&amp;
                                    status.data != null) {
                                  final workoutResult = status.data;
                                  debugPrint(
                                      '_startWorkout workoutResult: $workoutResult');
                                  if (workoutResult == null) {
                                    return;
                                  }
                                }
                              },
                            );
                          },
                          child: const Text('自定义评估'),
                        ),
                      ],
                    )
                  : const Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Text("正在配置..."),
                        CircularProgressIndicator()
                      ],
                    ),
            ],
          ),
        ),
      ),
    );
  }

  void startCustomaizedWorkout() async {
    var workout = await getDemoWorkout();

    _smkitUiFlutterPlugin.startCustomaizedWorkout(
      workout: workout,
      onHandle: (status) {
        debugPrint('_startWorkout status: ${status.operation} ${status.data}');
        if (status.operation == SMKitOperation.exerciseData &amp;&amp;
            status.data != null) {
          final workoutResult = status.data as SMCustomWorkoutData;
          debugPrint(
              '_startWorkout assessmentSummaryData: ${workoutResult.toString()}');

          if (workoutResult == null) {
            return;
          }
        }
      },
    );
  }

  void startCustomizedAssessment() async {
    var assessment = await getDemoAssessment();
    _smkitUiFlutterPlugin.setSessionLanguage(language: SMKitLanguage.hebrew);
    _smkitUiFlutterPlugin.setCounterPreferences(
        counterPreferences: SMKitCounterPreferences.perfectOnly);
    _smkitUiFlutterPlugin.setEndExercisePreferences(
        endExercisePrefernces: SMKitEndExercisePreferences.targetBased);
    _smkitUiFlutterPlugin.startCustomizedAssessment(
        assessment: assessment,
        onHandle: (status) {
          debugPrint(
              '_startWorkout status: ${status.operation} ${status.data}');
          if (status.operation == SMKitOperation.assessmentSummaryData &amp;&amp;
              status.data != null) {
            final workoutResult = status.data as SMKitAssessmentSummaryData;
            debugPrint(
                '_startWorkout assessmentSummaryData: ${workoutResult.toString()}');
            // 导航到带有训练结果的新屏幕
            setState(() {
              workoutResultNotifier.value = workoutResult.toString();
            });
          }
        });
  }

  Future<String> getFileUrl(String fileName) async {
    final byteData = await rootBundle.load(fileName);
    final file = File('${(await getTemporaryDirectory()).path}/$fileName');
    await file.writeAsBytes(byteData.buffer
        .asUint8List(byteData.offsetInBytes, byteData.lengthInBytes));
    return file.path;
  }

  Future<SMKitWorkout> getDemoWorkout() async {
    var introURL = await getFileUrl("customWorkoutIntro.mp3");
    var highKneesIntroURL =
        "https://github.com/sency-ai/smkit-ui-flutter-demo/raw/main/HighKneesSound.mp3";

    List<SMKitExercise> exercises = [
      SMKitExercise(
        prettyName: "HighKnees",
        exerciseIntro: highKneesIntroURL,
        totalSeconds: 30,
        videoInstruction:
            "https://sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4",
        uiElements: [SMKitUIElement.timer, SMKitUIElement.repsCounter],
        detector: "HighKnees",
        exerciseClosure: null,
      ),
      SMKitExercise(
        prettyName: "Plank",
        totalSeconds: 30,
        exerciseIntro: null,
        videoInstruction: "PlankHighStaticInstructionVideo",
        uiElements: [SMKitUIElement.gaugeOfMotion, SMKitUIElement.timer],
        detector: "PlankHighStatic",
        exerciseClosure: "",
      ),
    ];

    return SMKitWorkout(
      id: "50",
      name: "demo workout",
      workoutIntro: introURL,
      soundTrack: null,
      exercises: exercises,
      getInFrame: null,
      bodycalFinished: null,
      workoutClosure: null,
    );
  }

  Future<SMKitWorkout> getDemoAssessment() async {
    var introURL = await getFileUrl("customWorkoutIntro.mp3");
    var highKneesIntroURL =
        "https://github.com/sency-ai/smkit-ui-flutter-demo/raw/main/HighKneesSound.mp3";

    List<SMKitExercise> exercises = [
      SMKitExercise(
        prettyName: "HighKnees",
        exerciseIntro: highKneesIntroURL,
        totalSeconds: 30,
        videoInstruction:
            "https://sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4",
        uiElements: [SMKitUIElement.timer, SMKitUIElement.repsCounter],
        detector: "HighKnees",
        exerciseClosure: null,
        scoringParams: ScoringParams(
          type: ScoringType.reps,
          scoreFactor: 0.5,
          targetReps: 30,
          targetTime: 0,
          targetRom: "",
        ),
      ),
      SMKitExercise(
        prettyName: "SquatRegularOverheadStatic",
        totalSeconds: 30,
        exerciseIntro: null,
        videoInstruction: "SquatRegularOverheadStaticInstructionVideo",
        uiElements: [SMKitUIElement.gaugeOfMotion, SMKitUIElement.timer],
        detector: "SquatRegularOverheadStatic",
        exerciseClosure: "",
        summaryTitle: "Steve",
        summarySubTitle: "JEEF",
        summaryMainMetricTitle: "CLOE",
        summaryMainMetricSubTitle: "MAKRON",
        scoringParams: ScoringParams(
          type: ScoringType.time,
          scoreFactor: 0.5,
          targetTime: 20,
          targetReps: 0,
          targetRom: "",
        ),
      ),
    ];

    return SMKitWorkout(
      id: "0",
      name: "demo Assessment",
      workoutIntro: introURL,
      soundTrack: null,
      exercises: exercises,
      getInFrame: introURL,
      bodycalFinished: highKneesIntroURL,
      workoutClosure: null,
    );
  }
}

更多关于Flutter UI组件库插件flutter_smkit_ui的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

htzhanglong 1楼

更多关于Flutter UI组件库插件flutter_smkit_ui的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

flutter_smkit_ui 是一个 Flutter UI 组件库插件，提供了一系列预定义的 UI 组件，帮助开发者快速构建美观且功能丰富的应用程序。以下是如何使用 flutter_smkit_ui 的基本步骤：

1. 安装插件

首先，你需要在 pubspec.yaml 文件中添加 flutter_smkit_ui 插件依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_smkit_ui: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装依赖。

2. 导入插件

在你的 Dart 文件中导入 flutter_smkit_ui：

import 'package:flutter_smkit_ui/flutter_smkit_ui.dart';

3. 使用组件

flutter_smkit_ui 提供了多种 UI 组件，你可以直接在项目中使用这些组件。以下是一些常见组件的使用示例：

按钮组件

SmkitButton(
  onPressed: () {
    print('Button Pressed');
  },
  text: 'Click Me',
  color: Colors.blue,
)

文本输入框

SmkitTextField(
  hintText: 'Enter your name',
  onChanged: (value) {
    print('Text changed: $value');
  },
)

加载指示器

SmkitLoadingIndicator(
  size: 50.0,
  color: Colors.red,
)

卡片组件

SmkitCard(
  child: Column(
    children: [
      Text('Card Title'),
      Text('This is a card content.'),
    ],
  ),
)

4. 自定义主题

flutter_smkit_ui 允许你自定义主题以适应你的应用风格。你可以通过设置 SmkitTheme 来定义全局主题：

void main() {
  runApp(
    MaterialApp(
      theme: SmkitTheme(
        primaryColor: Colors.blue,
        accentColor: Colors.orange,
        textTheme: TextTheme(
          bodyText1: TextStyle(fontSize: 16.0),
          headline1: TextStyle(fontSize: 24.0, fontWeight: FontWeight.bold),
        ),
      ),
      home: MyApp(),
    ),
  );
}

5. 其他组件

flutter_smkit_ui 还提供了其他多种组件，如对话框、列表项、标签等。你可以查阅官方文档或源代码以获取更多组件的使用方法和示例。

6. 示例代码

以下是一个简单的示例，展示了如何使用 flutter_smkit_ui 中的一些组件：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Smkit UI Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Smkit UI Demo'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              SmkitButton(
                onPressed: () {
                  print('Button Pressed');
                },
                text: 'Click Me',
                color: Colors.blue,
              ),
              SizedBox(height: 20),
              SmkitTextField(
                hintText: 'Enter your name',
                onChanged: (value) {
                  print('Text changed: $value');
                },
              ),
              SizedBox(height: 20),
              SmkitLoadingIndicator(
                size: 50.0,
                color: Colors.red,
              ),
            ],
          ),
        ),
      ),
    );
  }
}