使用Chrome运行Flutter应用触发MissingPluginException异常及白屏问题求助

问题原因 #

flutter_config插件默认未提供Web平台的实现，在Chrome运行时，Flutter找不到loadEnvVariables方法的对应实现，抛出异常后导致应用初始化失败，进而出现白屏。

解决方案 #

1. 手动添加Web端环境变量加载与Channel注册 #

在Web项目中直接实现环境变量读取和对应Channel方法：

• 在web目录下创建env_config.js文件，添加代码：

// 直接定义环境变量（或从.env文件读取）
window.envVariables = {
  API_BASE_URL: "https://api.example.com",
  APP_NAME: "My Flutter App"
};

// 可选：从web目录下的.env文件读取变量
/*
fetch('.env')
  .then(response => response.text())
  .then(text => {
    const env = {};
    text.split('\n').forEach(line => {
      const [key, value] = line.split('=');
      if (key && value) {
        env[key.trim()] = value.trim().replace(/^"|"$/g, '');
      }
    });
    window.envVariables = env;
  });
*/

// 注册flutter_config的Channel方法，匹配原生插件调用逻辑
window.addEventListener('flutter-web-ui-ready', function() {
  const channel = new flutter.WebChannel('flutter_config');
  channel.setMethodCallHandler(function(call) {
    if (call.method === 'loadEnvVariables') {
      return Promise.resolve(window.envVariables);
    }
    return Promise.reject(new Error('Method not implemented'));
  });
});

• 在web/index.html的<head>标签中引入该文件：

<script src="env_config.js"></script>

2. 适配跨平台环境变量获取逻辑 #

修改Dart代码，确保Web平台能正确读取变量：

import 'dart:js' as js;
import 'package:flutter/foundation.dart';
import 'package:flutter_config/flutter_config.dart';

String getEnvVariable(String key) {
  if (kIsWeb) {
    // Web平台直接读取JS端定义的变量
    return js.context['envVariables'][key];
  } else {
    // 移动端使用flutter_config插件
    return FlutterConfig.get(key);
  }
}

3. 清理缓存并重启项目 #

执行命令清理缓存，避免旧代码残留：

flutter clean
flutter pub get

重新运行Web项目：

flutter run -d chrome

4. 排查剩余白屏问题 #

若异常解决后仍有白屏，检查以下内容：

• 确认runApp中正确初始化了MaterialApp，且根Widget包含Scaffold等可见内容。
• 使用runZonedGuarded捕获全局异常，定位初始化错误：

void main() {
  runZonedGuarded(() {
    if (!kIsWeb) {
      FlutterConfig.loadEnvVariables();
    }
    runApp(const MyApp());
  }, (error, stackTrace) {
    print('全局异常: $error');
    print(stackTrace);
  });
}

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