详解用flutter制作上班摸鱼应用
网上最近看到了个摸鱼应用，还挺好玩的，我就自己用flutter写了一个。
之前我有用flutter制作过mobile应用，但是没有在desktop尝试过；毕竟2.0大更新，我这里就在这试手一下，并说说flutter的体验.
当前flutter环境 2.8
增加flutter desktop支持 (默认项目之存在ios，android项目包)
flutter config --enable-<platform>-desktop我这里是mac，因此platform=macos，详细看flutter官网
代码十分简单，UI部分就不讲了
在摸鱼界面，我是用了 Bloc 做倒计时计算逻辑，默认摸鱼时长15分钟
MoYuBloc() : super(MoyuInit()) {
on(_handleMoyuStart);
on(_handleUpdateProgress);
on(_handleMoyuEnd);
}摸鱼开始事件处理
// handle moyu start action
FutureOr<void> _handleMoyuStart(
MoyuStarted event, Emitter<MoyuState> 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<void> _handleUpdateProgress(
MoyuProgressUpdated event, Emitter<MoyuState> emit) async {
final totalTime = event.totalTime;
final progressTime = event.progressTime;
emit(
MoyuIng(progress: progressTime / totalTime, progressTime: progressTime),
);
}摸鱼结束，释放结束事件
// handle clock end
FutureOr<void> _handleMoyuEnd(
MoyuEnded event, Emitter<MoyuState> 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<MoYuBloc, MoyuState>(
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 desktop使用
- 简单上手，按着官网走基本没问题，基本上没踩上什么雷，可能项目比较简单
- 构建流程简单，hot reload强大
- 性能强大，启动速度很快，并且界面无顿挫感
比较遗憾的事desktop电脑构建系统独立，mac环境下无法构建windows应用，有点小遗憾.
项目完全开源 可以前往GitHub查看 不要忘点个star?
https://github.com/lau1944/moyu_app
到此这篇关于详解用flutter制作上班摸鱼应用的文章就介绍到这了,更多相关flutter 摸鱼应用内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
