I want to create a page with a compass which points to a specific Location which has a latitude and a longitude. So If you stand north of the Location the compass needle shows down on the screen and if you stand south of the Location the needle points up on screen.
The Location: LatLng(50.074743304804485, 8.238497357816172)
My Code for now:
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:flutter_compass/flutter_compass.dart';
class CompassPage extends StatefulWidget {
const CompassPage({Key? key}) : super(key: key);
@override
State<CompassPage> createState() => _CompassPageState();
}
class _CompassPageState extends State<CompassPage> {
double? heading = 0;
@override
void initState() {
// TODO: implement initState
super.initState();
FlutterCompass.events!.listen((event) {
setState(() {
heading = event.heading;
});
heading = event.heading;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black,
appBar: AppBar(
backgroundColor: Colors.orange,
centerTitle: true,
title: const Text("Compass Page"),
),
body: Center(
child: Padding(
padding: const EdgeInsets.all(20),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
"${heading!.ceil()} degrees",
style: const TextStyle(
color: Colors.white,
fontSize: 26,
fontWeight: FontWeight.bold,
),
),
Expanded(
child: Stack(
alignment: Alignment.center,
children: [
Image.asset(
"assets/images/cadrant.png",
scale: 1.1,
),
Transform.rotate(
angle: (heading! * (pi / 100) * -1),
child: Image.asset("assets/images/compass.png"),
),
],
),
),
],
),
),
),
);
}
}
Does anyone have experience with this? Thanks a lot!