Dynamic HTML Elements — An Approach to Flavors in Flutter Web
When we are developing mobile Flutter applications, we know we can make use of flavors. Flavors allow us to handle different configurations for different environments — development, staging, production — adding custom assets and settings to each version of the app.
However, we don’t have the same in Flutter for Web. And sometimes it poses a problem — how can we create different versions of the same web application using a system like flavors? For example, how can we have different keys for JS libraries like Google Maps or have different Firebase configurations initialised in our Index.html file?
The Problem — Setting up Google Maps
In this article we are going to explore how we can add these configurations dynamically and per environment.
In recent months, the Flutter team has been working on creating Flutter Web implementations of their most popular plugins, such as url_launcher, google_sign_in and google_maps_flutter. In the case of both google_sign_in and google_maps_flutter there's a small catch - we need to add to our index.html file a new line where we add the correct API key:
