Google Maps, we all are quite aware of the fact of how crucial Maps are in our life, from locating a place to locating nearby shops, in our daily commute, taxi, food deliveries. The first thing to observe is how important maps are? and the second thing to observe is that most of the apps these days have maps in them, so Maps in App development are becoming a serious thing from day to day. Now when we are talking about development in Flutter, its a fact that maybe you come across a situation where you want to implement maps in Flutter and the first question after that thought comes is HOW TO IMPLEMENT IT? or WHERE TO START FROM?

In this article, we’ll answer your questions like, maps in Flutter, how to use maps in Flutter, implement google maps in Flutter and will help you from setting it up to creating a small module using Maps in Flutter.
 In this article, we’ll be using the Google Maps plugin for Flutter which has been developed by Flutter team themselves.

Where to start from?

Now, that you’re here, you’ll be curious about a particular question, from where you should I start? It’s probably the first thing that comes to our mind whenever we start with anything, isn’t? Don’t worry, we’ll guide you from prerequisite required to displaying the map on your screen and then moving on to what other things can you do using this plugin. So, Let’s start with setting up your project which will stand as the base on which your map will be displayed.

The setting up process includes two things, namely:

Adding the plugin

1. As you know, we’ll be using the Google Maps Plugin which you can find here. This is the official Google Maps plugin developed by the Flutter team.
 2. Add the plugin as the dependency in the pubspec.yaml file, as shown below.
 3. Now, get the packages using the flutter packages get command.

https://gist.github.com/Aditsyal/ffc8fca87002172fdbdaaed2648fa4e1#file-pubspec-yaml

Integrating Google Maps API key

The next step is the last step before you could start coding for the map in Flutter and undoubtedly the important one as this step involves integrating your Google Map API key into your project for both the platforms Android and as well as iOS.

For Android
– Create the Google Maps API key from here
– Add the API key in the AndroidManifest.xml file(android/app/src/main/AndroidManifest.xml).

https://gist.github.com/Aditsyal/ad5491a60fc84918af0492b5a933d657#file-androidmanifest-xml

For iOS
– Create the Google Maps API key from here
– Add the API key in the AppDelegate.m file(iOS/runner/AppDelegate.m).

https://gist.github.com/Aditsyal/e4e9054b84f691ebafd12f67dea1fea9#file-appdelegate-m

– Now, add a setting to app’s Info.plist file(iOS/runner/Info.plist).

https://gist.github.com/Aditsyal/eee7d791e44b7ac73b0facc9e7b608a3#file-info-plist

If you’ve done everything as said up till now then you’re all set up but there might be some issues regarding the API key setup which we’ll be answering towards the end of the article. Now, you can start using the GoogleMap widget in Flutter.

Using GoogleMap Widget

So, now that you’ve setup your project and we guess all went good, you can display the map using the GoogleMap widget in Flutter.

https://gist.github.com/Aditsyal/e5115389fd70f6d5628c25a25f88a1d0#file-googlemapwidget-dart

This snippet of code will help you display the map on your app, just with few lines of code and you get the basic map displayed on the screen, you can scroll it, zoom in, zoom out are the basic gestures by default. Look at the snapshot below to understand.

Points to understand from the above snippet:

– initialCameraPosition: This gives the starting position of the map when it is opened for the first time. Here, we gave the Latitude and Longitude of Egypt, using the CameraPosition Widget which takes the LatLng in its target property. The Camera here describes the view of the user i.e what position in the map should the user be able to view.

– GoogleMapController: It’s the controller for a single GoogleMap instance running on the host platform. This controller is like any other controller be it TextEditingController, this manages various functionalities like camera position, zoom, animation, etc.

– onMapCreated: This method is called when the map is created and takes the GoogleMapController as its parameter.

GoogleMap constructor:

Now, that you’re able to display the basic map with least of its functionality we’ll move forward to see what all the functionality does this widget holds as clearly just knowing this won’t be sufficient enough. So, let’s start with getting to know the properties that the GoogleMap widget gives us, here is the constructor of the GoogleMap widget:

https://gist.github.com/Aditsyal/fa2e2d291c74114efc344e5121916afc#file-googlemapconstructor-dart

This constructor tells us the various parameters that the widget takes, so here we can see the list of functionality that this widget provides using the plugin. We already gave you a brief about the onMapCreated and the initialCameraPosition properties, so we’ll be skipping these and will give you a brief about the remaining others,

1. gestureRecognizers: This property tells us which gestures should be consumed by the map. It is possible for other gesture recognizers to be competing with the map on pointer events, e.g if the map is inside a ListView, the ListView will want to handle vertical drags. The map will claim gestures that are recognized by any of the recognizers on this list. When this set is empty or null, the map will only handle pointer events for gestures that were not claimed by any other gesture recognizer.

2. compassEnabled: This property tells us if the map should show a compass when rotated. By default, the value is set to true.

3. cameraTargetBounds: This property tells us the bounds for the map camera target. It is used with GoogleMapOptions to wrap a LatLngBounds value. This allows distinguishing between specifying an unbounded target from not specifying anything.

4. mapType: This property tells us about the type of Map tiles to display. There are five types of tiles
 — none: Do not display map tiles.
 — normal: Normal tiles with traffic, labels and subtle terrain information.
 — satellite: Satellite imaging tiles (aerial photos).
 — terrain: Terrain tiles (indicates type and height of terrain).
 — hybrid: Hybrid tiles (satellite images with some labels/overlays)

5. minMaxZoomPreference: This property tells us Preferred bounds for map camera zoom level. It’s used with GoogleMapOptions to wrap min and max zoom.

6. rotateGesturesEnabled, scrollGesturesEnabled, zoomGesturesEnabled, tiltGesturesEnabled: These fours properties are responsible for the respective gestures on the map like, rotate, scroll, zoom and tilt.

7. myLocationEnabled: This property tells us whether “My Location” layer should be shown on the map. This layer includes a location indicator at the current device location, as well as a My Location button.

Exploring the GoogleMap Widget:

We got the basic map displayed and we got to know what functionality it can have, let us explore some of the functionality practically here:

Device Location:

Let’s start by displaying the user’s location on the map. In the properties above, we came across a property called myLocationEnabled, this property is responsible to display the user’s location on the map.

1. Set the value of myLocationEnabled to true.

2. Add location permission to both native platforms of your app.

– On Android, add either
 <uses-permission android:name=”android.permission.ACCESS_FINE_LOCATION” /> or
 <uses-permission android:name=”android.permission.ACCESS_COARSE_LOCATION” /> to your AndroidManifest.xml file. ACCESS_COARSE_LOCATION returns a location with an accuracy approximately equivalent to a city block, while ACCESS_FINE_LOCATION returns as precise a location as possible, although it consumes more battery power.

– On iOS, add a “NSLocationWhenInUseUsageDescription” key to your Info.plist file. This will automatically prompt the user for permissions when the map tries to turn on the My Location layer.

So, by writing a few lines of code to set permissions on the native platforms and by setting myLocationEnabled property to true we get the user’s current location.

Changing MapType:

You can change the type of Map by using the mapType property of GoogleMap Widget and can set to any type, satellite, terrain, hybrid or normal.

We also created a tap to switch the mapType using a floatingActionButton, as we know GoogleMap is just like any another widget in Flutter so that means we can use the Map inside other widgets, so we placed the GoogleMap widget inside the Stack and added a floatingActionButton and gave it the functionality to switch the map between the normal and satellite, follow the code snippet to know more,

https://gist.github.com/Aditsyal/6e50ae85d1d1a99749a128ca10096c53#file-maptype-dart

Enable and Disable Gestures:

GoogleMap widget has gestures property in it, namely rotateGesturesEnabled, scrollGesturesEnabled, zoomGesturesEnabled, tiltGesturesEnabled:

https://gist.github.com/Aditsyal/cd5e487cff3e2d7f53463b852f66ef0a#file-googlegestures-dart

Moving the Camera around:

Now, let’s try to move the camera to a specified Latitude and Longitude, for that we use the animateCamera method which animates the change of map position. It takes the CameraUpdate as it’s parameter which has various features in itself, like

– newLatLng(LatLng latLng): It moves the camera to a specified geographical location.
– newLatLngBounds(LatLngBounds bounds, double padding): It returns a camera update that transforms the camera so that the specified geographical bounding box is centered in the map view at the greatest possible zoom level.
– newLatLngZoom(LatLng latLng, double zoom): It moves the camera to a specified geographical location with a zoom level.
– scrollBy(double dx, double dy): It returns a camera update that moves the camera target the specified screen distance.
– zoomBy(double amount, [Offset focus]): It returns a camera update that modifies the camera zoom level by the specified amount.
– zoomIn(), zoomOut(): It moves the camera closer or further away from the surface of the earth.
– zoomTo(double zoom): It returns a camera update that sets the camera zoom level.

These are the certain ways of moving the camera around with respective functionality of their own. Feel free to use them as required by you. Here we gonna use newLatLngZoom(LatLng latLng, double zoom) to move the camera to a specified location using a certain level of zoom.

We created a method _goToNewYork in which we used the animateCamera method to animate the camera move on the basis of latitude and longitude of NewYork with a zoom of 10. Then we created a drawer using the drawer property of Scaffold to display it. Let us show you the code snippet,

https://gist.github.com/Aditsyal/59205c109ded25f043478d83ab839c0f#file-movethecamera-dart

So, we can see the animated movement of the camera from one location to another using the latitude and longitude. We created a bunch of other location and put them in the drawer for you to try move to different location. The GitHub link of the module will be provided in the end.

Set the Marker on the map:

Now that we’re able to move the camera around on the basis of specific latitude and longitude, we’ll try to put the marker on the location we move our camera. Let’s suppose you want to move to New York, so when the camera moves to new york you can see a marker set on the particular location.
 To achieve this we’ll use the markers property of GoogleMap widget which takes a set of marker.

https://gist.github.com/Aditsyal/0f0297594e3ff63912113a6b2dbfac5f#file-setthemarker-dart

Now we want the marker to be set as the user moves to the specified location, so we created a marker inside the _goToNewYork method inside the setState() method.

https://gist.github.com/Aditsyal/7d0f293521d085e8e9a6cb32fc79dd21#file-markers-dart

Marker marks a geographical location on the map. Here, the markerId is the unique id of each marker and position property takes the LatLng of the location. This gives us

Now, let’s add some information on the marker so that when it’s tapped the information is displayed. For this we’ll use the infoWindow property of the Marker widget which gives us a title, snippet, to give the title to the marker and desc to the marker.

https://gist.github.com/Aditsyal/d6709ecb54efa5bd2e227a270c7c5120#file-infowindow-dart

Now that we added the marker on the map at our desired location using the latitude and longitude of the place and also gave the marker some text to be displayed when tapped. We just showed the implementation of how to do it, know it totally depends on you how to use it and how to implement it. You can find the complete module on github.

Conclusion:

GoogleMap widget is just like any other widget in Flutter that means this widget can be placed inside any other widget, like Listview, Stack, Column, Row, Container and so on, you can even transform it, clip it but we know why would someone clip it we’re just telling you that you can perform anything on the map as its a widget. So be creative, explore more and even let us know of something you come across.

Do let us know how was the article and wish we could cover everything in the article, every feature but that would just mean writing a book and that’s not what you want and what we want. We tried to explain from the root from how to install it, to some basic feature which you might require in regular use if you’re using map.

Aditsyal/flutter_maps
Google Maps in Flutter. Contribute to Aditsyal/flutter_maps development by creating an account on GitHub.github.com

From Our Parent Company Aeologic

Aeologic Technologies is a leading AI-driven digital transformation company in India, helping businesses unlock growth with AI automation, IoT solutions, and custom web & mobile app development. We also specialize in AIDC solutions and technical manpower augmentation, offering end-to-end support from strategy and design to deployment and optimization.

Trusted across industries like manufacturing, healthcare, logistics, BFSI, and smart cities, Aeologic combines innovation with deep industry expertise to deliver future-ready solutions.

Feel free to connect with us:
And read more articles from FlutterDevs.com

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.

Need expert help building your Flutter app? Talk to FlutterExperts for architecture, development, and consulting support.

What is SharedPreferences?

SharedPreferences is used for storing data key-value pair in the Android and iOS.

SharedPreferences in flutter uses NSUserDefaultson iOS and SharedPreferences on Android, providing a persistent store for simple data.

Why use SharedPreferences in Flutter?

Suppose you wanna save a small value (a flag probably) that you wanna refer later sometime when a user launches the application. Then shared preference comes into action.

We do not use SQLite for saving small values because then you will need to write lengthy codes and supporting classes.

Shared Preference let you read and write key-value pair in a couple of lines easily. But always remember, shared preference is not a solution for you to keep complex relational data.

How to use SharedPreferences in Flutter?

Before using SharedPreferences, you should know that Flutter SDK does not have support SharedPreferences but fortunately, the shared_preferences plugin can be used to persist key-value data on disk.

Implementation

Step 1: Add the dependencies

Add dependencies to pubspec.yaml file.

dependencies:
  flutter:
    sdk: flutter
  shared_preferences: "<newest version>"

Step 2: Import shared_preferences.dart

import 'package:shared_preferences/shared_preferences.dart';

Step 3: Save data

We can only add int, String, double and bool using SharedPreferences.

There are setter methods in the SharedPreferences class which take two parameters, key and value.

keys are only string values

Saving String value

https://gist.github.com/ashishrawat2911/0cdad3ca524d06a455d0986687567848#file-addstringsf-dart

Saving int value

https://gist.github.com/ashishrawat2911/d57dbfd9fc465cfe1c20f65be725cef2#file-addintsf-dart

Saving double value

https://gist.github.com/ashishrawat2911/bac6897604ac01b544915a3ef25c4aff#file-adddoublesf-dart

Saving boolean value

https://gist.github.com/ashishrawat2911/362c16deae76b40b8d2b357ebc68269c#file-addboolsf-dart

Step 4: Read data

When we are reading the data from the storage through SharedPreferences we only required to pass the key only.

https://gist.github.com/ashishrawat2911/2bc3d85c0a31bd1c2bf9009a8f865f88#file-readvaluessf-dart

If the value is not present in the storage then we might get a null value.
To handle this we can use

int intValue= await prefs.getInt('intValue') ?? 0;

Step 5: Remove data

To remove the data from the storage we provide the key in the remove(String key) method.

https://gist.github.com/ashishrawat2911/e9ba0b8bc3fcf1aae1fe7c2ca78cfc2d#file-removevaluessf-dart

Check value if present or not?

SharedPreferences prefs = await SharedPreferences.getInstance();

bool CheckValue = prefs.containsKey('value');

containsKey will return true if persistent storage contains the given key and false if not.

Thanks for reading this article ❤

Connect with me on Linkedin and Github

From Our Parent Company Aeologic

Aeologic Technologies is a leading AI-driven digital transformation company in India, helping businesses unlock growth with AI automation, IoT solutions, and custom web & mobile app development. We also specialize in AIDC solutions and technical manpower augmentation, offering end-to-end support from strategy and design to deployment and optimization.

Trusted across industries like manufacturing, healthcare, logistics, BFSI, and smart cities, Aeologic combines innovation with deep industry expertise to deliver future-ready solutions.

Feel free to connect with us:
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.

Related: SMS Using Twilio In Flutter

Related: Working with Callback In Flutter

Frequently Asked Questions

Need expert help building your Flutter app? Talk to FlutterExperts for architecture, development, and consulting support.

The road to cross-platform app development has been jam-packed lately, the main reason being its alluring nature of single codebase where developers have to write code once and that code can be used to develop apps for different platforms. I know! This is fun as,

1. Single Codebase
2. Reduced Development time
3. Reduced Development Cost

and of course, there are disadvantages too, no doubt.

Flutter is the latest entry to the cross-platform app development, developed by Google and it’s gaining popularity day by day standing strong against its other competitors because of certain factors:

1. Development Time
2. Runtime performance
3. Good tooling support

However, apart from the various merits that it had established there are few demerits, one being Limited set of libraries.
Even though Flutter is backed by Google but being a relatively new framework it lacks support for 3rd party frameworks and any cross-platform environment depends on the native platform features such as Camera, Bluetooth, Location, etc. which can be accessed using Plugins.

Plugins?

Plugins are the wrapper of the native code like android(java or kotlin) and iOS(swift or Objective C). Plugins are written in platform-specific code to access the platform-specific features.

Flutter does support using packages and plugins contributed by other developers to its ecosystem. You can access Flutter packages and plugins from here.

How do things work underneath the hood?

Flutter’s platform specific API depends on message passing technique, this takes place in two steps. Firstly, Flutter uses the Platform channel as the medium to communicate between the Flutter app and host, the host being the iOS or Android part of the app. Secondly, the host receives the messages through the Platform channel and then it invokes the platform-specific APIs using the native programming language of the platform and sends back the feedback to the Flutter app asynchronously.

In detail, on the client side, the MethodChannel is used to send the messages and on the host side, MethodChannel on Android and FlutterMethodChannel on iOS is used to receive and send messages. All of this is done to make sure that the least amount of boilerplate code is used.

Plugins developed by FlutterDevs team:

The team at FlutterDevs had developed their own plugins of basic day to day needs like an image plugin which picks the images from the storage called image_galley, a QR plugin which scans and generates qr code, a camera plugin, and a location plugin, let’s see about them in detail:

image_gallery:

A flutter plugin to show all your images from the storage. You can get the plugin from here.

usage:

Future<void> loadImageList() async {
    List allImageTemp;
      allImageTemp = await FlutterGallaryPlugin.getAllImages;


    setState(() {
      this.allImage = allImageTemp;
    });
  }

qr_utils:

A flutter plugin to generate and scan QR codes. This plugin can be used to scan 1D barcode and 2D QR code. You can get the plugin from here.

usages:

1. Scan QR

final content = await QrUtils.scanQR;

2. Generate QR

Image image = await QrUtils.generateQR(content);

camera_utils:

A flutter plugin which does various works for you, it helps capture an image, pick an image, capture a video, pick a video and pick thumbnail from a video. You can get the plugin from here.

usages:

1. Capture an Image

final path = await CameraUtils.captureImage;

2. Pick an Image

final path = await CameraUtils.pickImage;

3. Capture a Video

final path = await CameraUtils.captureVideo;

4. Pick a Video

final path = await CameraUtils.pickVideo;

5. Pick a thumbnail from a video

Future<String> thumbPath = CameraUtils.getThumbnail(path);
   thumbPath.then((path) {
     setState(() {
       _thumbPath = path;
       print(path);
     });
   });

geo_location_finder:

A flutter plugin to get an accurate location on Android and iOS devices. You can get the plugin from here.

usages:

Future<void> _getLocation() async {
      Map<dynamic, dynamic> locationMap;

      String result;

      try {
        locationMap = await GeoLocation.getLocation;
        var status = locationMap["status"];
        if ((status is String && status == "true") ||
            (status is bool) && status) {
          var lat = locationMap["latitude"];
          var lng = locationMap["longitude"];

          if (lat is String) {
            result = "Location: ($lat, $lng)";
          } else {

// lat and lng are not string, you need to check the data type and use accordingly.
// it might possible that else will be called in Android as we are getting double from it.

            result = "Location: ($lat, $lng)";
          }
        } else {
          result = locationMap["message"];
        }
      } on PlatformException {
        result = 'Failed to get location';
      }

      if (!mounted) return;

      setState(() {
        _result = result;
      });
    }

These are some of the plugins generated by FlutterDevs. If you wanna create a plugin by yourself then you might want to read this article to walk you through the process of creating a plugin.

Creating a Flutter Plugin for Android and iOS | Image Gallery
Flutter plugin is the wrapper of the native code like android( Kotlin or java) and iOS(swift or objective c)…flutterdevs.com

I hope you liked the article and if you wanna convey something, be it a mistake then feel free to send the feedback in the comments.

Read other articles:

Developing Web Apps Using Flutter | Flutter for Web
Flutter was introduced back in May 2017 with the general idea of Cross-Platform app development initially for Android…medium.com

From Our Parent Company Aeologic

Aeologic Technologies is a leading AI-driven digital transformation company in India, helping businesses unlock growth with AI automation, IoT solutions, and custom web & mobile app development. We also specialize in AIDC solutions and technical manpower augmentation, offering end-to-end support from strategy and design to deployment and optimization.

Trusted across industries like manufacturing, healthcare, logistics, BFSI, and smart cities, Aeologic combines innovation with deep industry expertise to deliver future-ready solutions.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, and Twitter for any flutter related queries.

Related: Developing Web Apps Using Flutter

Related: Flutter App for Desktop

Related: Cupertino (iOS-style) ActionSheet in Flutter | Know Your Widgets

Need expert help building your Flutter app? Talk to FlutterExperts for architecture, development, and consulting support.