Flutter前端系统设计：在人工智能时代，如何像资深工程师一样思考

@riverpod
class FeedNotifier extends _$FeedNotifier {
  static const _pageSize = 20;
  String? _nextCursor;
  bool _isFetchingMore = false;

  @override
  Future〈List〈Post〉>> build() async {
    // 如果缓存中存在数据，就直接使用缓存中的内容；否则从本地数据源加载首页的数据
    final cached = await ref.read(feedLocalSourceProvider).getCachedPosts();
    if (cached.isNotEmpty) {
      // 立即显示缓存中的数据，并在后台继续更新数据
      _refreshInBackground();
      return cached;
    }
    return _fetchPage(cursor: null);
  }

  Future〈void〉 loadMore() async {
    if (_isFetchingMore || _nextCursor == null) return;
    _isFetchingMore = true;

    final currentPosts = state.valueOrNull ?? [];
    final page = await ref
        .read(feedRepositoryProvider)
        .getFeedPage(cursor: _nextCursor, limit: _pageSize);

    _nextCursor = page.nextCursor;
    state = AsyncData([...currentPosts, ...page_posts]);
    _isFetchingMore = false;
  }

  Future〈List〈Post〉>>> _fetchPage({required String? cursor}) async {
    final page = await ref
        .read(feedRepositoryProvider)
        .getFeedPage(cursor: cursor, limit: _pageSize);
    _nextCursor = page.nextCursor;
    await ref.readfeedLocalSourceProvider).cachePosts(page_posts);
    return page.posts;
  }

  void _refreshInBackground() {
    Future.microtask(() async {
      final freshPosts = await _fetchPage_cursor: null);
      state = AsyncData(freshPosts);
    });
  }

  bool get hasMore => _nextCursor != null;
}

NotificationListener〈ScrollNotification〉>(
  onNotification: (notification) {
    if (notification.metrics.pixels > notification.metrics.maxScrollExtent - 400) {
      ref.read(feedNotifierProvider.notifier).loadMore();
    }
    return false;
  },
  child: ListView.builder(
    itemCount: posts.length + (hasMore ? 1 : 0),
    itemBuilder: (context, index) {
      if (index == posts.length) return const FeedLoadingIndicator();
      return PostCard(post: posts[index]);
    },
  ),
)

步骤5：为“点赞”和“评论”功能实现优化用户体验的界面设计

@riverpod
class LikeNotifier extends _$LikeNotifier {
  @override
  void build() {}

  Future〈void〉 toggleLike(String postId) async {
    final feedNotifier = ref.read(feedNotifierProvider.notifier);
    final currentPosts = ref.read(feedNotifierProvider).valueOrNull ?? [];

    // 查找对应的帖子
    final postIndex = currentPosts.indexWhere((p) => p.id ==postId);
    if (postIndex == -1) return;
    final post = currentPosts[postIndex];

    // 第一步：立即进行乐观更新
    final optimisticPost = post.copyWith(
      isLikedByMe: !post.islikedByMe,
      likeCount: post.islikedByMe ? post.likeCount - 1 : post_likeCount + 1,
    );
    feedNotifier.patchPost(postIndex, optimisticPost);

    // 第二步：发起网络请求
    try {
      await ref.read(feedRepositoryProvider).toggleLike(postId);
    } catch (e) {
      // 第三步：在请求失败时回滚之前的操作
      feedNotifier.patchPost(postIndex, post);
      // 显示提示信息或错误指示符
    }
  }
}

步骤6：实时更新

为了实现用户在查看信息流时能够实时看到新发布的帖子，系统需要保持与服务器的持续连接。WebSocket正是解决这一问题的理想工具。虽然服务器发送事件也是一种可行的方案，但WebSocket是双向通信的，因此如果后续还需要向用户推送其他类型的信息（比如输入提示、用户在线状态等），WebSocket会更加实用。

// core/realtime/realtime_service.dart

class RealtimeService {
  WebSocketChannel? _channel;
  final _controller = StreamController.broadcast();

  Stream get events => _controller.stream;

  Future connect(String token) async {
    _channel = WebSocketChannel.connect(
      Uri.parse('wss://api.yourapp.com/ws?token=$token'),
    );

    _channel!.stream.listen(
      (data) {
        final event = RealtimeEvent.fromJson(jsonDecode(data as String));
        _controller.add(event);
      },
      onError: (_) => _scheduleReconnect(),
      onDone: () => _scheduleReconnect(),
    );
  }

  void _scheduleReconnect() {
    Future.delayed(const Duration(seconds: 3), connect);
  }

  void dispose() {
    _channel?.sink.close();
    _controller.close();
  }
}

@riverpod
class RealtimeFeedNotifier extends _$RealtimeFeedNotifier {
  StreamSubscription? _subscription;

  @override
  void build() {
    _subscription = ref
        .read(realtimeServiceProvider)
        .events
        .where((e) => e.type == RealtimeEventType.newPost)
        .listen((event) {
      final newPost = Post.fromJson(event.payload);
      ref.read(feedNotifierProvider.notifier).prependPost(newPost);
    });

    ref.onDispose(() => _subscription?.cancel());
  }
}

步骤7：离线状态与错误处理

具备离线功能的信息流系统有两个基本要求：在无法连接网络时仍需显示有用的内容，并将用户操作（如点赞、评论）暂存起来，待网络恢复后再执行这些操作。

对于缓存内容的展示，仓库模式能够很好地解决这个问题：

// feed_repository.dart
Future> getFeed({String? cursor}) async {
  try {
    final page = await _remoteSource.getFeedPage(cursor: cursor);
    await _localSource.cachePosts(page_posts);
    return pageposts;
  } on DioException catch (e) {
    if (e.type == DioExceptionType.connectionError) {
      // 网络不可用——返回缓存内容
      final cached = await _localSource.getCachedPosts();
      if (cached.isNotEmpty) return cached;
    }
    rethrow;
  }
}

对于需要离线处理的操作，可以在本地存储中维护一个待执行操作的队列：

@freezed
class PendingAction with _$PendingAction {
  const factory PendingAction.like({
    required String postId,
    required bool isLike,
    required DateTime queuedAt,
  }) = PendingLike;

  const factory PendingAction.comment({
    required StringpostId,
    required String content,
    required DateTime queuedAt,
  }) = PendingComment;
}

当网络恢复时（通过connectivity_plus检测到连接恢复），就需要依次执行队列中的所有操作。如果某个操作在重试后仍然失败，就必须将这一错误信息显示给用户，而不能默默地忽略它。

步骤8：性能优化考虑因素

在任何应用程序中，信息流界面都是对性能要求最高的组件之一。因此有一些必须遵守的最佳实践：

首先，应使用ListView.builder，而绝对不能使用带有children列表的ListView。因为Builder只会渲染当前屏幕上显示的项，而children列表会一次性渲染所有项目（对于包含200多条帖子的信息流界面来说，这种做法会导致严重的性能问题）。

其次，要尽量减少PostCard组件的重新构建次数。因为大规模重构建这些组件会消耗大量资源。因此，在可能的情况下应使用const构造函数；只有当点赞数量发生变化时，才需要重建整个组件。此外，可以将点赞按钮单独提取出来，放入专门的Riverpod消费者中。

// 不好的做法——点赞数量变化时会重新构建整个PostCard组件
class PostCard extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final post = ref.watch(feedNotifierProvider)
        .valueOrNull
        ?.firstWhere((p) =&> p.id == postId);
    // ...
  }
}

// 好的做法——只有点赞按钮会重新构建
class LikeButton extends ConsumerWidget {
  final StringpostId;
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final post = ref.watch(
      feedNotifierProvider.select(
        (state) =&> state.valueOrNull?.firstWhere((p) =&> p.id == postId),
      ),
    );
    // 只有当特定帖子的点赞状态发生变化时，才会重新构建这个按钮
  }
}