Displaying maps is a core functionality of many mobile apps – Google Maps, Yelp, Foursquare, Uber, Snapchat, UberEats, etc – all popular apps have certain map features. Let’s see how we can implement maps in a Flutter apps, in order to make interactive & playful user experiences.
The Flutter ecosystem is flourishing and will definitely make a huge mark in the near future as one of the most established cross-platform mobile application development frameworks. The community is rapidly growing and there are already many powerful libraries available already. In this tutorial, we are going to make use of the googler_maps_flutter package in order to display maps in our Flutter apps.
Maps are used in applications that deal with navigation and delivery such as Yelp or UberEats, shopping applications, geolocation apps, etc. We can use it to show locations, track locations, real-time navigation, etc. In this tutorial, we are going to use the Google Maps API from the Google Developer Console. The idea is to integrate the Google API key equipped with Android Google map SDK to our Flutter project. Then, we will use the mentioned package to show the map on the app screen. We will also work with markers and their customizations.
So, let’s get started!
Create a New Flutter Project
First, we need to create a new Flutter project. For that, make sure that the Flutter SDK and other Flutter app development-related requirements are properly installed. If everything is properly set up, then in order to create a project, we can simply run the following command in the desired local directory:
- flutter create googleMapExample
After the project has been set up, we can navigate inside the project directory and execute the following command in the terminal to run the project in either an available emulator or an actual device:
- flutter run
#flutter tutorials #flutter
