Shulou(Shulou.com)06/01 Report--

Editor to share with you how to use flutter to make work fish app, I hope you have something to gain after reading this article, let's discuss it together!

I recently saw a fish-touching app on the Internet, and it was quite fun, so I wrote one with flutter myself.

I've used flutter to make mobile applications before, but I haven't tried it in desktop. After all, I'll try it here and talk about the flutter experience.

Current flutter environment 2.8

Add flutter desktop support (default project exists ios,android project package)

Flutter config-enable--desktop

This is mac, so platform=macos, take a closer look at the official website of flutter.

The code is so simple that I won't talk about the UI part.

In the fish touching interface, I use Bloc to do the countdown calculation logic. By default, the fish touching time lasts 15 minutes.

MoYuBloc (): super (MoyuInit ()) {on (_ handleMoyuStart); on (_ handleUpdateProgress); on (_ handleMoyuEnd);}

Fishing begins to deal with events

/ / handle moyu start action FutureOr _ handleMoyuStart (MoyuStarted event, Emitter emit) async {if (_ timer! = null & & _ timerroom.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));}

Update the progress of touching fish

/ / handle clock update FutureOr _ handleUpdateProgress (MoyuProgressUpdated event, Emitter emit) async {final totalTime = event.totalTime; final progressTime = event.progressTime; emit (MoyuIng (progress: progressTime / totalTime, progressTime: progressTime),);}

The fishing is over, the release is over.

/ handle clock end FutureOr _ handleMoyuEnd (MoyuEnded event, Emitter emit) async {emit (MoyuFinish ());}

Summarize 3 event (touch fish start, process update, touch fish end)

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 ();}

Among them, 3 state (initial, ongoing, and finished)

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 {}

Start fishing, record the total time and consumption time, calculate the progress percentage, update the UI progress bar

The following is the interface update logic

BlocConsumer (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,)

It is very simple and the most important thing is the progress status, and then whether to touch the fish button again after the end.

Build and run flutter applications

Flutter run-d macos

Final result display

After reading this article, I believe you have a certain understanding of "how to use flutter to make work fishing app". If you want to know more about it, you are welcome to follow the industry information channel. Thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.