Flutter中通过文档ID获取通知数组并展示指定字段

1. 依赖准备（以Firebase Firestore为例） #

如果用Firestore存储数据，先在pubspec.yaml添加依赖：

dependencies:
  flutter:
    sdk: flutter
  cloud_firestore: ^4.15.0 # 版本号以最新官方版本为准

执行flutter pub get完成依赖安装。

2. 编写数据获取方法 #

假设你的数据集合名为notifications，目标文档ID为targetDocId，编写异步方法提取需要的字段：

import 'package:cloud_firestore/cloud_firestore.dart';

Future<List<Map<String, dynamic>>> getTargetNotifications(String docId) async {
  try {
    DocumentSnapshot doc = await FirebaseFirestore.instance
        .collection('notifications')
        .doc(docId)
        .get();
    
    if (doc.exists) {
      // 从文档中取出通知数组（根据你的数据结构替换键名，比如图中的嵌套数组字段）
      List<dynamic> rawList = doc['notifications'];
      // 过滤出需要的date、message、type字段
      return rawList.map((item) => {
        'date': item['date'],
        'message': item['message'],
        'type': item['type'],
      }).toList();
    } else {
      return [];
    }
  } catch (e) {
    print('获取数据出错: $e');
    return [];
  }
}

3. 界面展示数据 #

用FutureBuilder处理异步数据，配合ListView渲染列表：

import 'package:flutter/material.dart';

class NotificationPage extends StatelessWidget {
  // 替换成你要查询的文档ID
  final String targetDocId = 'your_target_document_id';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('通知列表')),
      body: FutureBuilder<List<Map<String, dynamic>>>(
        future: getTargetNotifications(targetDocId),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return const Center(child: CircularProgressIndicator());
          }
          if (snapshot.hasError) {
            return Center(child: Text('加载失败: ${snapshot.error}'));
          }
          if (snapshot.data == null || snapshot.data!.isEmpty) {
            return const Center(child: Text('暂无通知数据'));
          }
          return ListView.builder(
            itemCount: snapshot.data!.length,
            itemBuilder: (context, index) {
              final notification = snapshot.data![index];
              return ListTile(
                title: Text(notification['message']),
                subtitle: Text('日期: ${notification['date']} | 类型: ${notification['type']}'),
              );
            },
          );
        },
      ),
    );
  }
}

关键提示 #

• 请根据你的实际数据结构，替换代码中的集合名、文档ID、数组字段名（比如图中的嵌套数组键）。
• 如果不是用Firebase，而是其他数据源（本地JSON、后端API），核心逻辑一致：先获取文档数据→提取目标数组→过滤字段→用Flutter组件渲染。

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