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

Google sign-in plugin — A plugin that makes the authentication and sign-in process easier. Firebase plugin — Provides easier access to the database and negates the need to use servers in the middle to handle requests. 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.

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



cd Trovami

flutter run //this will run the app on your simulator git clone https://github.com/Samaritan1011001/Trovami.git cd Trovamiflutter 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.