Flutter hands-on: Building a Live Location Sharing App

A post to help you understand Flutter with the help of Trova mi — My Live Location Sharing App!

Whether it is through workshops, tutorials or DIY manuals, to learn a new framework, all you need to do is pick a starting point. Sooner than later, you will find yourself becoming a pro in that skill.

This post is about my journey from knowing nothing about Flutter to knowing something about Flutter.

If you don’t know what Flutter is yet, it’s an SDK to build cross-platform mobile apps using Dart.

My Live Location Sharing App in Flutter — Trova mi! which means “Find Me” in Italian

Flutter doesn’t yet support the inline map view. But that did not stop me from doing my best to create Trova mi — An app that fundamentally depends on the map view.

Trova mi is built in Flutter with Firebase for the backend. The app lets you create a group and track the location of all the users in that group who have chosen to share their location. I used the Flutter’s in-house widgets and Firebase’s real-time database to store and retrieve information.

Dependencies

1. Google sign-in plugin — A plugin that makes the authentication and sign-in process easier.
2. Firebase plugin — Provides easier access to the database and negates the need to use servers in the middle to handle requests.
3. Google map view plugin — Provides a way to display map with markers.

Getting Started

Before we begin, make sure that you either have Android Studio, Visual Studio Code Editor, or IntelliJ IDE installed on your system.

Personally, I recommend using IntelliJ. I prefer IntelliJ because its debugging and deploying features are extremely well suited. You will also need to install a few Flutter and Dart plugins to support your code editor. Follow the steps from the below-given link to make sure that you have installed everything correctly and are now ready to write Flutter code.

IDE Setup - Flutter

Once you are done installing the plugins, go ahead and clone my GitHub repo into your system by typing the following commands in your terminal

git clone https://github.com/Samaritan1011001/Trovami.git
cd Trovami
flutter run //this will run the app on your simulator

If everything works as it should, you will see the Sign-In page of the app:

Sign-In Screen

Sign-Up Screen

Widget Tree

Now, before we jump into the code of my app, let’s take a look at the widget tree structure of the Sign-In Screen

Here, the MaterialApp widget is the root widget of the Sign-In screen. I have passed a SignInForm object to its home parameter and in return, I get an object that is referencing the widget tree of the Sign-In screen.

We now have a Scaffold widget whose body is a Container widget. This Container widget has a Column widget for its child which in turn has multiple children.

The Sign-In Screen has two parts — One part contains the name of the app while the other contains the input fields and buttons. I have used a Column widget as the parent widget because all of the elements on this screen need to be placed vertically.

main.dart

The execution of any Flutter app starts off the main function. The minimal Flutter app simply calls the runApp function with only the MaterialApp widget as its argument.

The MaterialApp widget has two arguments — Title and Home. The Home argument is provided with an object of the sign-in class. This object represents the entire first screen of the app.

Note: You will need to insert your own API Keys. For Android Devices, click here, and for iOS devices, click here.

The onGenerateRoute parameter is used to specify all the necessary routes in the app. I have 5 screens in my app and a name alias is used for each as shown below:

User Input

As I said before, the sign-in screen is divided into two main parts and are placed one after the other in a single column. The upper part is a simple Textwidget and the second item is simply another Column with five other items, which include two input text fields and three buttons.

I have used a customized Text widget for the input fields and a customized Button widget for the buttons. Let’s take a look at the Input field which is used inside a Form widget and how I customised it in a certain way.

I have used the above shownTextInputField widget and specified its decoration using the inputDecoration widget to decorated the text inside the box. To style my text box further, I have nested theTextInputField inside DecoratedBox widget as shown below:

Buttons

I have used an Inkwell widget to create the buttons for my app. An Inkwellwidget is a rectangular area of a Material that responds to touch. I have also added some decoration to make it look better.

Putting it all together

The inputTextField widgets are given as children to the Form widget. The Form widget calls the inputTextField widget’s onSaved functions to execute.

Firebase

Integrating Firebase into my app was pretty much a straightforward process. Firebase for Flutter CodeLab was extremely helpful in getting me started.

Once you end up with a reference that points to a node in the Firebase database.

final groupRef = FirebaseDatabase.instance.reference().child('groups');

In my Add Group screen, I let the users create a group by providing a group name and the members that need to be in it. I have also added a feature that will allow users to store the group details under a node called groupsIamIn.

Whenever a group is created:

1. The groupsIamIn list of the logged in user’s node is updated and the new group is added to it.
2. The groupsIamIn list of every other member of that group gets updated and the new group is added to it.
3. The group’s details are added to the group’s node.

Getting the Map to Come Alive

The Inline Map feature is yet to be supported by Flutter. This led me to use a MapView plugin created by AppTree Software.

This plugin provided me with several useful functions like the option to choose if the client should fetch the device’s location and display it on the screen. I used this feature to provide the users with a switch that would allow the users to choose if they want to share their location with their group.

Every time the user toggles the switch:

1. The app determines the group in which the user toggled the switch.
2. The app updates the user’s locationShare value from the group that is determined in the first step.

I have also added a View Map button that would trigger the plugin’s mapView with the list of all the member, their location, and the locationShare status of the logged in users.

So now I have the location of the currently logged in users of a group. But how do I change the location of the users who are sharing their live location?

For this, I used Firebase’s onChildChanged feature which basically gives me a callback everytime the child node has any changes in it.

I have added theonChildChanged listener to the user’s node so that every time an user’s location changes, I get a callback in which I first check if it’s a logged in user. But I first need the location of the other members in the group.

Next, the apps checks for users who have chosen to share their location. The app gets all the groups present and then checks against the group that the logged in user is viewing the map in.

After that, all the group members that are sharing their locations will get each other’s live location.

The app now has all the locations, which are now stored locally under currentLocations and call the showMap function along with the currentLocations of the members.

Now every time there was a change in any of the group member’s location, the app will get a callback and the updated location of the member is passed to the map.

You can get the full source code of this app at the following GitHub repo:

Samaritan1011001/Trovami

Also, check out Start Flutter — A library of free to download Flutter templates. All themes are open source for any use, even commercial. Download what you like and get started!

Much like NativeBase Market, we at GeekyAnts have created a one-stop shop for premium Flutter products called Flutter Market.

Interested in learning Flutter? Head on to FlutterLearn, our newest educational portal for Flutter.

FlutterLearn

I am Manoj N Bisarahalli, a budding new software engineer working at GeekyAnts. An enthusiastic learner trying to experiment and learn from anything and everything he can about the technology that’s guiding us to a brighter future. Thanks to Sanket Sahu and Rajat S for all the help and support that they gave me while writing this post.

And thanks to you for reading! I hope you found this post to be helpful. Please 👏 if you liked this article. Follow me on Twitter to know more about my dabbles with Flutter.