Flutter宗教方向指示插件piri_qiblah的使用
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),
),
],
),
),
);
}
}
在这个示例中,我们做了以下几件事:
- 使用
Geolocator
插件获取当前设备的地理位置。 - 使用
piri_qiblah
插件计算Qiblah方向和角度。 - 在UI中显示Qiblah方向和角度。
请注意,这个示例假设你已经授予了位置权限,并且设备上启用了位置服务。在实际应用中,你可能需要添加更多的错误处理和用户提示来获取位置权限。
此外,由于piri_qiblah
和geolocator
插件可能会随时间更新,因此请参考它们的官方文档以获取最新的使用方法和最佳实践。