DEV Community

Jan Mewes
Jan Mewes

Posted on

Configure Flutter Web apps

When you are building a Flutter Web application that accesses a REST API, then the base URL of that API should be configurable, so that you can use a different API during development than the one which is used for the production system.

Dart Define

The simplest way to do that is to provide key-value declarations to the flutter run or flutter build web command, with the help of their --dart-define parameter.

flutter run -d chrome --dart-define="apiBaseUrl=https://example.com"
Enter fullscreen mode Exit fullscreen mode

Here is the help text for that parameter:

Additional key-value pairs that will be available as constants from the String.fromEnvironment, bool.fromEnvironment, int.fromEnvironment, and double.fromEnvironment constructors. Multiple defines can be passed by repeating "--dart-define" multiple times.

Those declarations can then be used in the Flutter app with the methods String.fromEnvironment, bool.fromEnvironment, int.fromEnvironment, and double.fromEnvironment. If the app was called without the key-value declaration of the respective name, then a default value will be used. So, when building the app for the production system you can define the key-value pair. And when during development you can use the default value.

void main() {
  var apiBaseUrl = const String.fromEnvironment(
    'apiBaseUrl',
    defaultValue: 'http://localhost:8080',
  );
  initialiseContext(apiBaseUrl);

  runApp(RegistrationDeskApp());
}
Enter fullscreen mode Exit fullscreen mode

GitHub Action

If you are using GitHub Pages as production system and the flutter-gh-pages action to update them, then the API base URL for the production API can be configured like this:

- uses: bluefireteam/flutter-gh-pages@v7
  with:
    customArgs: --dart-define="apiBaseUrl=https://example.com"
Enter fullscreen mode Exit fullscreen mode

To avoid committing the API base URL to the Git repository, it should be provided as a GitHub repository secret.

Here are some pointers on how this can be set up in the repository settings:

GitHub Secrets configuration

And here is how the secret can be used:

- uses: bluefireteam/flutter-gh-pages@v7
  with:
    customArgs: --dart-define="apiBaseUrl=${{ secrets.API_BASE_URL }}"
Enter fullscreen mode Exit fullscreen mode

Alternatives

As usual, there are other possibilities for how the problem under discussion could have been solved.

Main profiles

You might want to define different versions of the main.dart file for the respective environment. An example of this approach can be found in the Flutter template from Web Factory.

dotenv

The configuration could also have been done with a .env file and the flutter_dotenv plugin.

References

Discussion (0)