How to Use Environments in FlutterFlow to Make Your Project More Production Compatible

Flutterflow
,
1

When building production-ready applications in FlutterFlow, one of the most overlooked yet powerful tools is the Environment feature. It allows you to manage different configurations - such as API URLs, keys, and third-party service settings - for Development, Staging, and Production builds.

By using environments properly, you can switch between these setups instantly without manually editing your code each time.

What Are Environments in FlutterFlow?

FlutterFlow Environments are a way to store and manage variables that differ between builds. For example:

  • DEV - Used for testing and debugging (e.g., local server, mock APIs).

  • STAGING - Used for QA and internal testing.

  • PROD - Used for live, production environments.

Each environment can hold different variables like:

  • Base API URLs

  • Firebase Configs

  • API Keys or Access Tokens

  • Feature flags

This separation ensures your app behaves correctly in each stage - without needing to hardcode sensitive information in your code or custom widgets.

Why You Should Use Environment Variables

Using environment variables improves project maintainability, scalability, and security. Here’s why it’s a best practice:

  1. No hardcoded credentials or URLs

    • Keeps your code clean and secure.

    • Prevents accidental exposure of sensitive data in shared projects or version control.

  2. Simplifies Deployment

    • You can publish the same app to staging or production without changing a single line of code - just switch environments in FlutterFlow.

  3. Team Collaboration

    • Each team member can use their own environment configuration while working on shared projects.

Using Environment Variables in Custom Widgets

Custom widgets and custom actions in FlutterFlow can easily access environment variables.
For example, in your tokenCheck function, you might want to make the base URL dynamic so that it changes automatically when switching between environments.

Instead of hardcoding the URL, you can pass it as an environment variable parameter.

Example Implementation

Below is a simplified concept (based on your shared logic) showing how to inject the environment variable into your custom action:

import '/flutter_flow/flutter_flow_util.dart';
import 'package:dio/dio.dart';

// Example: Using environment variable for dynamic base URL
Future<bool> tokenCheck() async {
  final String baseUrl = FFAppState().env.baseUrl;  // Environment variable
  final accessToken = FFAppState().userAuth.token;

  if (accessToken == null) {
    print('No access token found.');
    return false;
  }

  try {
    final dio = Dio();
    final response = await dio.get(
      '$baseUrl/user/get-top-rated-venue',
      options: Options(headers: {'Authorization': 'Bearer $accessToken'}),
    );

    if (response.statusCode == 200) {
      print('✅ Token is valid.');
      return true;
    } else {
      print('❌ Token check failed: ${response.statusCode}');
      return false;
    }
  } catch (e) {
    print('Error during token validation: $e');
    return false;
  }
}

In this example:

  • The baseUrl is fetched from the environment configuration instead of being hardcoded.

  • You can define multiple URLs in FlutterFlow:

    • https://dev-api.example.com (Development)

    • https://staging-api.example.com (Staging)

    • https://api.example.com (Production)

When you switch environments in FlutterFlow, the correct URL will automatically be used at runtime.

Steps to Configure Environment Variables in FlutterFlow

  1. Open Project Settings
    Go to Settings → Environments in your FlutterFlow project.

  2. Add New Environment
    FlutterFlow provides a “Default” environment by default. You can add new ones like:

    • Development

    • Staging

    • Production

  3. Define Variables
    Add variables such as:

    baseUrl = https://api.example.com
apiKey = your-production-key

  4. Access Variables in Custom Code
    Use the variable in your custom action, widget, or API call using:

    FFAppState().env.baseUrl

  5. Switch Between Environments
    While running or deploying the app, select the desired environment from the Environment dropdown in the top toolbar of FlutterFlow.

Tips for Production-Grade Usage

  • Use descriptive variable names (baseUrl, authUrl, analyticsKey, etc.).

  • Never commit environment-specific files (like .env) with sensitive data to public repositories.

  • Test each environment separately before release to avoid hitting the wrong API endpoint.

  • Use logs only in Development and disable detailed debug logs for production builds.

Conclusion

By leveraging FlutterFlow’s environment variables, you can make your project more stable, secure, and scalable. This approach allows you to easily manage multiple configurations - ensuring your app behaves correctly whether it’s in development, staging, or production.

Integrating environment variables into your custom widgets and custom actions - like dynamically passing the API base URL - further ensures that your project remains flexible and production-ready, without exposing any sensitive information in the codebase.