Flutter中如何显示Firebase后台消息并解决空值异常问题

问题背景 #

当前用Provider从数据库获取消息，前台收到消息时通过FirebaseMessaging.onMessage更新Provider，Consumer组件自动刷新显示。现在要实现后台消息触发Widget重建，同时支持GET请求加载消息，但在initState中设置FirebaseMessaging.onBackgroundMessage时触发空值异常。

错误信息 #

ERROR:flutter/runtime/dart_vm_initializer.cc(41)] Unhandled Exception: Null check operator used on a null value
E/flutter (17421): #0      MethodChannelFirebaseMessaging.registerBackgroundMessageHandler 
(package:firebase_messaging_platform_interface/src/method_channel/method_channel_messaging.dart:181:53)
E/flutter (17421): #1      FirebaseMessagingPlatform.onBackgroundMessage= (package:firebase_messaging_platform_interface/src/platform_interface/platform_interface_messaging.dart:102:16)
E/flutter (17421): #2      FirebaseMessaging.onBackgroundMessage (package:firebase_messaging/src/messaging.dart:73:31)
E/flutter (17421): #3      _MessageScreenState.initState (package:webio_appchat_demo/message_screen.dart:83:23)
...

核心问题与修复步骤 #

1. 后台消息处理器必须是顶级/静态函数 #

FirebaseMessaging.onBackgroundMessage要求处理器是顶级函数或静态方法，不能是State类的成员方法，否则会导致上下文丢失或空值异常。

修复代码：

把处理器移到文件最外层作为顶级函数：

// 顶级函数，放在State类外部
Future<void> _firebaseMessagingBackgroundHandler(RemoteMessage message) async {
  // 后台必须初始化Firebase
  await Firebase.initializeApp();
  
  String newMsg = message.data['message'];
  // 通过Provider全局实例更新数据，不能用Widget context
  await ConversationsProvider.instance.addNewMessage(
    ConversationMessage(
      data: newMsg,
      direction: 'Outbound',
      dateCreated: '',
      typeId: 2
    )
  );

  print("后台消息处理完成: ${message.data}");
}

2. 后台不能直接用Widget Context #

后台消息运行在独立隔离区，无法访问Widget树的context，直接调用Provider.of(context)必报错。

修复代码：

给Provider添加全局实例：

class ConversationsProvider extends ChangeNotifier {
  static ConversationsProvider? _instance;
  
  static ConversationsProvider get instance {
    _instance ??= ConversationsProvider();
    return _instance!;
  }

  List<ConversationMessage> conversations = [];

  void addNewMessage(ConversationMessage msg) {
    conversations.add(msg);
    notifyListeners();
  }

  // 原有fetchData方法保留
  Future<void> fetchData() async {
    // 从数据库拉取消息逻辑
  }
}

3. 后台监听要在App初始化时注册 #

不能在initState里注册后台消息监听，必须在main函数中、Firebase初始化完成后注册。

修复代码：

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  
  // 注册后台消息处理器
  FirebaseMessaging.onBackgroundMessage(_firebaseMessagingBackgroundHandler);
  
  runApp(const MyApp());
}

4. 后台消息触发UI刷新的处理 #

后台更新数据后，回到前台时需要同步UI。可以监听onMessageOpenedApp，或者在页面初始化时检查未处理消息：

@override
void initState() {
  super.initState();
  
  // 前台消息监听保留
  FirebaseMessaging.onMessage.listen((event) {
    String newMsg = event.data['message'];
    Provider.of<ConversationsProvider>(context, listen: false).addNewMessage(
      ConversationMessage(
        data: newMsg,
        direction: 'Outbound',
        dateCreated: '',
        typeId: 2
      )
    );
    print('前台消息收到');
  });
  
  // 处理点击后台消息打开App的情况
  FirebaseMessaging.onMessageOpenedApp.listen((event) {
    String newMsg = event.data['message'];
    Provider.of<ConversationsProvider>(context, listen: false).addNewMessage(
      ConversationMessage(
        data: newMsg,
        direction: 'Outbound',
        dateCreated: '',
        typeId: 2
      )
    );
  });
  
  // 初始化时从数据库拉取消息
  WidgetsBinding.instance.addPostFrameCallback((_) {
    Provider.of<ConversationsProvider>(context, listen: false).fetchData();
  });
}

5. 删除无效的Widget实例化 #

原代码中MessageScreen messageScreen = MessageScreen();完全无效，后台无法通过实例化Widget更新UI，直接删除这行。

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