Flutter中使用Awesome Notification实现点击通知跳转指定页面问题

1. 基础配置与回调监听 #

首先确保Awesome Notification初始化时绑定通知点击回调，同时全局定义navigatorKey用于跳转（回调中无法直接获取组件上下文）：

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

// 全局导航键，用于无上下文环境跳转页面
final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  // 初始化Awesome Notification
  await AwesomeNotifications().initialize(
    'resource://drawable/res_app_icon', // 替换为你的应用图标路径
    [
      NotificationChannel(
        channelKey: 'basic_channel',
        channelName: '基础通知',
        channelDescription: '用于测试的通知渠道',
        defaultColor: Colors.blue,
        importance: NotificationImportance.High,
        channelShowBadge: true,
      )
    ],
    debug: true,
  );

  // 设置通知点击监听
  AwesomeNotifications().setListeners(
    onActionReceivedMethod: (ReceivedAction receivedAction) async {
      handleNotificationClick(receivedAction);
    },
  );

  runApp(const MyApp());
}

2. 配置路由与跳转逻辑 #

在MaterialApp中注册目标页面路由，并通过navigatorKey实现跳转：

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorKey: navigatorKey,
      title: '通知跳转示例',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const HomePage(),
      // 注册路由
      routes: {
        '/notification-page': (context) => const NotificationPage(),
      },
    );
  }
}

// 处理通知点击跳转的函数
void handleNotificationClick(ReceivedAction receivedAction) {
  // 提取通知的标题、内容、自定义参数
  final String? title = receivedAction.title;
  final String? body = receivedAction.body;
  final Map<String, String>? payload = receivedAction.payload;

  // 跳转至指定页面并传递数据
  navigatorKey.currentState?.pushNamed(
    '/notification-page',
    arguments: {
      'title': title,
      'body': body,
      'payload': payload,
    },
  );
}

3. 在NotificationPage展示通知内容 #

作为无状态组件，通过ModalRoute获取跳转时传递的参数并渲染：

class NotificationPage extends StatelessWidget {
  const NotificationPage({super.key});

  @override
  Widget build(BuildContext context) {
    // 获取传递的通知数据
    final arguments = ModalRoute.of(context)?.settings.arguments as Map<String, dynamic>?;
    final String? title = arguments?['title'];
    final String? body = arguments?['body'];
    final Map<String, String>? payload = arguments?['payload'];

    return Scaffold(
      appBar: AppBar(title: const Text('通知详情')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            if (title != null)
              Text(
                title,
                style: const TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
              ),
            const SizedBox(height: 8),
            if (body != null)
              Text(
                body,
                style: const TextStyle(fontSize: 16),
              ),
            const SizedBox(height: 16),
            if (payload != null && payload.isNotEmpty)
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  const Text('附加数据:', style: TextStyle(fontWeight: FontWeight.bold)),
                  ...payload.entries.map((entry) => Text('${entry.key}: ${entry.value}')),
                ],
              ),
          ],
        ),
      ),
    );
  }
}

4. 测试用通知发送示例 #

可以在首页添加按钮发送测试通知，验证跳转逻辑：

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  Future<void> sendTestNotification() async {
    await AwesomeNotifications().createNotification(
      content: NotificationContent(
        id: 10,
        channelKey: 'basic_channel',
        title: '测试通知',
        body: '点击查看通知详情',
        payload: {'custom_id': '123', 'type': 'message'}, // 自定义附加参数
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('首页')),
      body: Center(
        child: ElevatedButton(
          onPressed: sendTestNotification,
          child: const Text('发送测试通知'),
        ),
      ),
    );
  }
}

注意事项 #

• 确保Android端AndroidManifest.xml和iOS端Info.plist按照Awesome Notification要求配置权限与通知渠道
• 后台通知点击需额外配置：Android需注册广播接收器，iOS需处理通知扩展逻辑

内容的提问来源于stack exchange，提问作者Alim Bin Yeasin