基于设备方向的颤振显示小部件 - Dart

在移动设备上，我们可以使用加速度计来检测设备的运动和方向。基于这种技术，我们可以创建一个小部件来显示设备的颤振方向。

实现步骤

1. 导入依赖

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

2. 创建一个 Stateful Widget

class ShakeDetectorWidget extends StatefulWidget {
  const ShakeDetectorWidget({Key key}) : super(key: key);

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

class _ShakeDetectorWidgetState extends State<ShakeDetectorWidget> {
  ...
}

3. 初始化加速度计

我们可以通过 Sensors 包初始化加速度计。

AccelerometerEvent event;
StreamSubscription accelSub;

@override
void initState() {
  super.initState();
  accelSub = accelerometerEvents.listen((AccelerometerEvent event) {
    setState(() {
      this.event = event;
    });
  });
}

4. 检测颤振

我们可以使用加速度计检测颤振。如果设备在 X、Y 和 Z 方向上的加速度大于某个阈值，则视为颤振。

final double shakeThreshold = 10;
bool isShaking = false;

void detectShake() {
  if (event != null) {
    double x = event.x;
    double y = event.y;
    double z = event.z;

    double acceleration = sqrt(x * x + y * y + z * z);

    if (acceleration > shakeThreshold) {
      setState(() {
        isShaking = true;
      });
    } else {
      setState(() {
        isShaking = false;
      });
    }
  }
}

5. 构建 UI

@override
Widget build(BuildContext context) {
  detectShake();

  return Container(
    child: Center(
      child: Text(
        isShaking ? "Shaking!" : "Not shaking",
        style: TextStyle(fontSize: 30),
      ),
    ),
  );
}

完整代码

import 'package:flutter/material.dart';
import 'package:sensors/sensors.dart';
import 'dart:async';
import 'dart:math';

class ShakeDetectorWidget extends StatefulWidget {
  const ShakeDetectorWidget({Key key}) : super(key: key);

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

class _ShakeDetectorWidgetState extends State<ShakeDetectorWidget> {
  AccelerometerEvent event;
  StreamSubscription accelSub;

  final double shakeThreshold = 10;
  bool isShaking = false;

  void detectShake() {
    if (event != null) {
      double x = event.x;
      double y = event.y;
      double z = event.z;

      double acceleration = sqrt(x * x + y * y + z * z);

      if (acceleration > shakeThreshold) {
        setState(() {
          isShaking = true;
        });
      } else {
        setState(() {
          isShaking = false;
        });
      }
    }
  }

  @override
  void initState() {
    super.initState();
    accelSub = accelerometerEvents.listen((AccelerometerEvent event) {
      setState(() {
        this.event = event;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    detectShake();

    return Container(
      child: Center(
        child: Text(
          isShaking ? "Shaking!" : "Not shaking",
          style: TextStyle(fontSize: 30),
        ),
      ),
    );
  }

  @override
  void dispose() {
    accelSub.cancel();
    super.dispose();
  }
}