Flutter – Saving/retrieving markers with Firestore

Hi Friends,

Hope you are all well. In our previous posts we have been talking about leaflet maps and flutter. In this post let’s see how to save markers onto a Firestore collection and retrieve them whenever needed.

To learn the basics of flutter get my course – Click here.

Other flutter courses – here. (Affliate link)

Let’s begin.

A screencast of this post.

Retrieving markers from Firestore and displaying them on a map.

Adding/Saving a new marker onto firestore.

 

First let’s see how to retrieve some marker coordinates from Firestore and show them on a map as markers.

To see how to configure your flutter app to use firebase kindly watch this video here.

To see how to read data from your firestore collection into your flutter app click here.

Now to use firestore in our application we need to make use of the cloud_firestore plugin. Go ahead and open pubspec.yaml and add the plugin as shown below.

That’s done.

Now in our previous post, we saw how to do some basic geocoding and this is the code we have so far.

If you don’t have this code / you want to know how this works, then kindly click here.

Now instead of loading an empty map we just need to make a call to firestore, get our markers from there and then load the markers along with the map right ?

Modify the code as shown below.

Whoa, that’s too much code., well, let’s break this down.

First of all I have moved a bulk of the code to a function called loadMap(). In this function we are returning a stream builder. So, what’s a stream builder. Wait, what’s a stream first of all ? Well, in simple terms, when water (or any other liquid) flows from one place to another over a period of time it’s called  a stream right ? Based on the size of the stream it becomes either a canal or a river; based on the amount of water flowing in the stream at any given time, we call it either flooded or dry.

A stream here refers almost to the same thing, except that here we use data instead of water. I.e., when values appear over a period of time it’s called a stream. A stream builder in simple terms is used to create/manage a stream and manipulate the data that arrives. Now in our code we have.

If you notice, I am creating a stream with data from the markers collection in firestore.

This is how the markers collection looks now.

markercoll

Each and every document has 2 fields one a geopoint and the other the name of the location pertaining to those coordinates.

Before the map loads up we are simply accessing all the documents from the firestore collection and adding them to the allMarkers List. This is then used in the map to present the map to the users.

Cool right ? Let’s move on.

Saving Markers:

Let’s see how to save markers on our map.

Already we have some code to show a dialog right? Now all we need to do is make use of it to receive user input and then geocode the location entered by the user, save it on to firestore. That’s it.

First add a text field in the dialog. In the addMarker() function simply add a text field to the children as shown below.

(Kindly declare String inputaddr first.)

Alright. Now in the addToList() function add as shown below.

This will geocode the address first. Then the coordinates will be stored as a geopoint() in the markers collection. That’s it.

Once the marker is added, the stream that we have written will pick it up as a new entry and add it to the map as a marker. Fine.

If you run the app now you will see the below screens.

Screenshot_20180723-220857

Now let’s try adding a marker shall we ? Tap on the + button on the app bar.

Screenshot_20180723-220921

3

Also notice that your marker is now added into firestore as well.

Hope this post helped you guys. If you found this helpful, kindly share it with someone and help them too.

Donate – here.

Join our flutter community – here.

Thanks for reading. Peace.. :)

 

Liked it? Take a second to support admin on Patreon!