如何在Flutter Web中配置不同Firebase环境（Flavors）

核心思路 #

Flutter Web无法像原生平台那样依赖独立的配置文件，得通过环境变量+动态初始化Firebase的方式实现多环境切换。

具体操作步骤 #

1. 导出各环境的Firebase配置 #

从Firebase控制台分别导出QA和生产环境的Web配置信息，格式示例如下：

// 生产环境配置
const prodConfig = {
  apiKey: "PROD_API_KEY",
  authDomain: "PROD_AUTH_DOMAIN",
  projectId: "PROD_PROJECT_ID",
  storageBucket: "PROD_STORAGE_BUCKET",
  messagingSenderId: "PROD_SENDER_ID",
  appId: "PROD_APP_ID"
};

// QA环境配置
const qaConfig = {
  apiKey: "QA_API_KEY",
  authDomain: "QA_AUTH_DOMAIN",
  projectId: "QA_PROJECT_ID",
  storageBucket: "QA_STORAGE_BUCKET",
  messagingSenderId: "QA_SENDER_ID",
  appId: "QA_APP_ID"
};

2. 配置环境变量标识 #

在项目根目录创建两个环境标识文件：

• .env.prod
• .env.qa

文件内容分别为：

# .env.prod
ENVIRONMENT=prod

# .env.qa
ENVIRONMENT=qa

接着安装flutter_dotenv包来加载环境变量，在pubspec.yaml的dependencies中添加：

flutter_dotenv: ^5.1.0

3. 动态初始化Firebase #

在main.dart中根据加载的环境变量，选择对应配置初始化Firebase：

import 'package:flutter/material.dart';
import 'package:flutter_dotenv/flutter_dotenv.dart';
import 'package:firebase_core/firebase_core.dart';

void main() async {
  // 加载对应环境的配置文件
  await dotenv.load(fileName: ".env.${dotenv.env['ENVIRONMENT'] ?? 'prod'}");
  
  // 根据环境选择Firebase配置
  FirebaseOptions firebaseOptions;
  final currentEnv = dotenv.env['ENVIRONMENT'];
  
  if (currentEnv == 'qa') {
    firebaseOptions = const FirebaseOptions(
      apiKey: "QA_API_KEY",
      authDomain: "QA_AUTH_DOMAIN",
      projectId: "QA_PROJECT_ID",
      storageBucket: "QA_STORAGE_BUCKET",
      messagingSenderId: "QA_SENDER_ID",
      appId: "QA_APP_ID",
    );
  } else {
    firebaseOptions = const FirebaseOptions(
      apiKey: "PROD_API_KEY",
      authDomain: "PROD_AUTH_DOMAIN",
      projectId: "PROD_PROJECT_ID",
      storageBucket: "PROD_STORAGE_BUCKET",
      messagingSenderId: "PROD_SENDER_ID",
      appId: "PROD_APP_ID",
    );
  }
  
  await Firebase.initializeApp(options: firebaseOptions);
  runApp(const MyApp());
}

4. 运行/构建时指定环境 #

通过命令行参数切换环境：

• 运行QA环境：

flutter run -d chrome --dart-define=ENVIRONMENT=qa

• 构建生产环境：

flutter build web --dart-define=ENVIRONMENT=prod

可选优化：分离配置文件 #

把Firebase配置单独抽离到firebase_configs.dart，让代码更整洁：

class FirebaseConfigs {
  static FirebaseOptions get prod => const FirebaseOptions(
        apiKey: "PROD_API_KEY",
        authDomain: "PROD_AUTH_DOMAIN",
        projectId: "PROD_PROJECT_ID",
        storageBucket: "PROD_STORAGE_BUCKET",
        messagingSenderId: "PROD_SENDER_ID",
        appId: "PROD_APP_ID",
      );

  static FirebaseOptions get qa => const FirebaseOptions(
        apiKey: "QA_API_KEY",
        authDomain: "QA_AUTH_DOMAIN",
        projectId: "QA_PROJECT_ID",
        storageBucket: "QA_STORAGE_BUCKET",
        messagingSenderId: "QA_SENDER_ID",
        appId: "QA_APP_ID",
      );
}

之后在main.dart中直接调用：

firebaseOptions = currentEnv == 'qa' ? FirebaseConfigs.qa : FirebaseConfigs.prod;

内容的提问来源于stack exchange，提问作者PradeepKumar