Hire the author: Oshinowo A
Introduction
As a newbie to a city or town, getting to know different locations and routes might be a little uneasy. Creating a real-time geographic information system (GIS) is useful and would help users navigate around a certain location easily.
We can manage this type of GIS data with Flutter and Firebase, allowing users to navigate to different locations and view the distance between these places. In this guide, we’ll learn how we can manage geographic information with a flutter app and firebase as its backend for storing data.
Here is the GIS flutter source code on GitHub. The open-source banner image of this article is fetched from Chetu.
Glossary
Firebase: Firebase is a platform developed by Google for creating mobile and web applications. It provides tools for tracking analytics, reporting and fixing app crashes, creating marketing and product experiment.
Flutter: Flutter is an open-source UI software development kit created by Google. It is being used to develop cross-platform applications for Android, iOS, Linux, Mac, Windows and the web from a single codebase.
Dart: Dart is a programming language designed for client development, such as for the web and mobile apps.
GIS: A geographic information system (GIS) is a system that creates, manages, analyzes, and maps all types of data.
Step by Step Procedure
Setup Flutter with Android Studio
- Download Android Studio
- Download flutter
- Set android sdk path in Path
- Set platform tools path in Path
- Install cmdline-tools
flutter config --android-studio-dir "C:\Program Files\Android\Android Studio"flutter config --android-sdk "<path-to-android-sdk>"flutter doctor --android-licensesflutter create <project-name>cd <project-name>Follow the steps in this guide to install flutter for your particular Operating System.
Create and Add Firebase to Your App:
After installing and creating a new GIS flutter project, goto Firebase to create a new project, and follow this guide to learn how to add Firebase to your Flutter app.
Adding Necessary Plugins to the pubspec.yaml File
To develop our flutter GIS app, we need to add some external plugins created by other developers to make creating our flutter app easier. The list of plugins we would be using are:
After adding these to your pubspec.yaml file, navigate to your terminal and run the following command to download the external extensions from the internet:
flutter pub getAdd the Maps SDK and Get API Key from Google
To use Google Maps in your app, you need to get an API key from Google. Go to Google Cloud Platform to create a new project. Select the project you just created, and navigate to the credentials to create a new API key.
Copy your API key and navigate to android>app>src>main>AndroidManifest.xml to add the below code to your flutter app:
<meta-data android:name="com.google.android.geo.API_KEY" android:value="YOUR COPIED API KEY"/>Updating the main.dart File
In the main.dart file, we import the different packages we need to be used for our app. Add the WidgetFlutterBinding class that is used to interact with the Flutter engine, and then initialize Firebase. Since its plugin needs to use platform channels to call the native code, which is done asynchronously.
Add Google Map to Your GIS Flutter App
Create a Google map by importing the Google maps flutter package to your screen and using the GoogleMap widget to define the map’s properties. Define the GoogleMapController used to control the instance of the map.
Set the initial position of the map, the viewpoint from which the world is shown in the map view.
Updating the Screen With a Zoom Slider and a Geopoint Button
Use the Positioned widget to add a Slider and an IconButton to the Stack of your screen.
Get Location and Animate to the User’s Current Location
With the geolocator plugin, we can get the coordinates(latitude and longitude) of a user’s current location. To enable your device to provide the correct data, follow the Android and iOS specifics that are required for the geolocator to work correctly.
We then create a function to move the camera to the current position, on click of a button. Also see how to enable location dialog in Android with Java.
Save Locations to the Firebase Database
The Geoflutterfire package would create a structure we can save to the database, including a Geohash of the locations.
Next, we set up a value for Firestore and the Geofire client. A Geofirepoint is a special data structure that is responsible for calculating the Geohash.
Query the Database and Update the Markers
This step includes listening to the stream of data from Firestore and updating the positions in real-time.
The “_startQuery” method creates a subscription with the default radius, then uses “switchMap” to get the correct items from the database. The listen callback will repaint the markers whenever the radius changes or the underlying data changes.
Make sure to cancel the stream with the dispose method when the widget is destroyed.
Running the GIS Flutter App
To run our GIS Flutter application on any platform, run the following command in your terminal:
flutter run
Learning Tools
- Flutter Docs: This is a comprehensive reference provided by the Flutter development team. It is a guide to go through before searching elsewhere.
- Stack Overflow: This is another useful online platform where a community of developers help learn, share and fix programming problems.
- Pub: This consists of packages for Dart and Flutter apps.
Learning Strategy
To be able to complete this Flutter project, you should have a basic knowledge of how flutter, firebase and dart programming works and be able to use the above tools. I also recommend the use of google search in case you get stuck at any point.
Reflective Analysis
The GIS flutter app is a useful tool for tour guides. It helps the users navigate their ways in real-time and make good use of the geographic information provided.
Conclusion
The step-by-step guide shows you how to create and manage real-time locations on the map. If you think someone else could benefit from this guide, kindly spread the word and share.
I have tried out the functionality you demonstrated in this post and it worked well. It’s a functionality I will be looking for an opportunity to implement in a future project.
To readers just starting out in Flutter, this post includes a number of concepts and uses external technologies that you should try to understand so that you can adapt the project to your specific use case with confidence.
I also made some suggestions to the author, which he quickly addressed.
I will be evolving this project in my spare time and look forward to using it in full fledged project.