Flutter指南针功能插件 lat_compass 的使用

lat_compass 是一个提供真北和磁北方向的指南针插件，基于Android和iOS平台提供的数据。本文将介绍如何在Flutter项目中集成和使用这个插件。

开始使用

首先，在你的 pubspec.yaml 文件中添加依赖：

dependencies:
  lat_compass: ^1.1.0

然后运行 flutter pub get 来安装依赖。

Android 设置

对于Android平台，需要位置信息来计算真北方向。你可以使用如 permission_handler 这样的插件来请求位置权限。

注意：直到接收到位置信息之前，真北和磁北是相同的。

使用方法

使用 LatCompass().onUpdate 监听指南针事件，获取磁北、真北和精度等信息：

LatCompass().onUpdate.listen((event) {
  event.magneticHeading; // 磁北方向
  event.trueHeading;     // 真北方向
  event.accuracy;        // 方向精度
});

完整示例 Demo

以下是一个完整的示例代码，展示了如何使用 lat_compass 插件来实现一个简单的指南针应用：

import 'dart:async';
import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:lat_compass/lat_compass.dart';
import 'dart:math' as math;
import 'package:permission_handler/permission_handler.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp,
    DeviceOrientation.portraitDown,
  ]);

  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
  late AnimationController controller;
  late Animation<double> animation;
  late TweenRotationDegree tween;

  double _radian = 0;
  StreamSubscription? _subscription;
  CompassEvent? _compassEvent;

  double degToRad(double value) => value * math.pi / 180;

  [@override](/user/override)
  void dispose() {
    _subscription?.cancel();
    controller.dispose();
    super.dispose();
  }

  [@override](/user/override)
  void initState() {
    super.initState();

    controller = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 300),
    );
    animation = CurvedAnimation(
      parent: controller,
      curve: Curves.fastOutSlowIn,
    );
    tween = TweenRotationDegree(begin: 0, end: 0);
    controller.addListener(() {
      final value = tween.evaluate(animation);
      _radian = degToRad(value) * -1;
      setState(() {});
    });

    _subscription = LatCompass().onUpdate.listen((event) {
      if (Platform.isIOS) {
        _radian = degToRad(event.magneticHeading % 360) * -1;
        setState(() {});
      } else {
        // 动画效果（仅限Android）
        tween = TweenRotationDegree(
          begin: (_compassEvent?.magneticHeading ?? 0) % 360,
          end: event.magneticHeading % 360,
        );
        controller
          ..reset()
          ..forward();
      }
      _compassEvent = event;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Lat Compass Example App'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Transform.rotate(
                angle: _radian,
                child: Image.asset('assets/compass.jpg'), // 替换为实际的指南针图片路径
              ),
              Text(
                'Magnetic: ${_compassEvent?.magneticHeading}',
                textAlign: TextAlign.center,
              ),
              Text(
                'True: ${_compassEvent?.trueHeading}',
                textAlign: TextAlign.center,
              ),
              Text(
                'Accuracy: ${_compassEvent?.accuracy}',
                textAlign: TextAlign.center,
              ),
              if (Platform.isAndroid) _buildLocationPermission(context)
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildLocationPermission(BuildContext context) {
    return FutureBuilder(
      future: Permission.locationWhenInUse.status,
      builder: (context, snapshot) {
        final status = snapshot.data;
        if (status == PermissionStatus.permanentlyDenied) {
          return Text('请允许设置中的位置权限');
        }

        if (status == PermissionStatus.denied) {
          return ElevatedButton(
            onPressed: () async {
              await Permission.location.request();
              setState(() {});
            },
            child: const Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                Icon(Icons.gps_fixed),
                SizedBox(width: 8),
                Text('请求位置权限'),
              ],
            ),
          );
        }
        return Text('位置权限状态: $status');
      },
    );
  }
}