Flutter音视频流处理插件flutter_streamer的使用

Flutter音视频流处理插件flutter_streamer的使用

flutter_streamer 是一个基于标准 Dart Stream 的纯 Dart 状态管理类。它可以帮助你轻松地管理和处理应用中的状态变化。

保持简单

实现自己的模式：

class CounterController extends Streamer<int> {
  CounterController(super.initialValue);

  void increment(Increment event) => emit(++last);
}

一个简单的逻辑类扩展自Streamer

class CounterLogic extends Streamer<CounterState> {
  int _value;

  CounterLogic(this._value) : super(CounterState(_value)) {
    on<Increment>(onIncrement);
  }

  set value(int newValue) {
    if (newValue >= 10) {
      emit(MaxReached());
    } else {
      _value = newValue;
    }
  }

  int get value => _value;

  void onIncrement(Increment event) => emit(CounterState(++value));
}

检查示例部分以了解EASE模式的简单实现

EASE模式灵感来源于BloC模式：

• 在BloC模式中，UI发出事件，而Cubit/Bloc类响应状态。
• 这可能会导致处理视图逻辑（如导航、显示对话框）变得复杂。

EASE模式定义了事件、动作、状态和错误类：

• 它们用于通过流在我们的逻辑类和视图之间进行通信。
• 因为一个简单的视图应该只依赖于事件/状态/错误的流，并且发出用户动作。
• 一个简单的逻辑应该只依赖于用户的动作流，并发出事件/状态/错误。

这种方式使得视图触发导航或对话框变得非常容易。 你的视图甚至不需要知道逻辑实现。 你的逻辑甚至不需要知道视图实现。

示例代码

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_inject/flutter_inject.dart';
import 'package:stream_listener_widget/stream_listener_widget.dart';
import 'package:streamer/streamer.dart';

void main() => runApp(
      const MaterialApp(
        home: CounterView(initialValue: 5),
      ),
    );

class CounterLogic extends StateStreamer<CounterState, CounterIO> {
  CounterLogic(int value) : super(CounterState(value)) {
    on<Increment>(onIncrement);
    on<Decrement>(onDecrement);
  }

  [@override](/user/override)
  CounterIO? mapState(CounterState newState) {
    if (newState.value > 10) {
      return MaxReached();
    } else if (newState.value < 0) {
      return UnauthorizedValue('A counter under zero is not allowed');
    }
    return newState;
  }

  void onIncrement(Increment event) => state = CounterState(state.value + 1);
  void onDecrement(Decrement event) => state = CounterState(state.value - 1);
}

class CounterView extends StatelessWidget {
  final int initialValue;

  const CounterView({super.key, required this.initialValue});

  void _showDialog(BuildContext context, String message) => showDialog(
        context: context,
        barrierDismissible: true,
        builder: (context) {
          return Dialog(
            child: Padding(
              padding: const EdgeInsets.all(20),
              child: Text(message),
            ),
          );
        },
      );

  void _onMaxReached(BuildContext context) => _showDialog(context, 'Your counter has reached max value');

  void _onError(BuildContext context, CounterError event) => _showDialog(context, event.message);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Inject<Streamer<CounterIO>>(
        factory: (context) => CounterLogic(initialValue),
        builder: (context) {
          final streamer = Dependency.get<Streamer<CounterIO>>(context);
          return StreamListener(
            listeners: [
              (context) => streamer.on<MaxReached>((e) => _onMaxReached(context)),
              (context) => streamer.on<CounterError>((e) => _onError(context, e)),
            ],
            child: Scaffold(
              appBar: AppBar(title: const Text('Counter demo')),
              body: Center(
                child: StreamBuilder<CounterState>(
                  stream: streamer.select<CounterState>(),
                  builder: (context, snapshot) {
                    if (snapshot.hasError) return Text(snapshot.error.toString());
                    if (!snapshot.hasData) return const CircularProgressIndicator();
                    final state = snapshot.data!;
                    return Text('Counter: ${state.value}');
                  },
                ),
              ),
              floatingActionButton: Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  FloatingActionButton(
                    onPressed: () => streamer.emit(Increment()),
                    child: const Icon(Icons.add),
                  ),
                  FloatingActionButton(
                    onPressed: () => streamer.emit(Decrement()),
                    child: const Icon(Icons.remove),
                  ),
                ],
              ),
            ),
          );
        });
  }
}

/// 这里是一个简单的EASE模式实现的例子

/// 事件
sealed class CounterEvent extends CounterIO {}

class MaxReached extends CounterEvent {}

/// 动作
sealed class CounterAction extends CounterIO {}

class Increment extends CounterAction {}

class Decrement extends CounterAction {}

/// 状态
class CounterState extends CounterIO {
  final int value;
  CounterState(this.value);
}

class Loading extends CounterState {
  Loading(super.value);
}

/// 错误
sealed class CounterError extends CounterIO {
  final String message;

  CounterError(this.message);
}

class UnauthorizedValue extends CounterError {
  UnauthorizedValue(super.message);
}

class UnknownError extends CounterError {
  UnknownError(super.message);
}