Flutter中如何在通知栏显示Firebase文件上传进度？

1. 添加必要依赖 #

在pubspec.yaml中添加以下依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_local_notifications: ^16.1.0
  firebase_storage: ^11.2.0
  firebase_core: ^2.15.0
  firebase_auth: ^4.10.0
  cloud_firestore: ^4.9.0
  image_picker: ^1.0.4

2. 初始化通知插件 #

在应用启动时初始化通知工具，可放在main函数或全局初始化逻辑中：

import 'package:flutter_local_notifications/flutter_local_notifications.dart';

FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin = FlutterLocalNotificationsPlugin();

Future<void> initNotifications() async {
  // Android 初始化配置
  const AndroidInitializationSettings androidSettings =
      AndroidInitializationSettings('@mipmap/ic_launcher');
  
  // iOS 初始化配置
  const DarwinInitializationSettings iosSettings =
      DarwinInitializationSettings();
  
  const InitializationSettings initSettings =
      InitializationSettings(
    android: androidSettings,
    iOS: iosSettings,
  );
  
  await flutterLocalNotificationsPlugin.initialize(initSettings);
}

记得在main函数中调用await initNotifications();完成初始化。

3. 修改上传函数，监听进度并更新通知 #

重构uploadingFile函数，利用Firebase Storage的上传回调获取实时进度，同步更新通知栏：

Future<String> uploadingFile({required File uploadFile}) async {
  final storageRef = FirebaseStorage.instance.ref().child('banner_images/${DateTime.now().millisecondsSinceEpoch}.jpg');
  
  // 初始化进度通知配置
  final AndroidNotificationDetails progressAndroidDetails =
      AndroidNotificationDetails(
    'upload_progress_channel',
    '上传进度',
    channelDescription: '显示文件上传进度',
    importance: Importance.max,
    priority: Priority.high,
    onlyAlertOnce: true,
    showProgress: true,
    maxProgress: 100,
    progress: 0,
  );
  
  final NotificationDetails progressNotification =
      NotificationDetails(android: progressAndroidDetails);
  
  // 启动上传并监听进度
  final uploadTask = storageRef.putFile(uploadFile);
  
  uploadTask.snapshotEvents.listen((TaskSnapshot snapshot) {
    final progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
    final int progressInt = progress.toInt();
    
    // 更新通知进度
    flutterLocalNotificationsPlugin.show(
      0,
      '正在上传',
      '已完成 $progressInt%',
      progressNotification.copyWith(
        android: AndroidNotificationDetails(
          'upload_progress_channel',
          '上传进度',
          channelDescription: '显示文件上传进度',
          importance: Importance.max,
          priority: Priority.high,
          onlyAlertOnce: true,
          showProgress: true,
          maxProgress: 100,
          progress: progressInt,
        ),
      ),
    );
  });
  
  // 等待上传完成，获取下载链接
  final TaskSnapshot snapshot = await uploadTask;
  final String downloadUrl = await snapshot.ref.getDownloadURL();
  
  // 取消进度通知
  await flutterLocalNotificationsPlugin.cancel(0);
  
  return downloadUrl;
}

4. 修改原上传流程，添加上传成功通知 #

更新imageBannerPick函数，在Firestore数据更新完成后发送成功通知：

Future<bool> imageBannerPick(BuildContext context, ImageSource source) async {
  final pickedFile = await ImagePicker().pickImage(source: source);
  if (pickedFile == null) {
    return false;
  }
  File image = File(pickedFile.path);

  try {
    String uploadString = await uploadingFile(uploadFile: image);
    // 存储到Firestore
    await FirebaseFirestore.instance.collection('users').doc(FirebaseAuth.instance.currentUser?.uid).update({
      'backBannerPicture': uploadString,
    });
    
    // 发送上传成功通知
    const AndroidNotificationDetails successAndroidDetails =
        AndroidNotificationDetails(
      'upload_success_channel',
      '上传结果',
      channelDescription: '通知文件上传状态',
      importance: Importance.defaultImportance,
      priority: Priority.defaultPriority,
    );
    const NotificationDetails successNotification =
        NotificationDetails(android: successAndroidDetails);
    
    await flutterLocalNotificationsPlugin.show(
      1,
      '上传成功',
      '横幅图片已成功上传并更新',
      successNotification,
    );
    
    return true;
  } catch (e) {
    // 可选：添加上传失败通知
    const AndroidNotificationDetails failAndroidDetails =
        AndroidNotificationDetails(
      'upload_fail_channel',
      '上传结果',
      channelDescription: '通知文件上传状态',
      importance: Importance.defaultImportance,
      priority: Priority.defaultPriority,
    );
    const NotificationDetails failNotification =
        NotificationDetails(android: failAndroidDetails);
    
    await flutterLocalNotificationsPlugin.show(
      2,
      '上传失败',
      '横幅图片上传出错，请重试',
      failNotification,
    );
    
    return false;
  }
}

注意事项 #

• Android端需确保应用拥有通知权限，flutter_local_notifications会自动创建通知渠道
• iOS端需在Info.plist中添加权限描述：NSLocalNotificationUsageDescription和NSRemoteNotificationUsageDescription

内容的提问来源于stack exchange，提问作者Gbenga B Ayannuga