Flutter41.Opensource China扫一扫，摇一摇(13)

shake_page.dart

import 'dart:async';
import 'dart:math';

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

class ShakePage extends StatefulWidget {
  @override
  _ShakePageState createState() => _ShakePageState();
}

class _ShakePageState extends State<ShakePage> {
  bool isShaked = false;
  int _curentIndex = 0;
  StreamSubscription _streamSubscription;
  static const int SHAKE_TIMEOUT = 500;//晃动时间
  static const double SHAKE_SHRESHOLD = 3.25;//晃动时间
  var _lastShakeTime = 0;//上次晃动的时间

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _streamSubscription = accelerometerEvents.listen((event) {
      var now = DateTime.now().millisecondsSinceEpoch;
      if((now -  _lastShakeTime) > SHAKE_TIMEOUT) {
        var x = event.x;
        var y = event.y;
        var z = event.z;
        double accelerate =  sqrt(x* x + y * y + z * z) - 9.8;
        //加速度如果超过阈值
        if(accelerate > SHAKE_SHRESHOLD) {
          //手机晃动
          Vibration.vibrate();
          _lastShakeTime = now;
          if(!mounted) return;
          setState(() {
            isShaked = true;
          });
        }
      }
    });
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    _streamSubscription.cancel();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('摇一摇'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Image.asset(
              'assets/images/shake.png',
              width:120.0,
              height: 120.0,
            ),
            SizedBox(
              height: 10.0,
            ),
            Text(isShaked?'活动结束':'摇一摇获取礼品'),
          ],
        ),
      ),
      //底层的导航栏，2个导航栏
      bottomNavigationBar: BottomNavigationBar(
        //2个条目
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.folder), title: Text('礼品')),
          BottomNavigationBarItem(
              icon: Icon(Icons.assignment), title: Text('资讯'))
        ],
        currentIndex: _curentIndex,
        onTap: (index) {
          if (!mounted) return;
          setState(() {
            _curentIndex = index;
          });
        },
      ),
    );
  }
}

discovery_page.dart

import 'package:barcode_scan/barcode_scan.dart';
import 'package:flutter/material.dart';
import 'package:flutterapp2/pages/shake_page.dart';

import 'common_web_page.dart';

/**
 * 主界面find
 */
class DiscoveryPage extends StatefulWidget {
  @override
  _DiscoveryPageState createState() => _DiscoveryPageState();
}

class _DiscoveryPageState extends State<DiscoveryPage> {
  List<Map<String, IconData>> blocks = [
    {
      '开源众包': Icons.pageview,
      '开源软件': Icons.speaker_notes_off,
      '码云推荐': Icons.screen_share,
      '代码骗贷': Icons.assignment,
    },
    {
      '扫一扫': Icons.camera_alt,
      '摇一摇': Icons.camera,
    },
    {
      '码云封面人物': Icons.person,
      '线下活动': Icons.android,
    }
  ];

  void _handleItemClick(String title) {
    switch (title) {
      case '开源众包':
        _navToWebPage(title, 'https://zb.oschina.net/');
        break;
      case '扫一扫':
        scan();
        break;
      case '摇一摇':
        Navigator.of(context)
            .push(MaterialPageRoute(builder: (context) => ShakePage()));
        break;
    }
  }

  Future scan() async {
    String barcode = await BarcodeScanner.scan();
    print("Debug barcode==" + barcode);
  }

  void _navToWebPage(String title, String url) {
    if (title != null && url != null) {
      Navigator.of(context).push(MaterialPageRoute(
          builder: (context) => CommonWebPage(
            title: title,
            url: url,
          )));
    }
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: blocks.length,
      itemBuilder: (context, bolockIndex) {
        return Container(
          margin: const EdgeInsets.symmetric(vertical: 10.0),
          //线条边框设置
          decoration: BoxDecoration(
            border: Border(
              top: BorderSide(
                width: 1.0,
                color: Color(0xffaaaaaa),
              ),
              bottom: BorderSide(
                width: 1.0,
                color: Color(0xffaaaaaa),
              ),
            ),
          ),
          //listview嵌套，自带分割线。3个子模块
          child: ListView.separated(
            physics: NeverScrollableScrollPhysics(),//滑动冲突
            shrinkWrap: true,//显示完全
            itemBuilder: (context, mapIndex) {
              //InkWell有点击效果
              return InkWell(
                //点击事件
                onTap: (){
                  _handleItemClick(
                      blocks[bolockIndex].keys.elementAt(mapIndex));
                },
                //listview单个条目的布局
                child: Container(
                  height: 60.0,
                  child: ListTile(
                    leading: Icon(
                        blocks[bolockIndex].values.elementAt(mapIndex)),
                    title:
                    Text(blocks[bolockIndex].keys.elementAt(mapIndex)),
                    trailing: Icon(Icons.arrow_forward_ios),
                  ),
                ),
              );
            },
            //子listview的分隔线
            separatorBuilder: (context, mapIndex) {
              return Divider(
                height: 2.0,
                color: Color(0xffff0000),
              );
            },
              //子listview的数量是各个block的
            itemCount: blocks[bolockIndex].length),
        );
      }
    );
  }
}

yaml文件需要引入包

name: flutterapp2
description: A new Flutter application.


publish_to: 'none' # Remove this line if you wish to publish to pub.dev

version: 1.0.0+1

environment:
  sdk: ">=2.7.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter



  cupertino_icons: ^0.1.3
  http: ^0.12.2
  flutter_webview_plugin: ^0.3.11
  shared_preferences: ^0.5.7+3
  event_bus: ^1.1.1
  barcode_scan: ^1.0.0
  sensors: ^0.4.0+1
  vibration: ^1.0.2

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:

  uses-material-design: true
  assets:
    #导航栏背景
    - assets/images/ic_nav_news_normal.png
    - assets/images/ic_nav_news_actived.png
    - assets/images/ic_nav_tweet_normal.png
    - assets/images/ic_nav_tweet_actived.png
    - assets/images/ic_nav_discover_normal.png
    - assets/images/ic_nav_discover_actived.png
    - assets/images/ic_nav_my_normal.png
    - assets/images/ic_nav_my_pressed.png
    #抽屉背景
    - assets/images/cover_img.jpg
    #用户默认头像
    - assets/images/ic_avatar_default.png
    #摇一摇背景图
    - assets/images/shake.png

效果图