flutter如何实现点击通知跳转

在Flutter中，如何实现点击通知后跳转到指定页面？我使用了firebase_messaging插件接收通知，但点击通知时无法正确导航到目标页面。请问需要如何处理通知的点击事件？是否需要结合原生代码实现？能否提供完整的示例代码或步骤说明？

2 回复

在Flutter中，使用flutter_local_notifications插件实现点击通知跳转。步骤如下：

  1. 初始化插件时配置点击回调。
  2. 在回调中使用Navigator跳转到指定页面。
  3. 处理应用不同状态（前台、后台、终止）的跳转逻辑。

示例代码：

onSelectNotification: (String payload) async {
  Navigator.push(context, MaterialPageRoute(builder: (_) => TargetPage()));
}

更多关于flutter如何实现点击通知跳转的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 Flutter 中实现点击通知跳转，通常需要结合原生代码（Android/iOS）来处理通知点击事件，并通过 MethodChannel 将跳转信息传递给 Flutter 端。以下是具体步骤：

1. 配置通知权限和依赖

在 pubspec.yaml 中添加通知插件（如 firebase_messaging）：

dependencies:
  firebase_messaging: ^14.7.9

2. Android 端配置

修改 AndroidManifest.xml：
在 <application> 标签内添加跳转页面的 Intent Filter：

<activity
    android:name=".MainActivity"
    android:launchMode="singleTop">
    <intent-filter>
        <action android:name="FLUTTER_NOTIFICATION_CLICK" />
        <category android:name="android.intent.category.DEFAULT" />
    </intent-filter>
</activity>

处理通知点击（Kotlin）：
在 MainActivity.kt 中重写 onNewIntent，通过 MethodChannel 传递数据：

class MainActivity : FlutterActivity() {
    override fun onNewIntent(intent: Intent) {
        super.onNewIntent(intent)
        val data = intent.extras?.getString("key")
        if (data != null) {
            MethodChannel(flutterEngine?.dartExecutor?.binaryMessenger, "notification_channel")
                .invokeMethod("onNotificationClick", data)
        }
    }
}

3. iOS 端配置

在 AppDelegate.swift 中处理通知点击：

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
    override func application(
        _ application: UIApplication,
        didReceiveRemoteNotification userInfo: [AnyHashable: Any],
        fetchCompletionHandler completionHandler: @escaping (UIBackgroundFetchResult) -> Void
    ) {
        if let data = userInfo["key"] as? String {
            if let controller = window?.rootViewController as? FlutterViewController {
                let channel = FlutterMethodChannel(name: "notification_channel", binaryMessenger: controller.binaryMessenger)
                channel.invokeMethod("onNotificationClick", arguments: data)
            }
        }
        completionHandler(.newData)
    }
}

4. Flutter 端处理

初始化 MethodChannel 并监听点击事件：

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class NotificationHandler {
  static const MethodChannel _channel = MethodChannel('notification_channel');

  static void init() {
    _channel.setMethodCallHandler((call) async {
      if (call.method == "onNotificationClick") {
        String data = call.arguments;
        // 跳转到指定页面（例如使用 Navigator）
        Navigator.of(context).push(MaterialPageRoute(
          builder: (_) => TargetPage(data: data),
        ));
      }
    });
  }
}

// 在 main.dart 中初始化
void main() {
  WidgetsFlutterBinding.ensureInitialized();
  NotificationHandler.init();
  runApp(MyApp());
}

注意事项：

  • 上下文获取：实际跳转时需通过 GlobalKey 或 NavigatorState 确保能访问到有效的 BuildContext。
  • 插件选择：若使用 Firebase Cloud Messaging，可直接通过 onMessageOpenedApp 监听点击事件，无需原生代码：
    FirebaseMessaging.onMessageOpenedApp.listen((RemoteMessage message) {
  Navigator.push(context, MaterialPageRoute(builder: (_) => TargetPage()));
});

通过以上步骤，即可实现点击通知跳转到指定 Flutter 页面的功能。

回到顶部