Flutter Fitbit数据集成插件fitbitter的使用

发布于 1周前 作者 caililin 来自 Flutter

Flutter Fitbit数据集成插件fitbitter的使用

fitbitter

fitbitter-logo

fitbitter是一个Flutter包，旨在简化与Fitbit API交互的过程。

开始使用

安装fitbitter

要在项目中安装fitbitter，请在pubspec.yaml文件中的dependencies部分添加以下内容：

dependencies:
  fitbitter: ^latest_version # 请替换为最新版本号

Android平台额外配置

修改AndroidManifest.xml

为了使flutter_web_auth正常工作，您需要在android/app/src/main/AndroidManifest.xml文件中添加如下代码片段：

<activity android:name="com.linusu.flutter_web_auth.CallbackActivity"
    android:exported="true">
  <intent-filter android:label="flutter_web_auth">
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="CALLBACK_SCHEME" /> <!-- 替换为您的回调scheme -->
  </intent-filter>
</activity>

将CALLBACK_SCHEME替换为您自己的回调scheme（在下面的测试示例中我们将使用example）。

提升最低Android SDK版本

由于flutter_secure_storage要求最低Android SDK版本为18，因此需要调整默认最小SDK版本。打开android/app/build.gradle文件，找到并修改如下代码：

defaultConfig {
    ...
    minSdkVersion 18 // 或者更高版本
    ...
}
浏览器需求

确保您的模拟器或物理设备使用Chrome、Opera或Firefox作为默认浏览器。

Web平台额外配置

对于Web平台，创建一个HTML文件用于处理回调URL，并通过JavaScript的postMessage()方法将其发送给应用程序。在项目的./web目录下创建名为auth.html的HTML文件，内容如下：

<!DOCTYPE html>
<title>Authentication complete</title>
<p>Authentication is complete. If this does not happen automatically, please close the window.
<script>
  window.opener.postMessage({
    'flutter-web-auth': window.location.href
  }, window.location.origin);
  window.close();
</script>

重定向URL必须与应用运行的URL相同（包括协议、主机和端口），并且路径应指向创建的HTML文件，如/auth.html。注意，callbackUrlScheme参数在authenticate()方法中不起作用，所以可以为原生平台使用相同的scheme。

测试fitbitter

完成上述步骤后，我们可以通过以下示例来测试fitbitter的功能：获取昨天的步数。

注册应用

首先，在Fitbit开发者门户注册您的应用以获得OAuth 2.0 Client ID和Client Secret。您可以根据提示填写相关信息。

应用认证

调用FitbitConnector.authorize()方法进行应用授权：

import 'package:fitbitter/fitbitter.dart';

// ...

FitbitCredentials? fitbitCredentials = await FitbitConnector.authorize(
  clientID: Strings.fitbitClientID,
  clientSecret: Strings.fitbitClientSecret,
  redirectUri: Strings.fitbitRedirectUri,
  callbackUrlScheme: Strings.fitbitCallbackScheme,
);

这将打开一个网页视图，用户可以在其中输入其Fitbit凭据并登录。登录成功后，页面会关闭，并返回包含用户信息及令牌的FitbitCredentials实例。

获取步数数据

接下来，实例化一个FitbitActivityTimeseriesDataManager对象，并调用其fetch方法获取昨天的步数数据：

final fitbitActivityTimeseriesDataManager = FitbitActivityTimeseriesDataManager(
  clientID: '<OAuth 2.0 Client ID>',
  clientSecret: '<Client Secret>',
  type: 'steps',
);

final stepsData = await fitbitActivityTimeseriesDataManager.fetch(
  FitbitActivityTimeseriesAPIURL.dayWithResource(
    date: DateTime.now().subtract(Duration(days: 1)),
    userID: fitbitAccount.id,
    resource: fitbitActivityTimeseriesDataManager.type,
    fitbitCredentials: fitbitCredentials!,
  ),
) as List<FitbitActivityTimeseriesData>;

以上就是使用fitbitter插件连接Fitbit API的基本流程。更多详细信息可以参考官方文档和指南。

示例代码

这里提供了一个完整的示例demo，它展示了如何在一个简单的Flutter应用中使用fitbitter插件：

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Fitbitter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  static const String route = '/home';

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  String _stepCount = 'Loading...';

  Future<void> _getStepCount() async {
    try {
      final fitbitCredentials = await FitbitConnector.authorize(
        clientID: 'YOUR_CLIENT_ID',
        clientSecret: 'YOUR_CLIENT_SECRET',
        redirectUri: 'YOUR_REDIRECT_URI',
        callbackUrlScheme: 'YOUR_CALLBACK_SCHEME',
      );

      final fitbitActivityTimeseriesDataManager =
          FitbitActivityTimeseriesDataManager(
        clientID: 'YOUR_CLIENT_ID',
        clientSecret: 'YOUR_CLIENT_SECRET',
        type: 'steps',
      );

      final stepsData = await fitbitActivityTimeseriesDataManager.fetch(
        FitbitActivityTimeseriesAPIURL.dayWithResource(
          date: DateTime.now().subtract(Duration(days: 1)),
          userID: fitbitCredentials!.userID,
          resource: fitbitActivityTimeseriesDataManager.type,
          fitbitCredentials: fitbitCredentials,
        ),
      ) as List<FitbitActivityTimeseriesData>;

      setState(() {
        _stepCount = stepsData.isNotEmpty
            ? stepsData.first.value.toString()
            : 'No data available';
      });
    } catch (e) {
      print('Error fetching step count: $e');
      setState(() {
        _stepCount = 'Error fetching data';
      });
    }
  }

  @override
  void initState() {
    super.initState();
    _getStepCount();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Fitbitter Demo'),
      ),
      body: Center(
        child: Text('Yesterday\'s Step Count: $_stepCount'),
      ),
    );
  }
}

请记得将代码中的占位符（如YOUR_CLIENT_ID）替换为您从Fitbit开发者门户获取的实际值。此代码将在启动时尝试获取昨天的步数，并显示在屏幕上。


更多关于Flutter Fitbit数据集成插件fitbitter的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter Fitbit数据集成插件fitbitter的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何在Flutter应用中使用fitbitter插件来集成Fitbit数据的代码案例。fitbitter是一个Dart包，用于与Fitbit API进行交互。

首先，确保你已经在pubspec.yaml文件中添加了fitbitter依赖：

dependencies:
  flutter:
    sdk: flutter
  fitbitter: ^x.y.z  # 替换为最新版本号

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

接下来，你需要配置Fitbit API客户端。在Fitbit开发者门户创建一个应用，并获取Client ID和Client Secret。你还需要一个重定向URI，这通常是你应用的回调URL。

下面是一个简单的Flutter应用示例，演示如何使用fitbitter来获取用户的活动数据：

import 'package:flutter/material.dart';
import 'package:fitbitter/fitbitter.dart';
import 'dart:convert';
import 'package:http/http.dart' as http;

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Fitbit Data Integration',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: FitbitDataScreen(),
    );
  }
}

class FitbitDataScreen extends StatefulWidget {
  @override
  _FitbitDataScreenState createState() => _FitbitDataScreenState();
}

class _FitbitDataScreenState extends State<FitbitDataScreen> {
  final String clientId = 'YOUR_CLIENT_ID';
  final String clientSecret = 'YOUR_CLIENT_SECRET';
  String accessToken;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Fitbit Data Integration'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () async {
                String authUrl = FitbitOAuth2.getAuthorizationUrl(
                  clientId: clientId,
                  redirectUri: Uri.parse('YOUR_REDIRECT_URI'),
                  responseType: 'code',
                  scope: ['activity', 'profile'],
                );
                
                // 这里你需要手动打开authUrl让用户授权，然后获取code
                // 假设用户授权后，你获取到了code，并存储在code变量中
                String code = 'CODE_OBTAINED_FROM_REDIRECT_URI';

                var response = await http.post(
                  Uri.parse('https://api.fitbit.com/oauth2/token'),
                  headers: <String, String>{
                    'Content-Type': 'application/x-www-form-urlencoded',
                  },
                  body: Uri.encodeFull(
                    'grant_type=authorization_code&code=$code&client_id=$clientId&client_secret=$clientSecret&redirect_uri=YOUR_REDIRECT_URI',
                  ),
                );

                var data = jsonDecode(response.body);
                setState(() {
                  accessToken = data['access_token'];
                });

                // 使用获取到的access_token调用Fitbit API
                if (accessToken != null) {
                  _fetchActivityData();
                }
              },
              child: Text('Authorize Fitbit'),
            ),
            if (accessToken != null)
              Text('Access Token: $accessToken'),
          ],
        ),
      ),
    );
  }

  Future<void> _fetchActivityData() async {
    var client = FitbitClient(accessToken: accessToken!);
    var activities = await client.getActivityList(
      date: 'today',
    );

    print('Activities: $activities');
    // 在这里处理获取到的活动数据
  }
}

注意事项：

  1. 手动授权：用户需要在浏览器中打开authUrl并进行授权。授权成功后，Fitbit会重定向到你指定的redirectUri并附带一个code参数。你需要捕获这个code。在实际应用中，这通常通过设置一个Web服务器来完成，但在这个示例中，我们假设你已经手动获取了code。

  2. 错误处理：代码中没有包含错误处理逻辑。在生产环境中，你应该添加适当的错误处理，例如处理HTTP请求失败、JSON解析错误等。

  3. 安全性：不要将Client ID和Client Secret硬编码到客户端应用中。考虑使用环境变量或安全的存储机制来管理这些敏感信息。

  4. Fitbit API限制：Fitbit API有速率限制，确保你的应用遵守这些限制。

这个示例展示了如何使用fitbitter包进行基本的Fitbit数据集成。根据你的需求，你可能需要扩展这个示例来处理更多类型的Fitbit数据。

回到顶部