Google Maps key dynamically add in Flutter

Instead of hard coding, Google maps API key in AndroidManifest.xml and AppDelegate.swift. We can change the Google Maps key dynamically anytime.

We can store the Google Maps key on the server and can get using the rest API. Map key can change the key at runtime after getting from the server.

Check out more about our Flutter app development.

How to change the google maps API key dynamically?

We have to add a key at run time in native code AndroidManifest.xml and AppDelegate.swift. Flutter provides a way to communicate with native code through the Flutter platform channel.

Flutter Dart Code Implementation :

Let’s check implementation at Fluter’s Dart code end.

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  runApp(MaterialApp(
    title: 'Flutter Google Maps API Key',
    theme: ThemeData(
      primarySwatch: Colors.blue,
    ),
    home: MyHomePage(),
  ));
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  ///Declare your flutter channel
  static const METHOD_CHANNEL = const MethodChannel('com.map_api_key.flutter');

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Google Maps API Key'),
      ),
      body: Center(
        child: Text(
          'You have to call Rest API to get the Google Maps API key from the server.',
        ),
      ),
    );
  }

  @override
  initState() {
    super.initState();

    ///Pass your Google maps API key which has received from the server.
    _setGoogleMapApiKey("Your Google Maps API key");
  }

  Future<void> _setGoogleMapApiKey(String mapKey) async {
    /// Map data for passing to native code
    Map<String, dynamic> requestData = {"mapKey": mapKey};

    METHOD_CHANNEL.invokeMethod('setGoogleMapKey', requestData).then((value) {
      /// You can receive result back from native code
    });
  }
}

import 'package:flutter/material.dart';

import 'package:flutter/services.dart';

void main() {

runApp(MaterialApp(

title: 'Flutter Google Maps API Key',

theme: ThemeData(

primarySwatch: Colors.blue,

home: MyHomePage(),

));

}

class MyHomePage extends StatefulWidget {

@override

_MyHomePageState createState() => _MyHomePageState();

}

class _MyHomePageState extends State<MyHomePage> {

///Declare your flutter channel

static const METHOD_CHANNEL = const MethodChannel('com.map_api_key.flutter');

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text('Flutter Google Maps API Key'),

body: Center(

child: Text(

'You have to call Rest API to get the Google Maps API key from the server.',

);

}

@override

initState() {

super.initState();

///Pass your Google maps API key which has received from the server.

_setGoogleMapApiKey("Your Google Maps API key");

}

Future<void> _setGoogleMapApiKey(String mapKey) async {

/// Map data for passing to native code

Map<String, dynamic> requestData = {"mapKey": mapKey};

METHOD_CHANNEL.invokeMethod('setGoogleMapKey', requestData).then((value) {

/// You can receive result back from native code

});

}

Native Android Code Implementation:

Let’s check implementation at Native Android end.

We have to add meta data in AndroidManifest.xml.

<meta-data
            android:name="com.google.android.geo.API_KEY"
            android:value= ""/>

<meta-data

android:name="com.google.android.geo.API_KEY"

android:value= ""/>

Receive Google Maps API key from Flutter Channel.

import android.content.pm.PackageManager
import android.util.Log
import androidx.annotation.NonNull
import io.flutter.embedding.android.FlutterActivity
import io.flutter.embedding.engine.FlutterEngine
import io.flutter.plugin.common.MethodChannel

class MainActivity : FlutterActivity() {
    private val CHANNEL = "com.map_api_key.flutter" // Unique Channel

    override fun configureFlutterEngine(@NonNull flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)

        MethodChannel(
            flutterEngine.dartExecutor.binaryMessenger,
            CHANNEL
        ).setMethodCallHandler { call, result ->
            if (call.method == "setGoogleMapKey") {
                val mapKey = call.argument<String>("mapKey")
                mapKey?.let { setMapKey(it) }
            } else {
                result.notImplemented()
            }
        }

    }

    private fun setMapKey(mapKey: String) {
        Log.d("Tag", "_setMapKey ==>${mapKey}")

        try {
            val applicationInfo =
                packageManager.getApplicationInfo(packageName, PackageManager.GET_META_DATA)
            applicationInfo.metaData.putString("com.google.android.geo.API_KEY", mapKey)
        } catch (e: PackageManager.NameNotFoundException) {
            e.printStackTrace()
        }
    }
}

import android.content.pm.PackageManager

import android.util.Log

import androidx.annotation.NonNull

import io.flutter.embedding.android.FlutterActivity

import io.flutter.embedding.engine.FlutterEngine

import io.flutter.plugin.common.MethodChannel

class MainActivity : FlutterActivity() {

private val CHANNEL = "com.map_api_key.flutter" // Unique Channel

override fun configureFlutterEngine(@NonNull flutterEngine: FlutterEngine) {

super.configureFlutterEngine(flutterEngine)

MethodChannel(

flutterEngine.dartExecutor.binaryMessenger,

CHANNEL

).setMethodCallHandler { call, result ->

if (call.method == "setGoogleMapKey") {

val mapKey = call.argument<String>("mapKey")

mapKey?.let { setMapKey(it) }

} else {

result.notImplemented()

}

private fun setMapKey(mapKey: String) {

Log.d("Tag", "_setMapKey ==>${mapKey}")

try {

val applicationInfo =

packageManager.getApplicationInfo(packageName, PackageManager.GET_META_DATA)

applicationInfo.metaData.putString("com.google.android.geo.API_KEY", mapKey)

} catch (e: PackageManager.NameNotFoundException) {

e.printStackTrace()

}

Native IOS Code Implementation:

Let’s check implementation at Native IOS end.

import UIKit
import Flutter
import GoogleMaps

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
    override func application(
        _ application: UIApplication,
        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
    ) -> Bool {
        GeneratedPluginRegistrant.register(with: self)
        
        let controller : FlutterViewController = window?.rootViewController as! FlutterViewController
        
        let flutterChannel = FlutterMethodChannel(name: "plugins.flutter.io/firebase_messaging_background",
                                                  binaryMessenger: controller.binaryMessenger)
        
        flutterChannel.setMethodCallHandler({
            (call: FlutterMethodCall, result: @escaping FlutterResult) -> Void in
            
            if call.method == "setGoogleMapKey" {
                
                if let jsonResult = call.arguments as? Dictionary<String, AnyObject> {
                    let googleMapsApiKey =  jsonResult["mapKey"] as? String ?? ""
                    GMSServices.provideAPIKey(googleMapsApiKey)
                }
                
            } else {
                result(FlutterMethodNotImplemented)
                return
            }
        })
        
        return super.application(application, didFinishLaunchingWithOptions: launchOptions)
    }
}

import UIKit

import Flutter

import GoogleMaps

@UIApplicationMain

@objc class AppDelegate: FlutterAppDelegate {

override func application(

_ application: UIApplication,

didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?

) -> Bool {

GeneratedPluginRegistrant.register(with: self)

let controller : FlutterViewController = window?.rootViewController as! FlutterViewController

let flutterChannel = FlutterMethodChannel(name: "plugins.flutter.io/firebase_messaging_background",

binaryMessenger: controller.binaryMessenger)

flutterChannel.setMethodCallHandler({

(call: FlutterMethodCall, result: @escaping FlutterResult) -> Void in

if call.method == "setGoogleMapKey" {

if let jsonResult = call.arguments as? Dictionary<String, AnyObject> {

let googleMapsApiKey = jsonResult["mapKey"] as? String ?? ""

GMSServices.provideAPIKey(googleMapsApiKey)

}

} else {

result(FlutterMethodNotImplemented)

return

}

})

return super.application(application, didFinishLaunchingWithOptions: launchOptions)

}

I hope this blog will help to set Google Map API key dynamically.

Happy Learning 🙂

Reference Links:

https://mobikul.com/flutter-platform-channel/

https://flutter.dev/docs/development/platform-integration/platform-channels

yogendra singh 28 April 2023

. . .

2 comments

fbo Jun 21, 2022 at 5:21 pm

– The Android part is outdated, please update this (fix is too long to post in comments).
– Please add the file / location of where to add the native code for Android and iOS (useful for people who do not know the Android / iOS structure):
Android: ‘MainActivity.kt’ located in ‘/android/app/src/main/kotlin/’
iOS: ‘AppDelegate.swift’ lcoated in ‘/ios/Runner/’
– There is a big fault in the iOS code. The FlutterMethodChannel’s name is set to “plugins.flutter.io/firebase_messaging_background”. This should be “com.map_api_key.flutter”.

Not the best tutorial, not even tested (see last point). But unfortunately the only one that explains both platforms.

Christian Aug 25, 2022 at 10:12 pm
Hi fbo,

How did you manage to get around it?

On IOS I managed to make it work.

But on android it doesn’t seem to update the key.

Reply

Flutter: Add Google Maps API key dynamically

How to change the google maps API key dynamically?

Flutter Dart Code Implementation :

Native Android Code Implementation:

Native IOS Code Implementation:

Leave a Comment Cancel Reply

2 comments

Flutter: Add Google Maps API key dynamically

How to change the google maps API key dynamically?

Flutter Dart Code Implementation :

Native Android Code Implementation:

Native IOS Code Implementation:

Leave a Comment Cancel Reply

2 comments

Message Sent!