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

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

简介

flutter_compass 是一个用于在 Flutter 应用中实现指南针功能的插件。它提供了从设备传感器获取方向的功能，范围为 0 到 360 度，其中 0 表示北方。

注意：

• Android 平台：当设备没有可用传感器时，返回值为 null。

使用方法

要使用此插件，首先需要将其添加到项目的 pubspec.yaml 文件中。例如：

dependencies:
  flutter_compass: '^0.0.1'

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

iOS 配置

在 iOS 上使用该插件时，需要在 Info.plist 文件中添加以下权限描述键：

<key>NSLocationWhenInUseUsageDescription</key>
<string>我们需要您的位置信息来使用指南针功能。</string>
<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
<string>我们需要您的位置信息来使用指南针功能。</string>

Android 配置

在 Android 上使用该插件时，需要在 app/src/main/AndroidManifest.xml 文件中添加以下权限：

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

推荐支持插件

为了简化权限请求，推荐使用 flutter_permission_handler 插件：

dependencies:
  permission_handler: ^10.0.0

完整示例代码

以下是一个完整的示例代码，展示如何使用 flutter_compass 实现指南针功能。

import 'dart:math' as math;

import 'package:flutter/material.dart';
import 'package:flutter_compass/flutter_compass.dart';
import 'package:permission_handler/permission_handler.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

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

class _MyAppState extends State<MyApp> {
  bool _hasPermissions = false;
  CompassEvent? _lastRead;
  DateTime? _lastReadAt;

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

    // 初始化时检查权限状态
    _fetchPermissionStatus();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.white,
        appBar: AppBar(
          title: const Text('Flutter 指南针'),
        ),
        body: Builder(builder: (context) {
          if (_hasPermissions) {
            return Column(
              children: [
                _buildManualReader(), // 手动读取方向
                Expanded(child: _buildCompass()), // 动态显示指南针
              ],
            );
          } else {
            return _buildPermissionSheet(); // 显示权限请求界面
          }
        }),
      ),
    );
  }

  // 手动读取方向按钮
  Widget _buildManualReader() {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Row(
        children: [
          ElevatedButton(
            child: Text('读取方向'),
            onPressed: () async {
              final CompassEvent tmp = await FlutterCompass.events!.first;
              setState(() {
                _lastRead = tmp;
                _lastReadAt = DateTime.now();
              });
            },
          ),
          Expanded(
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    '$_lastRead',
                    style: Theme.of(context).textTheme.bodySmall,
                  ),
                  Text(
                    '$_lastReadAt',
                    style: Theme.of(context).textTheme.bodySmall,
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

  // 动态显示指南针
  Widget _buildCompass() {
    return StreamBuilder<CompassEvent>(
      stream: FlutterCompass.events,
      builder: (context, snapshot) {
        if (snapshot.hasError) {
          return Text('读取方向错误: ${snapshot.error}');
        }

        if (snapshot.connectionState == ConnectionState.waiting) {
          return Center(
            child: CircularProgressIndicator(),
          );
        }

        double? direction = snapshot.data!.heading;

        // 如果方向为 null，则表示设备不支持该传感器
        if (direction == null)
          return Center(
            child: Text("设备不支持指南针功能！"),
          );

        return Material(
          shape: CircleBorder(),
          clipBehavior: Clip.antiAlias,
          elevation: 4.0,
          child: Container(
            padding: EdgeInsets.all(16.0),
            alignment: Alignment.center,
            decoration: BoxDecoration(
              shape: BoxShape.circle,
            ),
            child: Transform.rotate(
              angle: (direction * (math.pi / 180) * -1), // 旋转方向调整
              child: Image.asset('assets/compass.jpg'), // 指南针图标
            ),
          ),
        );
      },
    );
  }

  // 权限请求界面
  Widget _buildPermissionSheet() {
    return Center(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Text('需要位置权限以使用指南针功能'),
          ElevatedButton(
            child: Text('请求权限'),
            onPressed: () {
              Permission.locationWhenInUse.request().then((ignored) {
                _fetchPermissionStatus();
              });
            },
          ),
          SizedBox(height: 16),
          ElevatedButton(
            child: Text('打开应用设置'),
            onPressed: () {
              openAppSettings().then((opened) {
                // 用户是否打开了设置
              });
            },
          )
        ],
      ),
    );
  }

  // 检查权限状态
  void _fetchPermissionStatus() {
    Permission.locationWhenInUse.status.then((status) {
      if (mounted) {
        setState(() => _hasPermissions = status == PermissionStatus.granted);
      }
    });
  }
}