Flutter数据流加载插件stream_loader的使用

stream_loader 是一个用于在Flutter应用中异步加载内容的插件，它结合了Dart Stream和RxDart来实现。该插件提供了简单易用的反应式状态管理容器。

作者

Petrus Nguyễn Thái Học

开始使用

在你的Flutter项目中，将以下依赖添加到pubspec.yaml文件中：

dependencies:
  ...
  stream_loader: <latest_version>

请确保替换<latest_version>为当前可用的最新版本号。

示例

• stream_loader/example
• stream_loader_demo

使用方法

1. 模型与API定义

首先定义你的模型和API接口。这里以评论为例：

import 'package:built_collection/built_collection.dart';
import 'package:built_value/built_value.dart';

abstract class Comment implements Built<Comment, CommentBuilder> {
  // 定义你的字段
}

class Api {
  final http.Client client;

  Api(this.client);

  Stream<BuiltList<Comment>> getComments() async* {
    // 实现获取评论列表的方法
  }

  Stream<Comment> getCommentBy({required int id}) async* {
    // 实现根据ID获取特定评论的方法
  }
}
final api = Api(http.Client());

2. 创建LoaderWidget加载评论列表

下面是如何使用LoaderWidget从API加载评论列表的例子：

import 'package:flutter/material.dart';
import 'package:stream_loader/stream_loader.dart';

// 假设已经定义了Comment类和Api类

LoaderWidget<BuiltList<Comment>>(
  blocProvider: () => LoaderBloc(
    loaderFunction: api.getComments,
    refresherFunction: api.getComments,
    initialContent: <Comment>[].build(),
    logger: print,
  ),
  messageHandler: (context, message, bloc) {
    message.fold(
      onFetchFailure: (error, stackTrace) => ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Fetch error'))),
      onFetchSuccess: (_) {},
      onRefreshSuccess: (data) => ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Refresh success'))),
      onRefreshFailure: (error, stackTrace) => ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Refresh error'))),
    );
  },
  builder: (context, state, bloc) {
    if (state.error != null) {
      return Center(child: Text('Error: ${state.error}'));
    }
    if (state.isLoading) {
      return Center(child: CircularProgressIndicator());
    }
    return RefreshIndicator(
      onRefresh: bloc.refresh,
      child: ListView.builder(
        itemCount: state.content.length,
        itemBuilder: (context, index) => ListTile(title: Text(state.content[index].toString())),
      ),
    );
  },
);

3. 创建LoaderWidget加载单个评论详情

同样地，也可以用来加载单个评论详情：

import 'package:flutter/material.dart';
import 'package:stream_loader/stream_loader.dart';

final comment = ...; // 获取你要查看的评论对象
final loadDetail = () => api.getCommentBy(id: comment.id);

LoaderWidget<Comment>(
  blocProvider: () => LoaderBloc(
    loaderFunction: loadDetail,
    refresherFunction: loadDetail,
    initialContent: comment,
    logger: print,
  ),
  messageHandler: (context, message, bloc) {
    message.fold(
      onFetchFailure: (_, __) {},
      onFetchSuccess: (_) {},
      onRefreshFailure: (_, __) {},
      onRefreshSuccess: (_) => ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Refresh success'))),
    );
  },
  builder: (context, state, bloc) {
    return RefreshIndicator(
      onRefresh: bloc.refresh,
      child: Column(
        children: [
          Text(state.content.toString()),
        ],
      ),
    );
  },
);

注意事项

你可以不通过LoaderWidget直接使用LoaderBloc，如下所示：

import 'package:flutter/material.dart';
import 'package:rxdart/rxdart.dart';
import 'package:stream_loader/stream_loader.dart';

class CommentsPage extends StatefulWidget {
  [@override](/user/override)
  _CommentsPageState createState() => _CommentsPageState();
}

class _CommentsPageState extends State<CommentsPage> {
  late LoaderBloc<BuiltList<Comment>> bloc;

  [@override](/user/override)
  void didChangeDependencies() {
    super.didChangeDependencies();
    bloc = LoaderBloc(
      loaderFunction: api.getComments,
      refresherFunction: api.getComments,
      initialContent: <Comment>[].build(),
      logger: print,
    )..fetch();
  }

  [@override](/user/override)
  void dispose() {
    bloc.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return StreamBuilder<LoaderState<BuiltList<Comment>>>(
      stream: bloc.state$,
      initialData: bloc.state$.value,
      builder: (context, snapshot) {
        final state = snapshot.data!;
        if (state.error != null) {
          return Center(child: Text('Error: ${state.error}'));
        }
        if (state.isLoading) {
          return Center(child: CircularProgressIndicator());
        }
        return RefreshIndicator(
          onRefresh: bloc.refresh,
          child: ListView.builder(
            itemCount: state.content.length,
            itemBuilder: (context, index) => ListTile(title: Text(state.content[index].toString())),
          ),
        );
      },
    );
  }
}