Flutter 实现微信摇一摇的功能 Flutter 加速度感应

Love The Way You Lie 2023-10-07 16:52 60阅读 0赞

如果你有兴趣 你可以关注一下公众号 biglead 来获取最新的学习资料。

*  [Flutter 从入门 到精通系列文章在这里][Flutter _]
 *  [当然也必需是要有源码的 在这里了][Link 1]
 *  [github 有点慢 不妨来看看码云的源码吧][github _]
 *  [系列学习教程在这里][Link 2]

--------------------

##### 1 前言 #####

传感器是一种感应\\检测装置, 目前已经广泛应用于智能手机上，包括 Android 、iOS 两个平台。

###### 1.1 陀螺仪 ######

陀螺仪可以用于检测设备的持握方式，原理是检测设备在X、Y、Z轴上所旋转的角速度  
![在这里插入图片描述][b8a63f0663cb4ff2b9f57f150ee1fe75.png]

###### 1.2 运动传感器\\加速度传感器\\加速计（Motion/Accelerometer Sensor） ######

加速计用于检测设备在X、Y、Z轴上的加速度 （哪个方向有力的作用），可以用于检测设备的摇晃，经典应用场景如摇一摇等

--------------------

##### 2 添加依赖 #####

在Flutter中 [使用到到插件 sensors\_plus ][sensors_plus]来获出加速度传感器数据  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3psMTg2MDM1NDM1NzI_size_16_color_FFFFFF_t_70]

在Flutter项目中添加如下

sensors_plus: ^1.0.2

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3psMTg2MDM1NDM1NzI_size_16_color_FFFFFF_t_70 1]

##### 3 使用 sensors\_plus #####

导包

import 'package:sensors_plus/sensors_plus.dart';

监听手机摇动并实现摇一摇显示弹框的效果

///代码清单
    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 组件来构建应用的基本页面
        /// 页面的架构
        return Scaffold(
          appBar: AppBar(title: Text("sensors_plus")),
          body: Center(
            child: Text("摇一摇"),
          ),
        );
      }
    }

最后来一张总结的图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3psMTg2MDM1NDM1NzI_size_16_color_FFFFFF_t_70_pic_center]

[Flutter _]: https://blog.csdn.net/zl18603543572/article/details/93532582
[Link 1]: https://gitee.com/android.long/flutter-ho/blob/279b5185f50a3379c71a74fc6c51b421f59c0354/lib/src/pages/demo/demo18/demo_DateRangPage.dart
[github _]: https://github.com/zhaolongs
[Link 2]: https://study.163.com/instructor/1021406098.htm?_trace_c_p_k2_=09d88ef1f37645abadcc2b58620d4b00
[b8a63f0663cb4ff2b9f57f150ee1fe75.png]: https://img-blog.csdnimg.cn/b8a63f0663cb4ff2b9f57f150ee1fe75.png
[sensors_plus]: https://pub.flutter-io.cn/packages/sensors_plus
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3psMTg2MDM1NDM1NzI_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/cdc2339ca57c44a688aa288eeabd7e6a.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3psMTg2MDM1NDM1NzI=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3psMTg2MDM1NDM1NzI_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/7d5b96d5dc4542a69a9f13ba31e8953b.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3psMTg2MDM1NDM1NzI=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3psMTg2MDM1NDM1NzI_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/88cb040be8fb47e1b5869863642342ad.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3psMTg2MDM1NDM1NzI=,size_16,color_FFFFFF,t_70#pic_center