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