Configuration

Configure environment variables and API settings for the MND mobile app

The MND Flutter app uses environment variables and configuration files to manage API keys, endpoints, and platform-specific settings.

Environment Variables

The app uses flutter_dotenv to load environment variables from a .env file.

Creating the .env File

Create a .env file in the project root:

touch .env

Add your configuration:

# Google Maps and Directions API Key
GOOGLE_DM_API_KEY=AIzaSyXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Never commit the .env file to version control. Add it to .gitignore.

Loading Environment Variables

The .env file is loaded at app startup in main.dart:

import 'package:flutter_dotenv/flutter_dotenv.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  // Load environment variables from .env file
  await dotenv.load(fileName: ".env");
  
  runApp(MyApp());
}

Source: lib/main.dart:12-17

Accessing Environment Variables

Environment variables are accessed via dotenv.env:

import 'package:flutter_dotenv/flutter_dotenv.dart';

class ApiConfig {
  // Access GOOGLE_DM_API_KEY from .env
  static String get googleMapsApiKey => dotenv.env['GOOGLE_DM_API_KEY'] ?? '';
}

Source: lib/config/api_config.dart:16

API Configuration

The ApiConfig class in lib/config/api_config.dart manages API settings.

Backend API URL

class ApiConfig {
  // Android Emulator - connects to host machine
  static const String baseUrl = 'http://10.0.2.2:3000/api';
  
  // Physical device on same Wi-Fi network
  // static const String baseUrl = 'http://192.168.0.114:3000/api';
  
  // iOS Simulator
  // static const String baseUrl = 'http://localhost:3000/api';
  
  static const Duration timeout = Duration(seconds: 30);
  
  static String get googleMapsApiKey => dotenv.env['GOOGLE_DM_API_KEY'] ?? '';
}

Source: lib/config/api_config.dart

Platform-Specific URLs

Android Emulator

Use 10.0.2.2 to connect to the host machine’s localhost:

static const String baseUrl = 'http://10.0.2.2:3000/api';

Physical Device

Use your computer’s local IP address:

static const String baseUrl = 'http://192.168.0.114:3000/api';

Find your IP with ipconfig (Windows) or ifconfig (Mac/Linux).

iOS Simulator

Use localhost:

static const String baseUrl = 'http://localhost:3000/api';

Production

Use your production API domain:

static const String baseUrl = 'https://api.mnd.example.com/api';

Google Maps API Key

The Google Maps API key is required for map visualization and directions.

Obtaining an API Key

1. Go to Google Cloud Console
2. Create a new project or select existing
3. Enable these APIs:
   • Maps SDK for Android
   • Maps SDK for iOS
   • Directions API
4. Create credentials → API Key
5. Restrict the key (recommended):
   • Android: Add package name and SHA-1 fingerprint
   • iOS: Add bundle identifier

Platform Configuration

Android

Add to android/app/src/main/AndroidManifest.xml:

<manifest>
  <application>
    <meta-data
      android:name="com.google.android.geo.API_KEY"
      android:value="YOUR_API_KEY_HERE"/>
  </application>
</manifest>

iOS

Add to ios/Runner/AppDelegate.swift:

import UIKit
import Flutter
import GoogleMaps

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
    GMSServices.provideAPIKey("YOUR_API_KEY_HERE")
    GeneratedPluginRegistrant.register(with: self)
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

Asset Configuration

Assets are configured in pubspec.yaml:

flutter:
  uses-material-design: true
  
  # Environment variables file
  assets:
    - .env

Source: pubspec.yaml:75-84

This ensures the .env file is bundled with the app.

HTTP Client Configuration

The ApiService uses configurable timeouts:

final response = await _client.get(uri, headers: headers)
    .timeout(ApiConfig.timeout);

Source: lib/services/api_service.dart:41-42

Default timeout is 30 seconds (configured in ApiConfig.timeout).

Development vs Production

For different environments, consider using flavor-specific configuration:

Development

static const String baseUrl = 'http://10.0.2.2:3000/api';
static const bool isDevelopment = true;

Production

static const String baseUrl = 'https://api.mnd.production.com/api';
static const bool isDevelopment = false;

Or use build flavors:

flutter run --flavor development
flutter build apk --flavor production

Security Best Practices

Environment Variables

1. Never commit .env to version control

2. Add to .gitignore:

   .env
   .env.local
   .env.*.local
   

3. Use example file for documentation:

   # .env.example
   GOOGLE_DM_API_KEY=your_key_here
   

API Key Security

1. Restrict API keys in Google Cloud Console
2. Use different keys for development and production
3. Monitor usage in Google Cloud Console
4. Rotate keys periodically

Configuration Checklist

• Create .env file with GOOGLE_DM_API_KEY
• Add .env to .gitignore
• Configure baseUrl in ApiConfig for your platform
• Add Google Maps API key to AndroidManifest.xml
• Add Google Maps API key to AppDelegate.swift
• Enable required APIs in Google Cloud Console
• Verify backend server is running and accessible
• Test API connectivity with flutter run

Troubleshooting

”Failed to load .env” Error

Ensure .env is listed in pubspec.yaml assets and run:

flutter clean
flutter pub get

“Network error” or “Connection refused”

Check:

1. Backend server is running
2. Correct baseUrl for your platform
3. Firewall allows connections
4. Device/emulator has internet access

Google Maps Not Displaying

Verify:

1. API key is valid and unrestricted (during development)
2. Maps SDK enabled in Google Cloud Console
3. API key added to platform manifest files
4. Billing enabled in Google Cloud (required for Maps API)

Next Steps

• Route Planning Features
• Maps Visualization
• Services Documentation