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

smooth_compass 是一个可自定义的 Flutter 插件，用于通过设备的运动传感器来确定方向。以下是该插件的详细介绍和示例代码。

特性

功能强大且易于使用
预配置的 UI 和自定义 UI 支持
自定义构建器
平滑旋转
以度为单位的值
（新功能）朝向麦加的角度

安装

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

dependencies:
  smooth_compass: ^2.0.17

示例

确保查看示例项目。

视频教程

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`

compassBuilder 返回以下值：

degrees：方向值
turns：指南针旋转值
compassAsset：默认的指南针小部件或传递的自定义小部件
qiblahOffset：当前位置的朝向麦加角度

SmoothCompass 可选参数

height：高度
width：宽度
duration：动画持续时间
isQiblahCompass：是否为朝向麦加的指南针，默认值为 false
compassAsset：自定义指南针小部件，如果未提供则显示默认小部件

默认小部件

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 插件：

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Smooth Compass Example'),
        ),
        body: Center(
          child: SmoothCompass(
            rotationSpeed: 200,
            height: 300,
            width: 300,
            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的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

ionicwang 1楼•1 天前

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

当然，以下是如何在Flutter项目中使用smooth_compass插件来实现指南针功能的示例代码。smooth_compass是一个用于在Flutter应用中显示指南针的插件。

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  smooth_compass: ^0.5.0  # 请检查最新版本号

然后运行flutter pub get来获取依赖。

2. 导入插件

在你的Dart文件中导入smooth_compass插件：

import 'package:smooth_compass/smooth_compass.dart';

3. 使用SmoothCompass组件

在你的Flutter应用中，你可以直接使用SmoothCompass组件来显示指南针。以下是一个简单的示例：

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

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

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

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

class _CompassScreenState extends State<CompassScreen> {
  double _heading = 0.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Compass'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            SmoothCompass(
              heading: _heading,
              onHeadingChanged: (double heading) {
                setState(() {
                  _heading = heading;
                });
              },
              width: 200,
              height: 200,
            ),
            SizedBox(height: 20),
            Text(
              'Heading: ${_heading.toStringAsFixed(2)}°',
              style: TextStyle(fontSize: 20),
            ),
          ],
        ),
      ),
    );
  }
}

4. 运行应用

将上述代码添加到你的Flutter项目中，然后运行应用。你应该会看到一个指南针，并且当设备方向改变时，指南针的指针会相应旋转，同时下方的文本会显示当前的朝向角度。

注意事项

确保你的设备具有传感器支持（如磁力计），因为指南针功能依赖于这些传感器。
在Android设备上，你可能需要在AndroidManifest.xml文件中添加必要的权限，尽管smooth_compass插件通常会处理这些权限请求。
在iOS设备上，确保你的Info.plist文件包含了必要的权限声明，特别是关于位置服务的权限（尽管指南针不一定需要位置服务权限，但某些情况下可能会请求）。

这个示例展示了如何使用smooth_compass插件来创建一个简单的指南针应用。你可以根据需要进一步定制和扩展功能。

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

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

特性

安装

示例

视频教程

iOS 配置

Android 配置

基本设置

SmoothCompass 提供的 compassBuilder

SmoothCompass 可选参数

默认小部件

自定义小部件

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

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

支持

示例代码

1. 添加依赖

2. 导入插件

3. 使用SmoothCompass组件

4. 运行应用

注意事项

SmoothCompass 提供的 `compassBuilder`