返回顶部
首页 > 资讯 > 移动开发 >详解用flutter制作上班摸鱼应用
  • 848
分享到

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

2024-04-02 19:04:59 848人浏览 泡泡鱼
摘要

网上最近看到了个摸鱼应用,还挺好玩的,我就自己用Flutter写了一个。 之前我有用flutter制作过mobile应用,但是没有在desktop尝试过;毕竟2.0大更新,我这里就在

网上最近看到了个摸鱼应用,还挺好玩的,我就自己用Flutter写了一个。

之前我有用flutter制作过mobile应用,但是没有在desktop尝试过;毕竟2.0大更新,我这里就在这试手一下,并说说flutter的体验.

当前flutter环境 2.8

增加flutter desktop支持 (默认项目之存在iOSAndroid项目包)

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  摸鱼应用内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: 详解用flutter制作上班摸鱼应用

本文链接: https://lsjlt.com/news/143539.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 详解用flutter制作上班摸鱼应用
    网上最近看到了个摸鱼应用,还挺好玩的,我就自己用flutter写了一个。 之前我有用flutter制作过mobile应用,但是没有在desktop尝试过;毕竟2.0大更新,我这里就在...
    99+
    2024-04-02
  • 怎么用flutter制作上班摸鱼应用
    小编给大家分享一下怎么用flutter制作上班摸鱼应用,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!网上最近看到了个摸鱼应用,还挺好玩的,我就自己用flutter写了一个。之前我有用flutter制作过mobile应用,但...
    99+
    2023-06-29
  • 利用Flutter制作一个摸鱼桌面版App
    目录准备工作开始敲代码找到资源思考布局实现布局思考动画实现动画结语Win10商店上架了一款名为《摸鱼》的App,在下载打开之后,这个App会让你的电脑进入一个假更新的画面,让别人以为...
    99+
    2024-04-02
  • 如何利用Flutter制作一个摸鱼桌面版App
    这篇文章将为大家详细讲解有关如何利用Flutter制作一个摸鱼桌面版App,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。Win10商店上架了一款名为《摸鱼》的App,在下载打开之后,这个Ap...
    99+
    2023-06-22
  • 怎么用PyQT5制作一个桌面摸鱼工具
    这篇文章主要介绍“怎么用PyQT5制作一个桌面摸鱼工具”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“怎么用PyQT5制作一个桌面摸鱼工具”文章能帮助大家解决问题。按键功能控制q 退出B 书签功能F ...
    99+
    2023-06-29
  • 怎么制作Flutter应用
    这篇文章主要介绍怎么制作Flutter应用,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!1. Flutter 是什么?Flutter 是 Google 开源的 UI 工具包,帮助开发者通过一套代码库高效构建多平台精美...
    99+
    2023-06-04
  • Android触摸事件的应用详解
    前言上一篇讲了Android触摸事件的传递机制,具体可以看这里初识Android触摸事件传递机制。既然知道Android中触摸事件的传递分发,那么它能解决什么样的问题,在我们实际开发中如何应用,这点很重要,知道原理是为了解决问题而准备的。这...
    99+
    2023-05-31
    android 触摸事件 触摸
  • Flutter EventBus事件总线的应用详解
    目录前言EventBus的简介EventBus的实际应用总结前言 flutter项目中,有许多可以实现跨组件通讯的方案,其中包括InheritedWidget,Notificatio...
    99+
    2024-04-02
  • 利用Python构建Flutter应用的教程详解
    目录关于FLET如何安装 FLET简单介绍 Flutter用 FLET 构建简单的应用程序用户界面你知道可以用 Python 来构建 flutter 应用吗? Flutter 在软件...
    99+
    2022-12-20
    Python构建Flutter应用 Python Flutter应用 Python Flutter
  • Flutter应用Windows平台接入实践详解
    目录前言Windows平台接入模块化拆解XModule基于vcpkg的C++依赖管理总结前言 Windows应用开发有着较为丰富和多样的技术选型。C#/WPF 这种偏Native的...
    99+
    2023-02-02
    Flutter接入Windows平台 Flutter Windows
  • Flutter利用Canvas绘制精美表盘效果详解
    目录前言初始化面板刻度刻度线刻度值指针时针分针秒针动起来前言 趁着周末空闲时间使用 Flutter 的 Canvas制作了一个精美表盘。 最终实现的效果还不错,如下: 前面说到使用...
    99+
    2024-04-02
  • Flutter应用框架搭建之屏幕适配详解
    目录原理flutter_screenutil添加依赖初始化使用效果其他 Api因移动设备的多样性,特别是 Android 的碎片化严重,存在各种各样的分辨率,而 Flutter 跨平...
    99+
    2024-04-02
  • Flutter事件监听与EventBus事件的应用详解
    目录一 指针事件 Pointer二 手势识别三 跨组件事件的传递在Flutter中,手势有两个不同的层次: 第一层:原始指针事件(Pointer Events) 第二层:手势识别(G...
    99+
    2023-05-15
    Flutter事件监听 Flutter EventBus
  • 详解Android应用沙盒机制
    目录前言一、Android应用DAC沙盒二、Android应用权限三、应用信息的存储四、应用权限的映射五、应用的SELinux标签六、Android应用MAC沙盒前言 Androi...
    99+
    2024-04-02
  • Flutter瀑布流仿写原生的复用机制详解
    目录废话开篇:先看复用效果复用状态打印问题一、实现思路是什么?问题二、UI布局代码分析。总结废话开篇: iOS与android在实现列表界面的时候是有重用机制的,目的就是减少内存开销...
    99+
    2024-04-02
  • 详解利用Flutter中的Canvas绘制有趣的图形
    目录简介等边三角形构建重复之美绘制彩虹绘制五角星总结简介 上一篇我们介绍了使用 Flutter 的 Canvas 绘制基本图形的示例,简单的示例没什么好玩的,今天这一篇我们来点有趣的...
    99+
    2024-04-02
  • SpringBootShiro在Web应用中的作用详解
    目录01-Tomcat 中的 Filter 责任链02-Shiro 中的 filter 链结构03-shiro-filters 如何与 servlet 中的 filter 关联起来0...
    99+
    2023-02-10
    Spring Boot Shiro Web Shiro在web作用
  • 详解如何使用Pyecharts制作Map3D
    基本设置 class Map3D( # 初始化配置项,参考 `global_options.InitOpts` init_opts: opts.InitOpts = opts.InitOpts()...
    99+
    2022-06-02
    Pyecharts制作Map3D Python Pyecharts
  • 用python制作词云视频详解
    使用到的第三方库 Package Version --------------- --------- baidu-aip 2.2.18.0 jieba...
    99+
    2024-04-02
  • 详解在SpringBoot应用中获取应用上下文方法
    定义上下文工具类:package com.alimama.config;import org.springframework.context.ApplicationContext;public class SpringContextUtil...
    99+
    2023-05-31
    spring boot 上下文
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作