Flutterの記事を整理し本にしました

本稿の記事を含む様々な記事を体系的に整理し本にまとめました
今後はこちらを最新化するため、最新情報はこちらをご確認ください

まとめ記事

Flutter系の記事のまとめ

はじめに

スマートフォンに搭載されているセンサーからデータを取得する方法を解説します。

センサー

パッケージインストール

今回はsensors_plusのパッケージを利用します。細かい条件は下記の公式ドキュメントを参照してください。

https://pub.dev/packages/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の初期化のタイミングで、ストリーミングでセンサーデータを受け取り、画面を更新するようにします。

動作確認

スマートフォンを振ったり、傾けたり動かすことで、値が変わっていきます。