Riverpod 2.0数字时钟问题：StreamProvider持续加载无法展示数据

核心问题分析 #

你的代码存在两个关键错误，导致UI一直处于加载状态且无法更新：

1. Stream未发射数据：updateMyClockTime作为异步生成器（async*），没有通过yield语句向Stream中发送任何数据，导致StreamProvider始终处于loading状态。
2. Timer使用错误：await Timer.periodic是错误写法，Timer.periodic返回的是Timer对象而非Future，无法用await等待；且即使Timer触发，也没有将时间数据传递到Stream中。

修复方案 #

1. 修正StreamProvider实现

推荐使用Stream.periodic直接生成时间流，无需手动管理Timer，代码更简洁且符合Riverpod最佳实践：

import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:intl/intl.dart';

final clockProvider = StreamProvider<String>((ref) {
  // 每秒生成一次格式化后的当前时间
  return Stream.periodic(const Duration(seconds: 1), (_) {
    return DateFormat('h:m:s a').format(DateTime.now());
  });
});

如果偏好使用异步生成器（async*），可以这样实现：

import 'package:intl/intl.dart';

Stream<String> updateMyClockTime() async* {
  while (true) {
    await Future.delayed(const Duration(seconds: 1));
    // 每秒yield一次当前时间
    yield DateFormat('h:m:s a').format(DateTime.now());
  }
}

final clockProvider = StreamProvider<String>((ref) => updateMyClockTime());

2. 修正UI层监听逻辑

确保在ConsumerWidget或Consumer中通过ref.watch正确监听clockProvider：

ref.watch(clockProvider).when(
  data: (currentTime) {
    return Center(
      child: Text(
        currentTime,
        style: const TextStyle(fontSize: 50),
      ),
    );
  },
  error: (error, stackTrace) {
    print('错误信息: $error');
    return Text(
      '$error',
      style: const TextStyle(fontSize: 20),
    );
  },
  loading: () => const Center(
    child: CircularProgressIndicator(),
  ),
);

额外注意事项 #

• 移除全局变量myClockTime和myTimer：Riverpod的状态管理不需要依赖全局变量，Stream本身会维护时间流的状态。
• 确保导入intl包：如果还没添加，需要在pubspec.yaml中加入intl: ^0.18.1（版本号以最新为准）并执行flutter pub get。

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