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

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

自定义的Flutter包，用于通过设备运动传感器查找方向。

功能

  • 广泛且易于使用
  • 预配置的UI和自定义UI支持
  • 自定义构建器
  • 平滑旋转
  • 值以度为单位
  • (新)麦加方向角

安装

在pubspec.yaml文件中添加以下行：

dependencies:
  smooth_compass: ^0.0.2

示例

确保查看示例

视频教程

iOS

确保将具有适当描述的键添加到Info.plist文件中。

  • NSLocationWhenInUseUsageDescription
  • NSLocationAlwaysAndWhenInUseUsageDescription

Android

确保将权限添加到app/src/main/AndroidManifest.xml文件中。

  • android.permission.INTERNET
  • android.permission.ACCESS_COARSE_LOCATION
  • android.permission.ACCESS_FINE_LOCATION

基本设置

完整的示例可以在这里找到。

SmoothCompass 提供了 compassBuilder，它返回：

  • degrees 是方向值。
  • turns 是指南针旋转的值。
  • compassAsset 是（默认）指南针小部件或传递给 compassAsset 的小部件。
  • qiblahOffset 返回当前位置的麦加方向角。

SmoothCompass 可选参数 Height、Width、Duration、isQiblahCompass 和 compassAsset：

  • compassAsset 是可定制的指南针小部件。如果不提供，默认会显示。
  • isQiblahCompass 必须提供，如果你想找到当前位置的麦加方向角，默认麦加方向角值为0。

默认小部件

SmoothCompass(
  //旋转速度越高，旋转越慢
  rotationSpeed: 200,
  height: 300,
  width: 300,
)

自定义小部件

SmoothCompass(
  rotationSpeed: 200,
  height: 300,
  width: 300,
  compassAsset: CustomWidget(),
)

自定义错误按钮和权限消息

SmoothCompass(
  height: 300,
  width: 300,
  isQiblahCompass: true,
  
  //如果isQiblahCompass设置为true，则需要自定义
  //在这里自定义错误消息和错误按钮样式
  errorDecoration: ErrorDecoration(
    spaceBetween: 20,
    permissionMessage: PermissionMessage(
      denied: "位置权限被拒绝",
      permanentlyDenied: "位置权限被永久拒绝",
    ),
    buttonStyle: ErrorButtonStyle(
      borderRadius: BorderRadius.circular(10),
      buttonColor: Colors.red,
      textColor: Colors.white,
      buttonHeight: 40,
      buttonWidth: 150
    ),
    messageTextStyle: const TextStyle(
      color: Colors.blue,
      fontWeight: FontWeight.bold,
      fontSize: 18
    )
  ),
)

带有麦加方向角的自定义小部件

SmoothCompass(
  height: 200,
  width: 200,
  isQiblahCompass: true,
  compassBuilder: (context, snapshot, child) {
    return AnimatedRotation(
      duration: const Duration(milliseconds: 800),
      turns: snapshot?.data?.turns ?? 0,
      child: Stack(
        children: [
          Positioned(
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            child: Image.asset("assets/images/compass.png", fit: BoxFit.fill,),
          ),
          Positioned(
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            child: AnimatedRotation(
              duration: const Duration(milliseconds: 500),
              turns: (snapshot?.data?.qiblahOffset ?? 0) / 360,
              //放置你的麦加针头
              child: Container(
                decoration: const BoxDecoration(
                  shape: BoxShape.circle,
                ),
                child: const VerticalDivider(
                  color: Colors.grey,
                  thickness: 5,
                ),
              )
            ),
          ),
        ],
      ),
    );
  },
)

更多关于Flutter指南针功能插件smooth_compass_new的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter指南针功能插件smooth_compass_new的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何在Flutter应用中使用smooth_compass_new插件来实现指南针功能的示例代码。这个插件允许你获取设备的方向信息，并在UI中显示指南针。

首先，确保你已经在你的Flutter项目中添加了smooth_compass_new插件。你可以在你的pubspec.yaml文件中添加以下依赖项：

dependencies:
  flutter:
    sdk: flutter
  smooth_compass_new: ^最新版本号 # 请替换为最新的版本号

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

接下来，创建一个新的Flutter项目或在现有项目中添加以下代码来实现指南针功能。

main.dart

import 'package:flutter/material.dart';
import 'package:smooth_compass_new/smooth_compass_new.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Compass Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: CompassScreen(),
    );
  }
}

class CompassScreen extends StatefulWidget {
  @override
  _CompassScreenState createState() => _CompassScreenState();
}

class _CompassScreenState extends State<CompassScreen> {
  double _azimuth = 0.0;
  bool _isCompassReady = false;

  @override
  void initState() {
    super.initState();
    _initCompass();
  }

  void _initCompass() async {
    // 初始化指南针
    bool isReady = await SmoothCompassNew.isSensorAvailable();
    if (isReady) {
      SmoothCompassNew.startListening(interval: 100).listen((event) {
        setState(() {
          _azimuth = event.azimuth;
          _isCompassReady = true;
        });
      });
    } else {
      print("指南针传感器不可用");
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Compass'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            if (_isCompassReady)
              RotatedBox(
                quarterTurns: (_azimuth / 360).floor() % 4,
                child: Icon(
                  Icons.direction_rounded,
                  size: 100,
                  color: Colors.blue,
                ),
              ),
            SizedBox(height: 20),
            Text(
              'Azimuth: ${_azimuth.toStringAsFixed(1)}°',
              style: TextStyle(fontSize: 24),
            ),
          ],
        ),
      ),
    );
  }

  @override
  void dispose() {
    // 停止监听指南针数据
    SmoothCompassNew.stopListening();
    super.dispose();
  }
}

解释

  1. 依赖项：在pubspec.yaml文件中添加smooth_compass_new插件的依赖项。

  2. 初始化应用：在main.dart文件中，创建一个MyApp类，并在其中设置MaterialApp，将CompassScreen作为首页。

  3. 指南针屏幕：创建一个CompassScreen类，它是一个StatefulWidget，用于管理指南针的状态。

  4. 初始化指南针：在initState方法中，调用SmoothCompassNew.isSensorAvailable()来检查指南针传感器是否可用。如果可用，则开始监听指南针数据。

  5. 更新UI：当接收到新的指南针数据时，使用setState方法更新UI，包括旋转图标以显示当前方向，并显示方位角。

  6. 停止监听：在dispose方法中，停止监听指南针数据，以防止内存泄漏。

这样，你就可以在Flutter应用中实现一个简单的指南针功能了。确保在实际使用中，根据需要进行适当的错误处理和UI优化。

回到顶部