Flutter Code Tips --- Shake

Disclaimer: This article is a blogger original article, follow the CC 4.0 BY-SA copyright agreement, reproduced, please attach the original source link and this statement.

This link: https://blog.csdn.net/hekaiyou/article/details/93111185

Now a lot of APP inside will let users pick up the phone a shake of the scene, but the most common micro letter, QQ and other social APP inside shake, when we put APP to the test to test, but also often want to add on shake pop scene switching environment, such as the following scenario.

So, here's to show you how to add on Flutter monitor phone "Shake" and subsequent logic operations.

First of all, we want to use Flutter official development sensor ( sensors) plug- in pub spec.yaml, add the following under the code directory, and then save, under normal circumstances, the IDE automatically start the download.

  # 用于访问加速度计和陀螺仪传感器。
  # https://pub.dev/packages/sensors#-readme-tab-
  sensors: ^0.4.0+1

Then import references related projects.

import 'package:flutter/material.dart';
// 导入传感器（`sensors`）插件
import 'package:sensors/sensors.dart';
// 导入演示用的苹果风格组件库
import 'package:flutter/cupertino.dart';

Then there is the main code.

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  /// 是否已经显示摇一摇弹窗。
  bool isShow = false;

  @override
  void initState() {
    accelerometerEvents.listen((AccelerometerEvent event) {
      // 摇一摇阀值,不同手机能达到的最大值不同，如某品牌手机只能达到20。
      int value = 20;
      if (event.x >= value ||
          event.x <= -value ||
          event.y >= value ||
          event.y <= -value ||
          event.z >= value ||
          event.z <= -value) {
        if (isShow == false) {
          isShow = true;
          showDialog<bool>(
            context: context,
            barrierDismissible: true,
            builder: (BuildContext context) {
              return CupertinoAlertDialog(
                title: Text('摇一摇'),
                content: Text('摇啊摇～一直摇！'),
                actions: [
                  CupertinoDialogAction(
                    child: Text('确定'),
                    onPressed: () {
                      Navigator.of(context).pop(true);
                    },
                  ),
                ],
              );
            },
          ).then((onValue) {
            if (onValue != null) {
              // 点击确定后返回的业务逻辑。
            }
            isShow = false;
          });
        }
      }
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo 主页'),
      ),
    );
  }
}

The above codes can be copied directly executed, wherein the core code below.

    accelerometerEvents.listen((AccelerometerEvent event) {
      // 摇一摇阀值,不同手机能达到的最大值不同，如某品牌手机只能达到20。
      int value = 20;
      if (event.x >= value ||
          event.x <= -value ||
          event.y >= value ||
          event.y <= -value ||
          event.z >= value ||
          event.z <= -value) {
        if (isShow == false) {

Use accelerometerEvents.listenadd accelerometer to listen, to return AccelerometerEvent eventthere x, y, zthree parameters, respectively, to the current location of the mobile phone as the center of a three-dimensional coordinate movement.

Then setting a valueas a three-dimensional motion coordinates threshold, when it reaches the threshold of the subsequent processing code, and set a isShowrecording window currently been ejected boolvalue for the second hurdle.

The final effect is as follows.