詳解用flutter制作上班摸魚應(yīng)用
網(wǎng)上最近看到了個摸魚應(yīng)用,還挺好玩的,我就自己用flutter寫了一個。
之前我有用flutter制作過mobile應(yīng)用,但是沒有在desktop嘗試過;畢竟2.0大更新,我這里就在這試手一下,并說說flutter的體驗.
當(dāng)前flutter環(huán)境 2.8
增加flutter desktop支持 (默認(rèn)項目之存在ios,android項目包)
flutter config --enable-<platform>-desktop
我這里是mac,因此platform=macos,詳細(xì)看flutter官網(wǎng)
代碼十分簡單,UI部分就不講了
在摸魚界面,我是用了 Bloc 做倒計時計算邏輯,默認(rèn)摸魚時長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)); }
摸魚進(jìn)度更新
// 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), ); }
摸魚結(jié)束,釋放結(jié)束事件
// handle clock end FutureOr<void> _handleMoyuEnd( MoyuEnded event, Emitter<MoyuState> emit) async { emit(MoyuFinish()); }
總結(jié)3個event (摸魚開始,進(jìn)程更新,摸魚結(jié)束)
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 (摸魚初始,正在摸魚,摸魚結(jié)束)
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 {}
啟動摸魚使用, 記錄總時長和消耗時間,計算進(jìn)度百分比,更新UI進(jìn)度條
下面是界面更新邏輯
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, ),
很簡單 最重要的是進(jìn)度狀態(tài),其次結(jié)束后是否重新摸魚按鈕
構(gòu)建運行flutter應(yīng)用
flutter run -d macos
最后結(jié)果展示
總結(jié)下flutter desktop使用
- 簡單上手,按著官網(wǎng)走基本沒問題,基本上沒踩上什么雷,可能項目比較簡單
- 構(gòu)建流程簡單,hot reload強大
- 性能強大,啟動速度很快,并且界面無頓挫感
比較遺憾的事desktop電腦構(gòu)建系統(tǒng)獨立,mac環(huán)境下無法構(gòu)建windows應(yīng)用,有點小遺憾.
項目完全開源 可以前往GitHub查看 不要忘點個star??
https://github.com/lau1944/moyu_app
到此這篇關(guān)于詳解用flutter制作上班摸魚應(yīng)用的文章就介紹到這了,更多相關(guān)flutter 摸魚應(yīng)用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Android NavigationView頭部設(shè)置監(jiān)聽事件
這篇文章主要為大家詳細(xì)介紹了Android NavigationView頭部設(shè)置監(jiān)聽事件,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-10-10Android編程實現(xiàn)保存圖片到系統(tǒng)圖庫的方法示例
這篇文章主要介紹了Android編程實現(xiàn)保存圖片到系統(tǒng)圖庫的方法,結(jié)合實例形式分析了Android保存圖片到系統(tǒng)圖庫的常見操作方法、注意事項與相關(guān)問題解決技巧,需要的朋友可以參考下2017-08-08Android編程動態(tài)修改RelativeLayout寬高的方法
這篇文章主要介紹了Android編程動態(tài)修改RelativeLayout寬高的方法,涉及Android動態(tài)布局的相關(guān)技巧,需要的朋友可以參考下2015-12-12Android使用開源框架ANDROID-IMAGE-INDICATOR實現(xiàn)圖片輪播部署
這篇文章主要為大家詳細(xì)介紹了Android使用開源框架ANDROID-IMAGE-INDICATOR實現(xiàn)圖片輪播部署,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-01-01Android使用 Spinner控件實現(xiàn)下拉框功能
Spinner是android的一種控件,用它我們可以實現(xiàn)下拉框。下面通過實例代碼給大家介紹Android使用 Spinner控件實現(xiàn)下拉框功能,感興趣的朋友一起看看吧2018-08-08