Flutter + Google Maps + Firebase
This is a sample project in wich well be Reading/Adding/Deleting markers, to/from Cloud Firestore. Markers are added on tap, to remove it, we will tap it then select the remove button.
First we create our project and add firebase. In our pubspec.yaml we add the core and the cloud store for database and the google maps flutter package. For Android if your minSdkVersion is set to 21 then multiDex will be enable by default, if not you need to enable it manually: Enable MultiDex
Then we’ll make this project structure:
In our main.dart we just route to our home page for our initial route:
Home page will be a list of options (I’ll be using it for following posts). Nothing weird just a ListView with ListTiles routing us to our options.
Now in order to use the google maps flutter package that we added earlier to the pubspec.yaml, we need to follow the instructions on the package page. We need to add our Maps API Key in our AndroidManifest.xml file in Android and in our application delegate in IOS.(I’ll be doing it only for android this time, feel free to folow the site instructions for IOS). If you need more step by step guide for this, here’s another post explaining a little more about it: https://emenaa.medium.com/create-maps-api-key-and-enable-maps-sdk-for-android-and-ios-270d0fac2672
Next we need to create an application on Firebase (if you dont have one yet). In order to do so, in our firebase console we need to create a new app, following the instructions on the page
Now we can go to our main widget “MarkerPage” in here we are going to add our map widget called “GoogleMap” .We need an initial camera position and a so we set this like this in our state
Then well stack two elevated buttons widgets, the first one just zoom in an specific zone (took this from the example page of the package) and the other one will be the one that removes a marker. Two things to notice we remove the zoom controls and the map toolbar because we dont want this to overlap wit our buttons.
You can see four functions, “_goToResort” ,“_handleTap”,“_readData” and “_removeMarker”. The First one is just an animated zoom to location in the map. Before continuing with the other functions, let’s add firebase capabilities to our widget. You can find the official guide in here. One important step is to make sure you have initialized FlutterFire, in our project i did it on the main.dart file like this:
Then we get an instance of firestore in or MarkerPage to be used in the widget, and now for the “_handleTap” function, this is goint to create a marker in our map, add a function for the onTap event so we can now which marker is selected and last add this marker to our firestore collection. Our firestore collection name is “places” and for our id will be using a number value (if you don’t set the id, firebase is goint to generate one).
The “_removeMarker” function just removes the selected marker (the one that is tapped) from our map and firestore as well.
Last the “_readData” function is the one that read our collection from firestore when the GoogleMap widget is being created in order to put our saved markers on our map. We are using a one time read, if some other app can add markers to the same collection and you want to see it in real time in your map, you should use the stream.
As a reference, here’s the collection we’re using:
This is how our MarkerPage widget looks like:
So that’s it. As you can see is not that hard to work with maps and firebase in flutter. The full code is available in here: https://github.com/menagit/fluttermedium
