I saw a fishing app on the Internet recently. It’s really fun.

I decided to write one myself with Flutter

I have used Flutter to make mobile applications before, but not on desktop. After all, the Big 2.0 update, I’m here to give it a try and talk about the Flutter experience.

Current Flutter environment 2.8

Added support for Flutter Desktop (default project exists for ios and Android project packages)

flutter config --enable-<platform>-desktop
Copy the code

I’m using a MAC, so platform= macOS. Read the website of Flutter

The code is pretty simple and I won’t go into the UI part

In the fishing interface, I used Bloc as the countdown calculation logic, and the default fishing time is 15 minutes

 MoYuBloc() : super(MoyuInit()) {
    on(_handleMoyuStart);
    on(_handleUpdateProgress);
    on(_handleMoyuEnd);
  }
Copy the code

Fish start event processing

// 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));
  }
Copy the code

Fishing progress update

// 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),
    );
  }
Copy the code

Touch fish end, release end event

// handle clock end
  FutureOr<void> _handleMoyuEnd(
      MoyuEnded event, Emitter<MoyuState> emit) async{ emit(MoyuFinish()); } to summarize3Event (fish start, process update, 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();
}
Copy the code

Three of the states (fish initial, fish in progress, fish over)

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 {}
Copy the code

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

Here is the interface update logic

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 constSizedBox(); }, listener: (context, state) {}, listenWhen: (pre, cur) => pre ! = cur, ),Copy the code

Very simple the most important thing is the status of the progress, and then whether to touch the fish button again after the end

Build the flutter application to run

flutter run -d macos 
Copy the code

Final results show

Summarize the use of Flutter Desktop

  1. Simple start, press the official website to go basically no problem, basically did not step on what thunder, may be relatively simple project
  2. The build process is simple and Hot Reload is powerful
  3. Powerful performance, fast start up, and interface without frustration

Desktop build system independent, MAC environment can not build Windows applications, a bit of a pity.

The project is completely open source and can be viewed at GitHub. Don’t forget to click on star😊

Github.com/lau1944/moy…