Flutter流处理插件streamful的使用

简介

streamful 是一组用于处理流（streams）的 widgets 和工具。它可以帮助开发者更方便地管理流的状态和UI更新。

特性

StreamedLoading

StreamedLoading 是一个圆形加载指示器，根据一个表示加载状态的布尔流来显示加载动画。

使用方法

StreamedLoading(
  stream: _loadingController.stream, // 加载状态流
  color: Colors.blue, // 指示器颜色
  strokeWidth: 4.0, // 指示器宽度
);

Loading Mixin

Loading 混入类为类添加了一个 BehaviorSubject<bool>，以便轻松处理表示加载状态的流。

使用方法

class MyClass with Loading {
  void startLoading() {
    loadStart(); // 开始加载
  }

  void stopLoading() {
    loadStop(); // 结束加载
  }

  bool get isLoading => subject.value; // 获取当前加载状态
}

StreamWidget

StreamWidget 是对 StreamBuilder 的封装，允许定义：

• onData: (data) {} 回调，当流有数据时返回要显示的 Widget。
• onError: (error) {} 回调，当流有错误时返回要显示的 Widget。
• onLoad: widget 当流既没有数据也没有错误时返回的 Widget。

使用方法

StreamWidget<String?>(
  stream: bloc.data,
  onData: (data) => Text(data!), // 数据回调
  onError: (error) => Text(error.toString()), // 错误回调
  onLoad: StreamedLoading(
    stream: bloc.isLoading,
    color: _color,
    strokeWidth: _strokeWidth,
  ), // 加载状态指示器
);

完整示例

示例代码

import 'package:example/bloc.dart';
import 'package:flutter/material.dart';
import 'package:streamful/streamful.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Streamful Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Streamful Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String? title;

  MyHomePage({Key? key, this.title}) : super(key: key);

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Color? _color = Colors.blue;
  double _strokeWidth = 4.0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title!)),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: _buildContent(),
      ),
    );
  }

  Widget _buildContent() {
    return Column(
      children: [
        Container(
          alignment: Alignment.centerLeft,
          child: Text(
            'Streamful',
            style: TextStyle(fontWeight: FontWeight.bold, fontSize: 22.0),
          ),
        ),
        Padding(
          padding: const EdgeInsets.only(bottom: 8.0),
          child: _buildColorPicker(),
        ),
        Padding(
          padding: const EdgeInsets.only(bottom: 8.0),
          child: _buildStrokeSizer(),
        ),
        Padding(
          padding: const EdgeInsets.only(bottom: 8.0),
          child: _buildActionButtons(),
        ),
        StreamWidget<String?>(
          stream: bloc.data,
          onData: (data) => Text(data!),
          onError: (error) => Text(error.toString()),
          onLoad: StreamedLoading(
            stream: bloc.isLoading,
            color: _color,
            strokeWidth: _strokeWidth,
          ),
        ),
      ],
    );
  }

  Widget _buildColorPicker() {
    return Row(
      children: [
        Expanded(
          child: Padding(
            padding: const EdgeInsets.only(right: 8.0),
            child: Text('Select a color'),
          ),
        ),
        Expanded(
          child: DropdownButton<Color>(
            isExpanded: true,
            value: _color,
            items: _colors,
            onChanged: (color) {
              setState(() {
                _color = color;
              });
            },
          ),
        ),
      ],
    );
  }

  List<DropdownMenuItem<Color>> get _colors {
    Map<String, Color> colors = {
      'Blue': Colors.blue,
      'Red': Colors.red,
      'Orange': Colors.orange,
      'Green': Colors.green,
    };

    List<DropdownMenuItem<Color>> _list = [];

    colors.forEach((key, value) {
      _list.add(
        DropdownMenuItem(child: Text(key), value: value),
      );
    });

    return _list;
  }

  Widget _buildStrokeSizer() {
    return Row(
      children: [
        Expanded(
          child: Padding(
            padding: const EdgeInsets.only(right: 8.0),
            child: Text('Set the stroke width'),
          ),
        ),
        Expanded(
          child: Slider(
            min: 1,
            max: 10,
            value: _strokeWidth,
            onChanged: (value) {
              setState(() {
                _strokeWidth = value;
              });
            },
          ),
        ),
      ],
    );
  }

  Widget _buildActionButtons() {
    return Row(
      children: [
        ElevatedButton(
          onPressed: () {
            bloc.getData();
          },
          child: Text('Success'),
        ),
        Spacer(),
        ElevatedButton(
          onPressed: () {
            bloc.getError();
          },
          child: Text('Error'),
        ),
      ],
    );
  }
}