怎么用flutter制作上班摸魚應用

小編給大家分享一下怎么用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制作上班摸魚應用”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！