如何将Firestore snapshot()获取的Stream值赋值给NotifierProvider的State

1. 定义状态类 #

创建一个不可变的状态类，用来管理数据的加载状态、结果和错误信息：

class DataState {
  final bool isLoading;
  final QuerySnapshot<Map<String, dynamic>>? data;
  final String? error;

  DataState({
    this.isLoading = true,
    this.data,
    this.error,
  });

  // 拷贝方法，用于更新状态
  DataState copyWith({
    bool? isLoading,
    QuerySnapshot<Map<String, dynamic>>? data,
    String? error,
  }) {
    return DataState(
      isLoading: isLoading ?? this.isLoading,
      data: data ?? this.data,
      error: error ?? this.error,
    );
  }
}

2. 实现Notifier类 #

创建继承自Notifier<DataState>的类，负责订阅Firestore的Stream并更新状态：

class DataNotifier extends Notifier<DataState> {
  StreamSubscription<QuerySnapshot<Map<String, dynamic>>>? _streamSubscription;

  @override
  DataState build() {
    // 初始化时订阅Stream
    _subscribeToFirestoreStream();
    return DataState();
  }

  void _subscribeToFirestoreStream() {
    // 先取消已有订阅，避免重复监听
    _streamSubscription?.cancel();
    
    _streamSubscription = _fetchData().listen(
      (snapshot) {
        // 收到数据时更新状态
        state = state.copyWith(
          isLoading: false,
          data: snapshot,
          error: null,
        );
      },
      onError: (error) {
        // 处理错误
        state = state.copyWith(
          isLoading: false,
          error: error.toString(),
        );
      },
    );
  }

  // 你的Firestore数据获取方法
  Stream<QuerySnapshot<Map<String, dynamic>>> _fetchData() {
    return FirebaseFirestore.instance
        .collection('collection')
        .orderBy('createdAd') // 注意：请核对Firestore中的实际字段名，此处可能存在笔误
        .limit(10)
        .snapshots();
  }

  // 销毁时取消订阅，防止内存泄漏
  @override
  void dispose() {
    _streamSubscription?.cancel();
    super.dispose();
  }
}

3. 注册NotifierProvider #

在Provider容器中注册这个NotifierProvider：

final dataProvider = NotifierProvider<DataNotifier, DataState>(() => DataNotifier());

4. 在UI中使用状态 #

通过ref.watch获取状态并渲染UI：

Widget build(BuildContext context, WidgetRef ref) {
  final dataState = ref.watch(dataProvider);

  if (dataState.isLoading) {
    return const Center(child: CircularProgressIndicator());
  }

  if (dataState.error != null) {
    return Center(child: Text('加载失败：${dataState.error}'));
  }

  final snapshot = dataState.data;
  if (snapshot == null || snapshot.docs.isEmpty) {
    return const Center(child: Text('暂无数据'));
  }

  return ListView.builder(
    itemCount: snapshot.docs.length,
    itemBuilder: (context, index) {
      final document = snapshot.docs[index];
      final data = document.data();
      return ListTile(
        title: Text(data['title'] ?? '无标题'),
        subtitle: Text(data['content'] ?? '无内容'),
      );
    },
  );
}

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