Flutter

我用Flutter写了一个上班摸鱼应用

网上最近看到了个摸鱼应用，还挺好玩的。

我打算自己用flutter写了一个

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

当前flutter环境 2.8

截屏2021-12-18 上午9.59.29.png

增加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应用