怎么用flutter制作上班摸鱼应用

小编给大家分享一下怎么用flutter制作上班摸鱼应用，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

网上最近看到了个摸鱼应用，还挺好玩的，我就自己用flutter写了一个。

之前我有用flutter制作过mobile应用，但是没有在desktop尝试过；毕竟2.0大更新，我这里就在这试手一下，并说说flutter的体验.

当前flutter环境 2.8

增加flutter desktop支持 (默认项目之存在ios，android项目包)

flutter config --enable--desktop

我这里是mac，因此platform=macos，详细看flutter官网

代码十分简单，UI部分就不讲了

在摸鱼界面，我是用了 Bloc 做倒计时计算逻辑，默认摸鱼时长15分钟

 MoYuBloc() : super(MoyuInit()) {    on(_handleMoyuStart);    on(_handleUpdateProgress);    on(_handleMoyuEnd);  }

摸鱼开始事件处理

// handle moyu start action  FutureOr _handleMoyuStart(      MoyuStarted event, Emitter emit) async {    if (_timer != null && _timer!.isActive) {      _timer?.cancel();    }     final totalTime = event.time;    int progressTime = state is MoyuIng ? (state as MoyuIng).progressTime : 0;     _timer = Timer.periodic(const Duration(seconds: 1), (timer) {      add(MoyuProgressUpdated(totalTime, ++progressTime));       if (progressTime >= totalTime) {        timer.cancel();        add(MoyuEnded());      }    });    emit(MoyuIng(progress: 0, progressTime: 0));  }

摸鱼进度更新

// handle clock update  FutureOr _handleUpdateProgress(      MoyuProgressUpdated event, Emitter emit) async {    final totalTime = event.totalTime;    final progressTime = event.progressTime;    emit(      MoyuIng(progress: progressTime / totalTime, progressTime: progressTime),    );  }

摸鱼结束，释放结束事件

// handle clock end  FutureOr _handleMoyuEnd(      MoyuEnded event, Emitter emit) async {    emit(MoyuFinish());  }

总结3个event (摸鱼开始，进程更新，摸鱼结束）

abstract class MoyuEvent {} class MoyuStarted extends MoyuEvent {  final int time;  final System os;   MoyuStarted({required this.time, required this.os});} class MoyuProgressUpdated extends MoyuEvent {  final int totalTime;  final int progressTime;   MoyuProgressUpdated(this.totalTime, this.progressTime);} class MoyuEnded extends MoyuEvent {  MoyuEnded();}

其中3个state （摸鱼初始，正在摸鱼，摸鱼结束）

abstract class MoyuState {} class MoyuInit extends MoyuState {} class MoyuIng extends MoyuState {  final double progress;  final int progressTime;   MoyuIng({required this.progress, required this.progressTime});} class MoyuFinish extends MoyuState {}

启动摸鱼使用, 记录总时长和消耗时间，计算进度百分比，更新UI进度条

下面是界面更新逻辑

BlocConsumer(          builder: (context, state) {            if (state is MoyuIng) {              final progress = state.progress;               return _moyuIngView(progress);            } else if (state is MoyuFinish) {              return _replayView();            }            return const SizedBox();          },          listener: (context, state) {},          listenWhen: (pre, cur) => pre != cur,        ),

很简单 最重要的是进度状态，其次结束后是否重新摸鱼按钮

构建运行flutter应用

flutter run -d macos

最后结果展示

看完了这篇文章，相信你对"怎么用flutter制作上班摸鱼应用"有了一定的了解，如果想了解更多相关知识，欢迎关注行业资讯频道，感谢各位的阅读！