Flutter Web | Build with .env File

Managing .env like files is a means of preventing hard-coded credentials and separating environments.

It is good to implement multiple .env files, e.g. .env.production, .env.development in Flutter app.

Then add some code before dotenv.load can do environments separation:

// main.dart

...

void main() async {

  const environment =

      String.fromEnvironment('ENV', defaultValue: 'development');

  await dotenv.load(fileName: '.env.$environment');

...

Then run command like flutter build web --dart-define ENV=production to spin it up.

But, here is a pitfall. In my practical learning, a file starts with dot . could cause 404 issue:

, we'd better use "dot" instead of ".".

1. Rename .env.production, .env.development files to dotenv.production, dotenv.development

2. Update assets settings

In this case, dotenv.development is not necessary, so delete it to prevent potential sensitive data leaking.