详解用flutter制作上班摸鱼应用

 更新时间:2022年03月23日 09:28:57   作者:niceguynum2  
本文主要介绍了用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 desktop使用

  • 简单上手,按着官网走基本没问题,基本上没踩上什么雷,可能项目比较简单
  • 构建流程简单,hot reload强大
  • 性能强大,启动速度很快,并且界面无顿挫感

比较遗憾的事desktop电脑构建系统独立,mac环境下无法构建windows应用,有点小遗憾.

项目完全开源 可以前往GitHub查看 不要忘点个star😊

https://github.com/lau1944/moyu_app

到此这篇关于详解用flutter制作上班摸鱼应用的文章就介绍到这了,更多相关flutter  摸鱼应用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Android Jetpack组件ViewModel基本用法详解

    Android Jetpack组件ViewModel基本用法详解

    这篇文章主要为大家介绍了Android Jetpack组件ViewModel基本用法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01
  • Android3.0 ActionBar导航标题栏使用解析

    Android3.0 ActionBar导航标题栏使用解析

    这篇文章主要为大家详细解析了Android3.0 ActionBar导航标题栏的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • Android getSystemService用法实例总结

    Android getSystemService用法实例总结

    这篇文章主要介绍了Android getSystemService用法,结合实例形式总结分析了getSystemService获取系统Service的相关使用方法与注意事项,需要的朋友可以参考下
    2016-01-01
  • android使用ViewPager实现图片自动切换

    android使用ViewPager实现图片自动切换

    这篇文章主要为大家详细介绍了android使用ViewPager实现图片自动切换,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-02-02
  • Android画板开发之撤销反撤销功能

    Android画板开发之撤销反撤销功能

    这篇文章主要为大家详细介绍了Android画板开发之撤销,反撤销功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-12-12
  • Android实时文件夹创建方法

    Android实时文件夹创建方法

    这篇文章主要介绍了Android实时文件夹创建方法,涉及基于Activity实现文件实时查询的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09
  • 一款Android APK的结构构成解析

    一款Android APK的结构构成解析

    本篇文章介绍了我在学习过程中对于Android 程序的理解总结,刨析了apk的组成与产生过程,通读本篇对大家的学习或工作具有一定的价值,需要的朋友可以参考下
    2021-10-10
  • TableLayout(表格布局)基础知识点详解

    TableLayout(表格布局)基础知识点详解

    在本文里我们给大家分享了关于TableLayout(表格布局)的相关基础知识点内容,需要的朋友们学习下。
    2019-02-02
  • Flutter路由守卫拦截的实现

    Flutter路由守卫拦截的实现

    路由守卫拦截最常见的应用场景就是对用户数据权限的校验,本文主要介绍了Flutter路由守卫拦截的实现,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • android计算pad或手机的分辨率/像素/密度/屏幕尺寸/DPI值的方法

    android计算pad或手机的分辨率/像素/密度/屏幕尺寸/DPI值的方法

    本文将介绍手机布局/界面设计/分辨率/密度相关,接下来介绍android计算pad或手机的分辨率像素等等的方法,感兴趣的朋友可以了解下,希望本文可以帮助你
    2013-01-01

最新评论