Flutter宗教方向指示插件piri_qiblah的使用

发布于 1周前 作者 gougou168 来自 Flutter

Flutter宗教方向指示插件piri_qiblah的使用

Piri Qiblah小部件是一个包,用于展示朝向克尔白天房的方向,适用于公司内部项目。

依赖的包

  • flutter_qiblah
  • flutter_svg

功能

  • 显示朝向克尔白的方向
  • 使用默认资源或自定义资源
  • 使用默认的错误/加载小部件或自定义小部件

截图

克尔白方向指示截图

示例代码

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_svg/svg.dart';
import 'package:piri_qiblah/piri_qiblah.dart';

/// ----------------------------------------------------------------------------

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp,
  ]);
  runApp(const MyApp());
}

/// ----------------------------------------------------------------------------

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

  // 这个小部件是你的应用的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: Scaffold(
        appBar: AppBar(title: const Text('Piri Qiblah')),
        body: SafeArea(
          child: SizedBox.expand(
            child: Column(
              children: [
                const Text('Piri Qiblah With Custom Assets'), // 使用自定义资源的Piri Qiblah
                PiriQiblah(
                  useDefaultAssets: false, // 不使用默认资源
                  customBackgroundCompass: // 自定义背景指南针
                      SvgPicture.asset('assets/test_compass.svg'),
                  customNeedle: // 自定义指针
                      SvgPicture.asset('assets/test_needle.svg'),
                  permissionDeniedMessage: '正在请求位置权限', // 请求权限时显示的消息
                ),
                const SizedBox(height: 30), // 添加间距
                Divider(), // 分割线
                const SizedBox(height: 30), // 添加间距
                const Text('Piri Qiblah With Default Assets'), // 使用默认资源的Piri Qiblah
                const PiriQiblah(
                  useDefaultAssets: true, // 使用默认资源
                  defaultNeedleColor: Colors.green, // 默认指针颜色为绿色
                  permissionDeniedMessage: '正在请求位置权限', // 请求权限时显示的消息
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

更多关于Flutter宗教方向指示插件piri_qiblah的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter宗教方向指示插件piri_qiblah的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,我可以为你提供一个关于如何在Flutter项目中使用piri_qiblah插件的示例代码。piri_qiblah插件用于计算并显示穆斯林祈祷的方向(Qiblah)。以下是一个简单的示例,展示如何在Flutter应用中使用该插件。

首先,确保你已经在pubspec.yaml文件中添加了piri_qiblah依赖:

dependencies:
  flutter:
    sdk: flutter
  piri_qiblah: ^latest_version  # 请替换为最新版本号

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

接下来,你可以在你的Flutter项目中创建一个简单的页面来显示Qiblah方向。以下是一个完整的示例代码:

import 'package:flutter/material.dart';
import 'package:piri_qiblah/piri_qiblah.dart';
import 'package:geolocator/geolocator.dart';

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

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

class QiblahDirectionPage extends StatefulWidget {
  @override
  _QiblahDirectionPageState createState() => _QiblahDirectionPageState();
}

class _QiblahDirectionPageState extends State<QiblahDirectionPage> {
  String _qiblahDirection = 'Loading...';
  double _qiblahAngle = 0.0;

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

  Future<void> _getCurrentLocation() async {
    bool serviceEnabled;
    LocationPermission permission;

    // Test if location services are enabled.
    serviceEnabled = await Geolocator.isLocationServiceEnabled();
    if (!serviceEnabled) {
      return Future.error('Location services are disabled.');
    }

    permission = await Geolocator.checkPermission();
    if (permission == LocationPermission.denied) {
      permission = await Geolocator.requestPermission();
      if (permission == LocationPermission.denied) {
        return Future.error('Location permissions are denied');
      }
    }

    if (permission == LocationPermission.deniedForever) {
      return Future.error(
          'Location permissions are permanently denied, we cannot request permissions.');
    }

    Position position = await Geolocator.getCurrentPosition(
        desiredAccuracy: LocationAccuracy.high);
    List<double> coordinates = [position.latitude, position.longitude];

    _getQiblahDirection(coordinates);
  }

  Future<void> _getQiblahDirection(List<double> coordinates) async {
    Qiblah qiblah = await Qiblah.getInstance();
    QiblahResult result = await qiblah.getQiblahDirection(
      coordinates: coordinates,
    );

    setState(() {
      _qiblahDirection = result.direction;
      _qiblahAngle = result.angle;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Qiblah Direction'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Qiblah Direction: $_qiblahDirection',
              style: TextStyle(fontSize: 20),
            ),
            SizedBox(height: 20),
            CircularProgressIndicator(
              value: _qiblahAngle / 360.0, // Normalize the angle to [0, 1]
            ),
            Text(
              'Angle: ${_qiblahAngle.toStringAsFixed(2)}°',
              style: TextStyle(fontSize: 18),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中,我们做了以下几件事:

  1. 使用Geolocator插件获取当前设备的地理位置。
  2. 使用piri_qiblah插件计算Qiblah方向和角度。
  3. 在UI中显示Qiblah方向和角度。

请注意,这个示例假设你已经授予了位置权限,并且设备上启用了位置服务。在实际应用中,你可能需要添加更多的错误处理和用户提示来获取位置权限。

此外,由于piri_qiblahgeolocator插件可能会随时间更新,因此请参考它们的官方文档以获取最新的使用方法和最佳实践。

回到顶部