首页
学习
活动
专区
圈层
工具
发布

Flutter 移动端架构实践:Widget-Async-Bloc-Service

然而,在构建完成并将它们一次次的重构之后,我调整出了一种在我所有项目中都能够运行完好的开发体系,因此,在本文中,我将介绍一种我定义的新的架构模式: 从现有的开发模式中借鉴了很多思想; 调整它们以满足实际开发...换句话说,我们可以将Service视为 纯粹 的功能组件, 它可以修改和转换从第三方库收到的数据。...RxCommand是抽象处理UI事件和更新UI的库,它删除了使用BLoC创建StreamController/Stream对所需的样板代码。...无论如何,我发现BLoCs在使用Firestore构建app时效果非常明显,其中数据通过流从后端流入app。 在这种情况下,通常将流进行组合或使用RxDart对其执行转换,BLoC很擅长这个。...本文源码 Flutter & Firebase构建的身份验证流程: https://github.com/bizz84/firebase_auth_demo_flutter 接下来的这个项目,它针对我的

20.9K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    【Flutter&Flame 游戏 - 贰玖】pinball 源码分析 - 视口与相机

    这是我参与「掘金日新计划 · 6 月更文挑战」的第 30 天,点击查看活动详情 ---- 前言 这是一套 张风捷特烈 出品的 Flutter&Flame 系列教程,发布于掘金社区。...- 项目结构介绍 【Flutter&Flame 游戏 - 贰伍】pinball 源码分析 - 资源加载与 Loading 【Flutter&Flame 游戏 - 贰陆】pinball 源码分析 - 游戏主菜单界面...认识视口与相机 相机是我们日常生活中非常常见的概念,在 Flame 中,相机的概念如何理解呢?现实生活中,当你使用相机拍出一张照片,其囊括的区域是有限的,这个区域也就是视口 Viewport。...【29/02】 比如上图中默认相机的视口尺寸是 900*600 ,并不是指白色区域的是 900*600 逻辑像素。另外,可以看到角色的尺寸没有改动,但在这个视口尺寸下,就会显得较小。...这个系列中,整个 Flame 的各个方面基本上都涵盖了,并且结合 Flutter 官方开源的 pinball 项目进行源码分析,或多或少对大家研究 Flutter 休闲游戏开发有所帮助。

    1.5K20

    Flutter for OpenHarmony 构建简洁高效的待办事项应用 实战解析

    Flutter for OpenHarmony 构建简洁高效的待办事项应用 实战解析 在移动开发的世界中,待办事项(Todo)应用常被视为“Hello World”级别的入门项目。...本文将深入剖析一段由 AI 编程助手 Trae 生成的 Flutter 代码,带你从零构建一款符合 Material Design 3 规范、支持滑动删除、状态切换与空状态引导的现代化任务清单应用。...+ ListView.builder UI 层:构建页面骨架与动态列表 Dismissible 交互增强:实现滑动删除手势 整个应用仅 150 行核心代码,却完整覆盖了 Todo 应用的核心功能...六、扩展建议:从 Demo 到产品 当前代码已是一个功能完整的 MVP,若要推向生产,可考虑: 方向 实现思路 数据持久化 集成 shared_preferences 或 hive 保存任务 撤销删除...Firestore 实现多设备同步 结语:小应用,大智慧 这个由 Trae 生成的 Todo 应用,虽功能简单,却处处体现着 用户中心的设计思维 与 Flutter 开发的最佳实践。

    14010

    慕课甄选-Flutter零基础极速入门到进阶实战

    慕课甄选推出的 “Flutter 零基础极速入门到进阶实战” 课程,恰好以 “痛点为导向、实战为核心”,通过 “基础速成 + 核心突破 + 项目落地” 的三阶体系,帮零基础用户 3 个月内从 “跨平台小白...阶段 3:进阶实战(30 天)—— 开发 “企业级完整项目”,具备求职竞争力目标:将前两阶段的知识整合,开发 “2 个企业级完整项目”(电商 APP、社交 IM APP),覆盖 “需求分析→架构设计→功能开发...“个人信息(头像 + 昵称,支持修改并同步到服务器)、地址管理(添加 / 编辑 / 删除地址,设置默认地址)、收藏列表(显示收藏的商品,支持取消收藏)”。...零基础学习者(学生 / 转行)——3 个月从 “小白” 到 “能做企业级项目”学习收益:掌握 “Flutter 开发全流程”,能独立开发 “静态页面→动态交互→完整项目”,拥有 2 个可展示的企业级项目...四、从 “学习” 到 “求职” 的全链路支撑这门课的核心优势不仅是 “内容落地”,更在于 “配套资源能帮你解决从学习到求职的所有问题”,避免 “学完课却不知道如何用”。

    57810

    应用程序崩溃,融资泡汤,我们三个程序员惨被祭天

    我们每周上班六天,其中至少四天需要加班,但公司一分钱加班费都没付过……甚至连句谢谢都没有。他们表现出的态度,就好像白白加班是天经地义一样。 这对开发者来说显然是个危险信号。...2傲慢的 CTO 完全不顾现实情况提出的开发要求根本无法完成 公司 CTO 总是给我们布置整整一周的任务,完全不在乎我们的实际开发速度如何。...3应用崩溃 有一天,公司 CEO 接手一项需要在一个半月内完成的新项目:开发一款移动应用,再加一套定制化交付平台。 项目的最初目标是开发一套原型方案,用于向投资方展示公司实力、说服他们顺利注资。...我们的阵容为一名后端开发人员、一名 Flutter 移动开发人员,再就是前端 Web 开发人员(我)。 但我们还是按时完成了——带着大量 bug 完成的。...当用户从移动前端向 Firestore 推送的是字符串数据而非数字数据时,应用就会崩溃。 4融资计划泡汤,我们成了替罪羊 资方大哥们拒绝了投资申请。

    2.2K10

    鸿蒙Flutter实战:12-使用模拟器开发调试

    Next 创建模拟器,再点击 Previous 创建成功 3.回到模拟器列表窗口,列表中出现了新建的模拟器,点击运行按钮, 模拟器运行成功。...回到 Vscode 中的Flutter 项目,像普通的 flutter 项目那行,点击运行按钮。 注意事项 1....Flutter 运行 App,打包安装成功, 运行闪退 从以下方面检查: 1.1 如果是 X86电脑架构的模拟器,尝试删除 main.dart 中的 FloatingActionButton 1.2 如果...Framework • revision 85630b0330 (13 天前) • 2024-10-26 02:39:47 +0000 Engine • revision f6344b75dc Tools...• Dart 3.4.0 • DevTools 2.34.1 3.3 关闭全局 flutter 配置 在 ~/.zshrc 或 ~/.bash_profile中,删除或者注释掉类似这样的配置,重启命令行

    84810

    Flutter零基础到进阶:21天极速入门+跨平台实战项目开发

    这篇“心法”将为你规划一条21天的极速学习路径,带你从懵懂到自信,最终能独立开发出跨平台应用。第一部分:核心理念破冰 - 为什么是Flutter?...运行第一个flutter create项目,理解项目结构。核心动作:疯狂使用flutter run和热重载(Hot Reload),感受修改代码后界面瞬间变化的魔力。...学习展示数据:ListView(列表)、Card(卡片)。本周挑战:综合运用布局、状态、导航和这些基础Widget,构建一个简单的待办事项(Todo)应用,能添加、删除、切换完成状态。...这是对你21天学习成果的最佳肯定。第三部分:从进阶到精通 - 21天之后的路21天让你“入门”,但Flutter的生态浩瀚无垠。...学习的“道”与“术”这21天的旅程,你真正要掌握的不仅仅是Widget的拼凑,更是一种声明式UI的编程思维:从“如何一步步操作UI变更”的命令式思维,转变为“当前状态(State)下,UI应该长什么样”

    93510

    3 名程序员被开除:因一次 APP 崩溃。。。

    我们不得不开足马力,每周六天中至少四天在加班。但是公司并没有付我们加班费,甚至从来没有表示过谢意,好像我们加班就是理所应当的。 这对开发人员来说是个危险信号。...应用程序崩溃 后来有一天,CEO要求搞一个需要在一个半月内完成的新项目:一个移动应用程序和一个用于构建定制交付平台的互联网平台。 起初的目标是,建立一个原型,拿给潜在投资者看,以筹集资金。...该文本字段要求输入数字,但CEO结果输入的却是数字和字符。 为了快速开发,我们使用了Firebase的Cloud Firestore来保存数据。...当用户从移动前端将字符串数据而不是数字数据推送到Firestore时,应用程序崩溃了。 投资被拒绝,我们成了背锅侠 结果投资人拒绝了投资。当然,在我看来,第一个错误出在CTO的身上。...根据工作协议,公司必须在解雇前两个月通知我们。由于CEO很不高兴,立马支付了两个月的薪水,解雇了我们。 老实说,我还是很感谢那家公司,因为我有两个月的空档期。

    2.6K20

    Flutter 下载器 | flutter_download_manager源码解析

    前言 内容类应用中图片或文件下载,一般应用中应用更新和升级,这些都是经典的下载场景。下载是项目中基础且重要的模块。...从代码逻辑复用性和人力成本考虑,一直想实现一个纯Dart实现的下载库,作为技术储备。...原理解析 如何管理任务 这里不具体阐述代码流程,为方便理解直接拿生活中惯用做事逻辑举例,代码实现可自行查阅,也是按照这个套路来滴,首先有两个集合: 任务请求列表,里面是想做的事情,每件事情如果非要定义状态的话...查询任务管理表中任务状态并决定是否有资格真正添加到请求列表。 已完成任务:3 天前已经摸过了一次鱼,一周最多摸鱼一次,直接返回任务结果,否掉这种不切实际的想法,没脸加入请求列表。...此时看你怎么处理了,若 50%的砖还在,你可以继续搬,将任务添加到请求列表,从 50%开始直到完成。若没搬的砖堆得横七竖八不想继续码,可删除任务管理表中记录,当一次新任务添加请求列表和管理列表中。

    1.5K20

    Flutter 数据持久化存储之Hive库

    Flutter 数据持久化存储之Hive库 前言 正文 一、配置项目 二、UI ① 增加UI ② 显示和删除UI 三、使用Hive ① 初始化Hive ② TypeAdapter自定义对象 ③ 注册TypeAdapter...并且Hive是用纯Dart编写的,这使得它比不支持Flutter网络的SQLite更有优势。 一、配置项目   首先我们创建一个名为study_hive的项目。   ...创建项目之后,我们配置一下依赖库,在项目的pubspec.yaml文件中,添加如下所示代码: dependencies: get: hive: hive_flutter: dev_dependencies...② 显示和删除UI 在build中添加如下代码: ///列表组件 var listWidget = Expanded( child: Container( width...如下图所示:   在列表的Item中我们除了显示用户的名称和年龄之外还有两个功能按钮,分别用于修改和删除,如下图所示:   针对于删除很简单之后调用控制器里面写好的函数就可以了,删除之后列表会自动刷新的

    1.7K01

    谷歌用机器人大规模删除代码:二十多年积累了数十亿行,已删除5%C++代码

    那么,他们是怎么清理这些死代码的?谷歌最近在其博客中介绍了 Sesenmann“自动删除代码”项目,该项目的目标是自动识别出无效代码,再发送代码审查请求(变更列表)以将其删除。...Sesenmann 在德语中代表“死神”的无情收割之义。据谷歌介绍,该项目非常成功,每周可提交超过 1000 个待删除的变更列表,而且截至目前已经删除了谷歌全部 C++ 代码中的 5%。...虽然删除死代码最终会给软件工程师自己带来助益,大家也肯定希望管理的代码项目能够保持整洁,但“Sesenmann”运行过程中,谷歌也发现很多工程师并不愿意经常收到用于删除代码的自动变更列表。...拼多多临时决定五一三天假,员工集体退票;字节回应140万美元年薪挖角OpenAI;AI龙头寒武纪裁员,研发员工被逼签字|Q资讯 活动推荐 口碑好课|Flutter 核心技术与实战 Flutter...前美团点评高级技术专家陈航,将通过对比其他框架的特性,深挖 16 个 Flutter 常见开发问题,带你从 0 到 1 搭建 Flutter 混合开发框架,实现快速掌握 Dart 语言核心特性实战,沉浸在

    44510

    【老孟Flutter】Flutter 2 新增的功能

    Flutter 2 release 版本前几名志愿者贡献者是xubaolin46个PR,a14n32个PR,专注于使Flutter达到零安全,hamdikahloun具有20个PR,改善了Flutter...Flutter Fix是事物的组合。首先,dartCLI工具有一个新的命令行选项,名为dart fix,它知道在哪里可以查找已弃用的API列表以及如何使用这些API更新代码。...其次,它是可用修补程序本身的列表,与版本2捆绑在一起。最后,它是针对VS Code,IntelliJ和Android Studio IDE的更新的Flutter扩展集,它们知道如何公开相同的内容。...但是计算机是;通过执行以下命令,您可以看到我们知道如何在整个项目中进行的所有修复: $ dart fix --dry-run 如果您想批量应用它们,可以轻松地这样做: $ dart fix --apply...和SliverAnimatedList.of中删除nullOk参数 69620从BuildContex中删除不赞成使用的方法 70726从Navigator.of中删除nullOk参数,并添加Navigator.maybeOft

    10.9K20

    【 Flutter 滑动探索】第四本小册上线

    一方面,Flutter 的版本更新是比较快的,前三本小册书写时,还未使用空安全。或者 Flutter 有些破坏性的更新,会使旧版本出现问题,从而影响小册的使用。...我在一开始对它们也没有很深刻的认识。 当认清 Flutter 滑动体系的构成及运作逻辑后,从源码的角度去认识这些组件的构成和用途,自然能站在更高的维度来使用它们。...在遇到关于滑动的异常或新需求时,可以从更广阔的视角去看待问题,而非只知皮毛,管中窥豹。 对源码的探索本身就是一件很有意义的事,从中可以看到创作者对类结构的定义,如何处理类与类之间的关系。...当我们通过源码可以读懂他们所描绘的 风采,在手指滑动列表的那一刻,目之所见已不再仅是视口的滑动,还有滑动机制中的各个对象如何像齿轮一样啮合,驱动整个体系的运转。...---- 三、 本册内容简介 第一部分主要目的是对 视口滑动 的构成进行初步的认知,其中会通过对我们最熟悉的 ListView 进行源码分析,从而引出其背后更深层的知识,以此从源码中逐步认知构成 滑动体

    62520

    师于源码 | Flutter 区域视口双向滑动

    因为我是知道的: Flutter DevTools 的 Web 界面是 Flutter 项目,而且是由官方维护的开源项目 devtools。...既然是开源的,从代码中得到 Debugger 面板代码区域,视口双向滑动的实现方式就有可行性。当你手中握有源码,并且其中有你非常需要的功能,那手撕它就会变得非常有趣,下面一起来看看吧。...根据 Web 的界面,可以很快定位到对应代码实现的位置,从这里可以看出 Flutter DevTools 的开源项目分包还是非常好的。...区域视口双向滑动的功能就从 Flutter DevTools 源码中扒出来了,然后分享给大家,这个功能在桌面端中是非常非常必要的。...也希望大家在开源项目中遇到某些自己渴望的功能,也可以静下心来撕一撕,从源码中学习,师于源码。 那本文就到这里,谢谢观看 ~

    1.1K20

    2023 Google 开发者大会:Firebase技术探索与实践:从hello world 到更快捷、更经济的最佳实践

    在本文中,前面我会向大家介绍这款产品的特性,以及如何使用它开发一个非常简单的应用,最后我们将探讨Firebase中 Cloud Functions for Firebase 的全新并发选项及其如何影响应用程序的开发...在构建时,你可以使用Google中的很多后端架构,以此来加速应用的开发,比如你可以在FireBase中使用Cloud Firestore,Extensions,App Check,Cloud Function...,下面我们使用一个具体的案例来讲解如何使用Firebase。...我们需要开启这些服务 启用电子邮件登录以进行 Firebase 身份验证 设置 Cloud Firestore 项目中集成Firebase 为了让前端应用程序使用 Firebase,我们需要将 Firebase...可以从 Google 的 CDN 添加库,也可以使用 npm 在本地安装它们,然后将它们打包到应用程序中。

    8.7K60

    首战 之 Flutter 1.0 久违了(Mac)

    对于移动端 Android 而言,日新月异变更的同时,随之而来的是更多的挑战,大前端、跨平台,到底如何才能在这科技的洪流中保持自身不败,LZ 暂时也是懵逼、瞎子过河中。...今天,我们不讲高深,不装 B,不开玩笑,那么我们如何玩转 Flutter 呢?...不要怕,贴心的 Flutter 已经告诉我们如何解决这些问题,关键字请看上图中的各种 “ run ”,之后复制后续提供命令进行安装即可。 漫漫修复路,俩眼泪儿流~!...天,具体忘记了,截取部分截图如下: 接下来这个对于 LZ 就比较崩溃了,还好,昨天,嗖嗖嗖嗖嗖嗖的完成了。...上图中,LZ 在等待的过程中为 AS 以及 VS Code 配置好 Flutter 插件,而关于 IDEA 直接卸了兔子,磨磨唧唧,Fuck!

    79630

    开始使用-编写你的第一个Flutter应用程序 顶

    如何实现有状态的小部件。 如何创建一个无限的,延迟加载的列表。 如何创建并导航到第二个屏幕。 如何使用主题更改应用程序的外观。...这个类将保存随着用户滚动而无限增长的生成的单词对,以及最喜欢的单词对,因为用户通过切换心脏图标来将它们从列表中添加或删除。 你会一点一点地建立这个类。...你现在应该在每一行看到开放的心,但它们还没有互动。 5.在_buildRow函数中让心灵可点击。 如果单词条目已被添加到收藏夹中,再次点击它将其从收藏夹中删除。...在Flutter中,导航器管理包含应用程序路由的堆栈。 将路由推入导航器的堆栈,将显示更新为该路由。 从导航器的堆栈中弹出路由,将显示返回到前一个路由。...1.向RandomWordsState的构建方法中的AppBar添加列表图标。 当用户点击列表图标时,包含收藏夹项目的新路线被推送到导航器,显示该图标。

    12.5K20
    领券