0

I am trying to implement multiple flavors(something like flavors, cause the flavors are from android) in flutter web but I can't find the proper way.

What I want to do:

1. I want to change the application's name.

1. I want to have different theme, colors, etc.... inside the index.html file.

I added dart-defines to customize dynamically the app's theme, but few things remain the same, like the styling that I have in index.html file(I changed it in order to have a loading page instead of the white screen).

I also tried to create two folders inside the web folder, but still, flavors don't work.

Is there any solution for this matter out there?

Has anyone faced this?

Prodromos Sarakinou
  • 809
  • 4
  • 16

1 Answers1

0

As of today, Flutter Web does not directly support flavors.

As a workaround though, flavors can be achieved by creating different builds though, in your case different index.html files, in your CI pipeline. In essence you can now have different apps for different flavors.

Save index.html as a template (ex. index.html.template) in your project with all modifiable configs (title, theme, colors, etc.) defined as environment variables, and replace these environment variables to generate the actual index.html during the build.

Now you can control these builds to have different configs basis your flavors and fulfil your use case.

For example - To control application name, you can use,

<title>"${CUSTOM_TITLE}"</title>

and configure this CUSTOM_TITLE based on the flavor, during pipeline build.

Similar control issue and solution was answered here: https://stackoverflow.com/a/71538173/11675085

atketan
  • 169
  • 5