Flutter倾斜动画插件tilt的使用

Flutter倾斜动画插件tilt的使用

插件介绍

flutter_tilt 是一个用于获取 Android 和 iOS 设备在 X 轴和 Y 轴上的倾斜角度的插件。 它利用陀螺仪和加速度计传感器的数据来 估计设备当前的滚转 (roll) 和俯仰 (pitch) 角度。 这两个数据源结合在一起，以抵消它们各自的缺点（加速度计的噪声和陀螺仪的漂移），同时结合它们的优点（加速度计相对稳定的测量和陀螺仪的精确度）。

请注意，这意味着不应将任何单个 Tilt 值视为设备绝对真实的倾斜角度：每个发出的值都包含一定的误差比例。

使用方法

DeviceTilt 提供了一个 Stream<Tilt>，该流以给定的采样率更新。

StreamBuilder<Tilt>(
  stream: DeviceTilt(
    samplingRateMs: 20,
    initialTilt: const Tilt(0, 0),
    filterGain: 0.1,
  ).stream,
  builder: (context, snapshot) {
    if (snapshot.hasData && snapshot.data != null) {
      return Text(snapshot.data!.toString());
    }
    return const CircularProgressIndicator();
  },
);

• samplingRateMs：确定流以多长时间更新一次。建议保持这个值相对较小（即频繁更新），否则互补滤波器将无法准确纠正倾斜值。
• initialTilt：可以提供，如果在订阅流时知道设备的确切倾斜角度。即使错误地假设 (0, ) 作为初始倾斜角度，这也会随着时间推移而得到修正，因为加速度计数据。
• filterGain：确定最终结果中来自陀螺仪和加速度计数据的比例。如果设置为 0，最终估计仅基于加速度计数据；而 1 会意味着仅由陀螺仪数据决定倾斜。这两种极端都不推荐。

关于 yaw

理论上，可以通过补充陀螺仪与磁力计数据来计算设备的偏航 (yaw) 角度。 实际上，要获得有意义的磁力计值需要大量的校准（以绕过设备内部的磁性特性），并且即使这样也不太可靠，因为地球磁场远弱于传感器周围的磁场（例如其他电子设备）。

Android 和 iOS SDK 都提供了现成的指南信息关于罗盘方向。但是，访问这些数据需要获取位置权限，这似乎超出了简单包的范围，该包用于计算倾斜。如果您仍然需要 yaw 值，请查看 flutter_compass 包。

示例代码

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: Center(
          child: StreamBuilder<Tilt>(
            stream: DeviceTilt(
              samplingRateMs: 20,
              initialTilt: const Tilt(0, 0),
              filterGain: 0.1,
            ).stream,
            builder: (context, snapshot) {
              if (snapshot.hasData && snapshot.data != null) {
                return Text(snapshot.data!.toString());
              }
              return const CircularProgressIndicator();
            },
          ),
        ),
      ),
    );
  }
}