flutter如何实现应用切换到后台显示横幅通知

在Flutter中，当应用切换到后台时如何实现显示横幅通知？我尝试过使用flutter_local_notifications插件，但发现应用在前台时能正常显示通知，切换到后台后却无法弹出横幅。是否需要在Android和iOS端分别配置？具体需要哪些权限或后台服务支持？求实现方案或代码示例。

2 回复

在Flutter中，使用flutter_local_notifications插件实现后台横幅通知。通过配置Android和iOS的通知权限，调用show方法即可显示通知。需注意后台任务需结合其他插件（如workmanager）处理。

更多关于flutter如何实现应用切换到后台显示横幅通知的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中实现应用切换到后台时显示横幅通知，可以使用flutter_local_notifications插件配合后台任务处理。以下是实现步骤：

1. 添加依赖

在 pubspec.yaml 中添加：

dependencies:
  flutter_local_notifications: ^16.3.0
  workmanager: ^0.5.1

2. 配置通知权限

Android：在 AndroidManifest.xml 中添加权限：

<uses-permission android:name="android.permission.VIBRATE"/>
<uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED"/>

iOS：在 Info.plist 中添加：

<key>UILaunchStoryboardName</key>
<string>LaunchScreen</string>

3. 初始化通知插件

import 'package:flutter_local_notifications/flutter_local_notifications.dart';

final FlutterLocalNotificationsPlugin notificationsPlugin =
    FlutterLocalNotificationsPlugin();

Future<void> initNotifications() async {
  const AndroidInitializationSettings androidSettings =
      AndroidInitializationSettings('@mipmap/ic_launcher');
  
  final InitializationSettings settings = InitializationSettings(
    android: androidSettings,
    iOS: DarwinInitializationSettings(),
  );
  
  await notificationsPlugin.initialize(settings);
}

4. 配置后台任务

使用 workmanager 处理应用切换到后台时的任务：

import 'package:workmanager/workmanager.dart';

void callbackDispatcher() {
  Workmanager().executeTask((task, inputData) {
    _showBannerNotification();
    return Future.value(true);
  });
}

Future<void> _showBannerNotification() async {
  const AndroidNotificationDetails androidDetails = AndroidNotificationDetails(
    'channel_id',
    'Channel Name',
    channelDescription: 'Channel Description',
    importance: Importance.high,
    priority: Priority.high,
  );
  
  const NotificationDetails details = NotificationDetails(
    android: androidDetails,
  );
  
  await notificationsPlugin.show(
    0,
    '应用在后台运行',
    '点击返回应用',
    details,
  );
}

5. 注册后台任务

在 main.dart 中初始化：

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  
  // 初始化通知
  initNotifications();
  
  // 注册后台任务
  Workmanager().initialize(
    callbackDispatcher,
    isInDebugMode: false,
  );
  
  // 当应用进入后台时启动任务
  Workmanager().registerOneOffTask(
    "backgroundTask",
    "showBannerNotification",
  );
  
  runApp(MyApp());
}

6. 监听应用状态

使用 WidgetsBindingObserver 监听应用状态变化：

class _MyAppState extends State<MyApp> with WidgetsBindingObserver {
  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    if (state == AppLifecycleState.paused) {
      // 应用进入后台时触发通知
      Workmanager().registerOneOffTask(
        "backgroundTask",
        "showBannerNotification",
      );
    }
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }
}

注意事项：

  1. Android配置：需要在 AndroidManifest.xml 中注册后台服务
  2. iOS限制：iOS 后台通知权限受限，需确保应用有后台运行权限
  3. 测试：建议在真机上测试后台通知功能

这样当应用切换到后台时，系统会显示一个横幅通知，用户可以点击通知快速返回应用。

回到顶部