Flutter数据流监听插件`stream_listener`的使用

stream_listener 是一个帮助管理流和订阅的Dart包。它简化了手动订阅流和取消订阅的过程。

StreamListenerMixin

StreamListenerMixin 是一个Dart mixin，允许任何Dart对象订阅一个或多个Streams。

示例代码

以下是一个完整的示例，展示了如何使用stream_listener来监听数据流的变化，并处理数据、错误和完成事件。

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:stream_listener/stream_listener.dart';

class MyClass with StreamListenerMixin {
  MyClass(Stream stream) {
    subscribe(stream);
  }

  @override
  void onData(Stream stream, dynamic data) {
    print('onData $stream, $data');
  }

  @override
  void onError(Stream stream, dynamic error, StackTrace stackTrace) {
    print('onError $stream, $error, $stackTrace');
  }

  @override
  void onDone(Stream stream) {
    print('onDone $stream');
  }
}

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Stream Listener Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Stream Listener Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late StreamController<int> _controller;
  late MyClass _myClass;

  @override
  void initState() {
    super.initState();
    _controller = StreamController<int>();
    _myClass = MyClass(_controller.stream);
    
    // 模拟数据流变化
    Future.delayed(Duration(seconds: 1), () {
      _controller.add(0);
    });

    Future.delayed(Duration(seconds: 2), () {
      _controller.add(1);
    });

    Future.delayed(Duration(seconds: 3), () {
      _controller.add(2);
    });

    Future.delayed(Duration(seconds: 4), () {
      _controller.addError('Oops!');
    });

    Future.delayed(Duration(seconds: 5), () async {
      await _controller.close();
    });
  }

  @override
  void dispose() {
    _controller.close();
    _myClass.cancel(); // 取消所有订阅
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Text('Check the console for output!'),
      ),
    );
  }
}

说明

引入依赖：首先，在pubspec.yaml中添加stream_listener依赖：

dependencies:
  flutter:
    sdk: flutter
  stream_listener: ^x.x.x  # 替换为最新版本号

更多关于Flutter数据流监听插件stream_listener的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

songsunli 1楼•5 小时前

更多关于Flutter数据流监听插件stream_listener的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，以下是如何在Flutter应用中使用stream_listener插件来监听数据流的一个简单示例。需要注意的是，stream_listener并不是一个官方的Flutter插件，但基于你的要求，我会展示一个类似功能的实现，即使用Flutter的StreamBuilder来监听数据流。

首先，确保你的Flutter项目已经设置好，并且你有一个数据源（比如一个StreamController）来产生数据流。

步骤 1: 创建一个数据源

在你的Dart文件中，创建一个数据源，比如一个StreamController，它将产生数据流。

import 'dart:async';

class DataProvider {
  final _controller = StreamController<String>();

  // 获取数据流
  Stream<String> get dataStream => _controller.stream;

  // 添加数据到数据流
  void addData(String data) {
    _controller.add(data);
  }

  // 关闭数据流（通常在不再需要时调用）
  void close() {
    _controller.close();
  }
}

步骤 2: 在Flutter Widget中使用`StreamBuilder`监听数据流

在你的Flutter Widget中，使用StreamBuilder来监听上面创建的数据流。

import 'package:flutter/material.dart';
import 'data_provider.dart'; // 假设你的DataProvider类在这个文件中

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Stream Listener Demo'),
        ),
        body: StreamListenerDemo(),
      ),
    );
  }
}

class StreamListenerDemo extends StatefulWidget {
  @override
  _StreamListenerDemoState createState() => _StreamListenerDemoState();
}

class _StreamListenerDemoState extends State<StreamListenerDemo> {
  final dataProvider = DataProvider();

  @override
  void initState() {
    super.initState();
    // 模拟添加数据到数据流
    Timer.periodic(Duration(seconds: 1), (timer) {
      dataProvider.addData('Data at ${DateTime.now().toLocal()}');
    });
  }

  @override
  void dispose() {
    // 清理资源，关闭数据流
    dataProvider.close();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: StreamBuilder<String>(
        stream: dataProvider.dataStream,
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return Text(
              snapshot.data!,
              style: TextStyle(fontSize: 24),
            );
          } else if (snapshot.connectionState == ConnectionState.waiting) {
            return CircularProgressIndicator();
          } else {
            return Text('No data');
          }
        },
      ),
    );
  }
}

解释

DataProvider类：负责创建和管理数据流。它有一个StreamController来产生数据流，并提供方法来添加数据和关闭数据流。
StreamListenerDemo类：这是一个Flutter Widget，它使用StreamBuilder来监听DataProvider产生的数据流。StreamBuilder根据数据流的当前状态（如是否有数据、是否正在等待数据等）来构建不同的UI。
在initState方法中：我们使用Timer.periodic来模拟定期向数据流中添加数据。
在dispose方法中：我们关闭数据流以释放资源。

这个示例展示了如何在Flutter中使用StreamBuilder来监听数据流，并根据数据流的状态更新UI。虽然示例中没有直接使用名为stream_listener的插件，但原理是相同的，因为StreamBuilder是Flutter中监听数据流的标准方式。

Flutter数据流监听插件stream_listener的使用