用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使用

  1. 简单上手,按着官网走基本没问题,基本上没踩上什么雷,可能项目比较简单
  2. 构建流程简单,hot reload强大
  3. 性能强大,启动速度很快,并且界面无顿挫感

比较遗憾的事desktop电脑构建系统独立,mac环境下无法构建windows应用,有点小遗憾.

项目完全开源 可以前往GitHub查看 不要忘点个star😊

https://github.com/lau1944/moyu_app

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
THE END
分享
二维码
< <上一篇
下一篇>>