Flutter 實(shí)現(xiàn)微信搖一搖的功能 Flutter 加速度感應(yīng)
2021-07-27 17:29:31

1 前言

傳感器是一種感應(yīng)檢測(cè)裝置, 目前已經(jīng)廣泛應(yīng)用于智能手機(jī)上，包括 Android 、iOS 兩個(gè)平臺(tái)。

1.1 陀螺儀

陀螺儀可以用于檢測(cè)設(shè)備的持握方式，原理是檢測(cè)設(shè)備在X、Y、Z軸上所旋轉(zhuǎn)的角速度

1.2 運(yùn)動(dòng)傳感器加速度傳感器加速計(jì)（Motion/Accelerometer Sensor）

加速計(jì)用于檢測(cè)設(shè)備在X、Y、Z軸上的加速度 （哪個(gè)方向有力的作用），可以用于檢測(cè)設(shè)備的搖晃，經(jīng)典應(yīng)用場(chǎng)景如搖一搖等

2 添加依賴

在Flutter中 使用到到插件 sensors_plus 來(lái)獲出加速度傳感器數(shù)據(jù)

在Flutter項(xiàng)目中添加如下

  sensors_plus: ^1.0.2

3 使用 sensors_plus

導(dǎo)包

import 'package:sensors_plus/sensors_plus.dart';

監(jiān)聽(tīng)手機(jī)搖動(dòng)并實(shí)現(xiàn)搖一搖顯示彈框的效果

///代碼清單
class DemoSensorsPlusPage extends StatefulWidget {
  @override
  _DemoSensorsPlusPageState createState() => _DemoSensorsPlusPageState();
}

class _DemoSensorsPlusPageState extends State<DemoSensorsPlusPage> {
  bool _isShow = false;

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

    //加速度 受重力影響
    accelerometerEvents.listen((AccelerometerEvent event) async {
      //[AccelerometerEvent (x: 0.0992431640625, y: 0.11407470703125, z: 9.776962280273438)]
      // print(event);
      int value = 10;
      if (event.x.abs() > value ||
          event.y.abs() > value ||
          event.z.abs() > value) {
        if (!_isShow) {
          _isShow = true;
          dynamic result = await showDialog<bool>(
              builder: (BuildContext context) {
                return CupertinoAlertDialog(
                  title: Text("搖一搖"),
                  content: Image.asset(
                    "assets/images/banner1.png",
                    width: 200,
                  ),
                );
              },
              context: context,
              barrierDismissible: true);
          _isShow = false;
        }
      }
    });

    //加速度 不受重力影響
    userAccelerometerEvents.listen((UserAccelerometerEvent event) {});

    //陀螺儀傳感器
    gyroscopeEvents.listen((GyroscopeEvent event) {
      //[GyroscopeEvent (x: 0.00042724609375, y: 0.0005340576171875, z: -0.0003204345703125)]
      // print(event);
    });
  }

  @override
  Widget build(BuildContext context) {
    ///使用 Scaffold 組件來(lái)構(gòu)建應(yīng)用的基本頁(yè)面
    /// 頁(yè)面的架構(gòu)
    return Scaffold(
      appBar: AppBar(title: Text("sensors_plus")),
      body: Center(
        child: Text("搖一搖"),
      ),
    );
  }
}

最后來(lái)一張總結(jié)的圖