Flutterの記事を整理し本にしました
- 本稿の記事を含む様々な記事を体系的に整理し本にまとめました
- 今後はこちらを最新化するため、最新情報はこちらをご確認ください
まとめ記事
はじめに
スマートフォンに搭載されているセンサーからデータを取得する方法を解説します。
センサー
パッケージインストール
今回はsensors_plus
のパッケージを利用します。細かい条件は下記の公式ドキュメントを参照してください。
まず、必要なパッケージをインストールします。
pubspec.yml
//中略
dependencies:
flutter:
sdk: flutter
+ sensors_plus: ^1.3.2
//中略
実装
ソースコードの全体像を掲載します。
main.dart
import 'package:flutter/material.dart';
import 'package:sensors_plus/sensors_plus.dart';
import 'dart:async';
// mainメソッド,MyApp,MyHomePageはデフォルトから変更がないため省略
class _MyHomePageState extends State<MyHomePage> {
String _userAccelerometerValues = "";
String _gyroscopeValues = "";
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Text(_userAccelerometerValues,
style: Theme.of(context).textTheme.headline6),
Text(_gyroscopeValues,
style: Theme.of(context).textTheme.headline6),
],
));
}
@override
void initState() {
super.initState();
userAccelerometerEvents.listen(
(UserAccelerometerEvent event) {
setState(() {
_userAccelerometerValues =
"加速度センサー\n${event.x}\n${event.y}\n${event.z}";
});
},
);
gyroscopeEvents.listen(
(GyroscopeEvent event) {
setState(() {
_gyroscopeValues = "ジャイロセンサー\n${event.x}\n${event.y}\n${event.z}";
});
},
);
}
}
まず、加速度センサーとジャイロセンサー用のデータを扱うための変数と、画面表示用のText
を準備しておきます。
そして、initState
の初期化のタイミングで、ストリーミングでセンサーデータを受け取り、画面を更新するようにします。
動作確認
スマートフォンを振ったり、傾けたり動かすことで、値が変わっていきます。