Many applications require users to pinpoint a location from a map (most likely Google Map). The specific coordinates will then be used by the app to deliver certain functions or services. Ride hailing, food delivery and house rental services are some of the most common services which require users to specify their locations. I promise at the end of this article you will know enough to implement basic location-related functionalities using MapView and Geolocation.

MapView is a Flutter plugin that lets us display inline static map and interactive map. Geolocation is another Flutter plugin which gives us the power to retrieve the user’s current location. Together they serve a very useful and practical purpose — allowing user to search for a place in the vicinity. Don’t worry about Geolocation for the time being. We will start with MapView first.

MapView (inline static map)

I will use the scaffold app provided by Flutter, stripping away the counter and the text. I will change the add floating action button to map floating action button, which will be configured to show an interactive map view for user to choose a location.

To configure your app to use the plugin, please follow the instructions on their Readme. We need a Google API key so that Google Map can identify who is using their service. This means we have to create a project on Google Console (Google Console allows us to use all sorts of services provided by Google) and create an API key from there. Then install and import the plugin.

Let us first create a static map, which is basically an image (non-interactive) of a map on the screen.

Note that we need to separately enable Maps Static API in your Google Console aside from Maps SDK for Android/IOS.

We instantiate StaticMapProvider using our API key. Then we use it to get a uri by specifying a location — Portland, and a zoom level of 14. If you live near Portland, please share this article to one person who knows Flutter, or needs to know Flutter.

We then create an image using our imageUri which links to a static map. Ensure that there is internet connection since we are requesting an image of the static map from Google Map. I wrapped the image in a ClipRect and Center to make it look slightly nicer.

You should see this at this juncture:

If there is an error displaying the static map, relaunch your virtual device.

Now we are done with displaying a static map. We want the user to interact with the map so that they can drag, zoom and select a location in order to do whatever you app wants to do with the coordinates.

To do this, we need to instantiate a MapView object by first specifying our API key.

Remember in the beginning I mentioned that I will change the add floating action button (fab) to map floating action button (fab) in the initial scaffold? We have come to the point of using the map fab to display an interactive map view. What will happen is when the user presses the fab, an interactive map pops up, and we want the user’s current location to show up in the map so that the user can navigate from that location. We have come to the part where we need to use the Geolocation plugin. We will come back to using our MapView object later.

Geolocation

If you follow along from the beginning, you now only need to install and import the plugin. Else, you need to read their Readme for instructions to configure your project. Our app now has one problem after importing map_view and geolocation plugins. The reason is each of them defines a class with the same name — Location. The IDE cannot resolve the conflict when we want to create a Location object in our app. To resolve this, we simply import the geolocation plugin as geo.

We create a currentLocation field specifying geo.Location as the class:

Let’s create a method to get the user’s current location and assign it to our newly created currentLocation variable. We call the method as soon as we initialize our state because we don’t want our currentLocation variable to be null.

At this point when I ran the app, I encountered some dependency error. If you encountered similar problem, you may refer to this Stackoverflow discussion, or drop a comment below so I (and other readers) may help you.

Now when you run the app, the app should request the user for the his/her current location:

We are now well equipped to code our interactive map! (yay)

MapView (interactive map)

Let’s create the callback for our map fab — _showMapView. Let me walk you through what we want the callback does: When the interactive map pops up, we are free to select whichever point/coordinates we desire. Then we can press a confirmation button which registers our choice, or we press a cancel button which does nothing but navigate back to the previous page. Let’s create another variable similar to currentLocation but not exactly. We will call this variable selectedLocation. Now, instead of using the Location class defined by Geolocation plugin, we use the Location class defined by MapView plugin. The reason is because we’re not allowed to explicitly construct a Location object using Geolocation. Geolocation plugin is supposed to detect user’s current location and implicitly construct a Location object, rather than letting the programmer to explicitly construct one. Luckily, MapView plugin allows us to construct a Location.

Our _showMapView callback:

Let’s break down this chunk of code:

mapView.show() basically displays a screen which is the interactive map itself. In the MapOptions object, we create two toolbar actions — close and confirm, each distinguised by the id we provide. The id for the close button is 1 and 2 for the confirm button. mapView.onReady().listen() accepts a callback which is invoked when the map shows up. Here we set a marker indicating the user’s previously selected location or current location. mapView.onTapped().listen() accepts a callback which is invoked when the user taps anywhere on the map. Here relocate the marker to the position tapped by the user. mapView.onToolbarAction().listen() accepts a callback which gets invoked when the user taps any of the toolbar actions we created — close and confirm buttons. When the close button is tapped, we dismiss the map; When the confirm button is tapped, we reset selectedLocation and recreate a static map now with a marker indicating the new selectedLocation.

Now you know how to display an inline map, allow user interact with the map to select a specific location and retrieve the user’s current location!

Peace out.

To view the full source code, visit my github repository: