🐢

【Flutter】flutter_compassを使って方角を取得する

2023/12/20に公開

Package : flutter_compass

このパッケージではスマートフォンのセンサーを使用し、方角を 0°〜360° で取得できます。

https://pub.dev/packages/flutter_compass/example

方角を取得する

FlutterCompass.events を呼ぶだけで方角が取得できます。
events は Stream 型で取得しているそうなので StreamBuilder を使います。

import
flutter pub add flutter_compass
取得
StreamBuilder<CompassEvent>(
    stream: FlutterCompass.events,
    builder: (context, snapshot) {
        if (snapshot.hasData) {
            return Text(snapshot.data!.heading.toString()); // -> 24.76911411935013
        }
        return Text('Error');
    }
)

これだけで一応、方角は取得できます。
公式のドキュメントではパーミッションの設定をしていたので、必要に応じて設定して下さい。
※私の Android デモ機ではパーミッション不要で動きました。

実装サンプル

実行例

コード全文
import 'package:flutter/material.dart';
import 'package:flutter_compass/flutter_compass.dart';

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  
  Widget build(BuildContext context) {
    return Scaffold(
      body: StreamBuilder<CompassEvent>(
        stream: FlutterCompass.events,
        builder: (context, snapshot) {
          if (snapshot.hasError) {
            return Text('Error reading heading: ${snapshot.error}');
          }
          if (snapshot.connectionState == ConnectionState.waiting) {
            return const Center(
              child: CircularProgressIndicator(),
            );
          }
          double? direction = snapshot.data!.heading;
          if (direction == null) {
            return const Center(
              child: Text("Device does not have sensors !"),
            );
          }
          return Center(
            child: Text(
              '${direction.toStringAsFixed(0)}°',
              style: const TextStyle(fontSize: 100),
            ),
          );
        },
      ),
    );
  }
}

Discussion