Get Netlify Environment Variables Inside Flutter web app

Good day everyone,

I set an env variable in netlify UI, TEST_VARIABLE. I want to access it inside my flutter web project. I only see flutter_dotenv pubdev package as a possible solution to get env variables. To use it, I need to populate an .env file located within Assets folder. Im thinking on doing this during build stage with my netlify env vars. Any ideas to do this on build? thanks! maybe there is another approach im missing!

Greetings from Colombia!

Hi @javiseeker,

I’m not so experienced with Flutter myself, but here’s what I can suggest.

You can try appending the following to your build command:

--dart-define=TEST_VARIABLE=$TEST_VARIABLE

Here, TEST_VARIABLE is the name of the variable you wish to use inside Flutter and $TEST_VARIABLE is the name of the variable in Netlify UI.

Referenced from: dart - Setting environment variables in Flutter - Stack Overflow

If your build setup is similar to that, it might work.

I see,
I will give it a try. But what would happen if I need separate dev and prod variables? @hrishikesh
Thanks for the help!

You’d be using the dev variable locally, correct? There you’d have your .env file and you could use the package you mentioned.

On production, since you don’t add the .env file, you might have to do it this way. If your use case is different than this, do let us know.

Hello,
After testing I get this result:


The command could not recognize TEST_VARIABLE

Here is proof that it gets loaded for dev build when running ntl dev!

And here the command I ran for dev:

command = "flutter run -d Chrome --web-port 8080 --dart-define=TEST_VARIABLE=$TEST_VARIABLE"

Thanks!

Hi @javiseeker,

Sorry to be slow to get back here. I somehow missed this thread.

Do you have a repo that can be checked?

No worries. In this time I decided to swap to angular! at the end it worked neatly in flutter. Thanks