flutter flavors for web in index.html and Android in AndroidManifest.xml

Question

I'm using google_maps_flutter for two flavors (development, qa). I configured AppDelegate.swift for the two flavors with this.

I now need to do those flavors on Android in android/app/src/main/AndroidManifest.xml:

<manifest ...
  <application ...
    <meta-data android:name="com.google.android.geo.API_KEY"
               android:value="YOUR KEY HERE"/>

And in web index.html:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

How would I do both of those?

I do already have android/app/src/dev and android/app/src/qa folders because they have google-services.json flavor configuration files. So maybe another AndroidManifest.xml in those folders? Also would it contain everything that the main one has?

No idea how to do web.

BeniaminoBaggins · Answer 1 · 2023-07-21T04:34:41.780

Android went from this in android/app/src/main/AndroidManifest.xml

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

To:

android/app/src/main/AndroidManifest.xml:

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

android/app/build.gradle (:

flavorDimensions "default"
productFlavors {
    development {
        dimension "default"
        resValue "string", "app_name", "Vepo Dev"
        resValue "string", "google_maps_api_key", "MY_DEV_MAPS_API_KEY"
        applicationIdSuffix ".dev"
    }
    qa {
        dimension "default"
        resValue "string", "app_name", "Vepo Qa"
        resValue "string", "google_maps_api_key", "MY_QA_MAPS_API_KEY"
        applicationIdSuffix ".qa"
    }
}

For the web, I did this in main.dart / main_development.dart/ main_qa.dart:

import 'package:universal_html/html.dart'; // <----- Had to import this, it's not in the article

void createScriptElement() {
  /// Create a new JS element
  ScriptElement script = ScriptElement();

  /// On that script element, add the `src` and `id` properties
  script.src = "https://maps.googleapis.com/maps/api/js?key=${currentFlavor()}";
  script.id = "super-script";

  document.head.append(script);
}

void main() {

  if (kIsWeb) { // <------------- I had to add this, it's not in the article
    createScriptElement();
  }

  runApp(MyApp());
}

Taken from here. Essentially it creates the HTML script tag from the dart, where you know the flavor, and inserts it into the HTML before the app runs.

flutter flavors for web in index.html and Android in AndroidManifest.xml

1 Answers1