Create a Qibla Finder App in Flutter
How to Build a Qibla Finder with Dart and Flutter
Introduction
First of all, Alhamdulilah for being Muslim, the greatest blessing ever. I am sure many of you one day needed to use a qibla finder on a muslim app, or Qibla Finder by Google to know the Qibla direction (Makkah). I have built this feature in my app Al Noor, Available on IOS & Android. This is How I did it.
Please note that this should be debugged and tested on a physical device. The source code for this project is available from this Github repository.
Project Setup
The project configuration is contained in the standard pubspec.yaml:
As you can see, I have imported 3 packages geolocator, adhan_dart, flutter_compass. Geolocator is well popular package, that will allow us to get the latitude and longitude of the device location, which we will need know the qibla direction from the other package, adhan_dart. Which will Get the qibla direction, in degrees from North. flutter_compass is a simple plugin with event stream that returns a heading from 0 to 360. This data will be captured and used to rotate the compass needle to always point North.
Get Faisal Nasir Al-Ghaithi’s stories in your inbox
Join Medium for free to get updates from this writer.
To add the geolocator to your Flutter application read the install instructions. Below are some Android and iOS specifics that are required for the geolocator to work correctly.
Main App File
Main file can be found here in lib/main.dart:
It’s a just a normal main file that have StatelessWidget MyApp which returns a MaterialApp Widget, that point us to a Scaffold (StatefulWidget) called HomePage located in lib/pages/home_page.dart where our work begin.
HomePage is a StatefulWidget that returns a Scaffold. It contains an AppBar, FutureBuilder and a StreamBuilder. We start by calling _determinePosition in the initState method and assign it to getPosition variable, and then using it in a FutureBuilder. Assigning the snapshot data to Position positionResult, through the positionResult we can retrieve the latitude and the longitude to get the qibla direction and show it around compass (0 to 360), we will also need it to rotate the Kaaba picture. In the StreamBuilder We are getting the stream from the flutter_compass package using FlutterCompass.events. As I mentioned above, it returns a heading from 0 to 360. 0° means North, 90° means East, 180° means South and 270° means West. We are to going to use the return heading to rotate the compass which we will build in just a minute. Wrapping everything in a Stack() so we can have the compass and on top of it the Kaaba and the arrow around it. I have also created showHeading method that takes two double parameters, direction and qibla direction to know when we are aligned in the right direction, facing Makkah.
Compass CustomPainter File
Compass Custompainter file can be found here in lib/widgets/compass_custompainter.dart:
The CompassCustomPainter class is an implementation of CustomPainter which takes an angle parameter and calculates a rotation (in radians) to be applied to the compass. Once you extends CustomPainter you’ve to override two methods, shouldRepaint() (make sure it returns true) and Paint() where objects are drawn in the canvas. translate function is applied to center the offset for rotation, then paint method defines the brush objects for circle , shadowCircle , lightIndexLine , darkIndexLine and northRedBrush . The sequence of drawing these elements are important, because we want them to be on top of each other. Now based on the angle parameter, we are painting these elements on the rotated canvas, pointing the north red triangle towards magnetic North. Notice that the arrow and the Kaaba are rotating in a way that, when its around 12'oclock, it means its the right direction.
Conclusion
Using CustomPainter and with the help of few packages we managed to draw a compass in the canvas and rotate it while knowing the direction of Qibla.
This is the design I ended up choosing for my app, if you have another UI design in mind, feel free to tweak it. same concept applies.
Thanks for reading!
