「送码」使用 Flutter 三个月独立开发一个生活记录应用 MarkNow

[xyxc0673]

最近使用是 Flutter 开发并上线了一款生活记录 App ，这个帖子分享下一些心得。

简单来说，MarkNow 是一款可以通过自定义字段（支持文本、数值、开关、评分、单选、多选）来记录不同类型事项的 App 。

这个应用是很早之前就有的一个想法，当时调查了市面上的很多 App ，有类似的，但是都无法满足需求，所以就尝试自己开发。

项目是在 9 月份正式开发的，当时恰好 RevenueCat 举办了一个 App 开发比赛，就想着参与一下（虽然最后因为各种事情没有参与到），后面有段时间中断了，12 月份重新捡了起来，直到 1 月底上线。

零零散散的时间算起来应该还不到三个月，如果全部精力投入的话，一到两个月应该足够了。

附上使用 MasterGo 设计的商店宣传图：

技术选型

为什么会使用 Flutter 开发，说来比较巧合，本职工作是 Web 前端，也写过 React Native 和 SwiftUI ，今年上半年因为一个项目而入门了 Flutter 开发，曾经十分反感的嵌套地狱的写法也觉得还好，最多就是拆分多一些组件。

之前有一个已经上线的 App 是用 SwiftUI 开发的，但是众所周知，Xcode 的开发体验极其糟糕，而且 SwiftUI 还有莫名其妙的 Bugs ，经常一个 Bug 一调就是半天，也许是我水平太菜了吧（🤣）。

Flutter 现在的生态和 React Native 不相上下， 甚至在某些方面比 React Native 更丰富，比如音频解析，Flutter 的库支持的格式比 React Native 的多一些。

开发 MarkNow 主要涉及到是数据库、状态管理、路由管理、国际化。

数据库我选的是 Sqflite, 是一个需要自己写 SQL 语句建表、需要自己管理数据库迁移的一个 SQLite 库，相对于其他的 ORM 库，会麻烦很多，也许重新来过，我可能就使用 ORM 库了，手动管理真的要很小心。

状态管理使用的是 Riverpod ，当时接触过 Bloc ，感觉 Bloc 需要写太多模板代码了，Riverpod 更接近在前端学习到的概念，也就是 State + Provider ，如果有相关的经验的话，很容易上手，也有类似于 React Hooks 相关的概念。

路由方面，使用了 go router ，一开始是没有用路由管理的库的，直接使用内置的 Navigator API 也可以，不过如果需要使用更高级的路由功能比如声明式路由、嵌套路由等等时就派上用场了。

国际化使用了 easy_localization ，配合 cli 可以生成类型安全的 LocaleKeys：

 fvm dart run easy_localization:generate -S "assets/translations" -O "lib/l10n"
 fvm dart run easy_localization:generate -S "assets/translations" -O "lib/l10n" -o "locale_keys.g.dart" -f keys

另外大家可以看到我上面的脚本里面使用 fvm ，这是一个类似于 nvm 的 Flutter 版本管理工具，使用 fvm 可以很方便的在不同的 Flutter 版本中切换。

开发经验

在项目开发的前期，我认为有些配置或者架构之类的提前设计还是有必要的，比如：

设计统一

鲁迅曾经说过：一个好看的应用，那么它的设计一定是统一的。

这里的设计统一指的是，包括但不限于主题色、边距、圆角、字体大小、字重等等。

export 'border_radius.dart';
export 'box_shadow.dart';
export 'app_colors.dart';
export 'flex.dart';
export 'font_size.dart';
export 'font_weight.dart';
export 'padding.dart';
export 'app_theme.dart';

我在一开始的时候就让 AI 根据 TailwindCSS 的设计规范设计了这样的一套设计系统，后面在使用到这些元素的时候就引入这些，从根本上解决了设计不统一的问题。

不过至于界面要怎么布局、设计，这个只有经常接触好看的设计，去模仿、去练习才能掌握一些经验。

主题系统

如果一开始就打算让 App 支持亮色模式和暗色模式，那么一定要提前设计主题系统，不然后期打算支持其他模式的时候，到处去找界面去看哪些有没有适配，或者去改写死的颜色是一件挺麻烦的事情。

我是上线了 App 才支持的暗色模式，在这方面，AI 起到了很大的作用，我是让 AI 生成了主题系统，然后我再去一个个调颜色。

AI 编程

在使用 AI 辅助编程的时候，经常感觉到 AI 已经变成了写代码环节中不可获取的一部分，利用好 AI 会让写代码环节的耗时大大地减少。

当然目前来说 AI 乱改代码仍然是一个比较大的问题，我一般是尽量让 AI 去写一些比较小的模块，或者提前写好一份文档（或者这个环节也交给 AI ），在这份文档的基础上去编程，能减少一些与预期不一致的行为。

一个好的架构也能帮助到 AI 去实现功能，在这方面，MarkNow 的字段类型在后面使用 AI 完全拆分成类似于工厂模式一样的插件系统，这个插件系统将字段的定义、配置、显示等等都拆分成了不同的文件。

也就是说每当我需要新增一个字段类型的时候，我只需要让 AI 根据之前生成的插件文档创建一个新的字段，并且注册这个字段，就能很方面地支持一个新的字段，当然，生成的代码一般都是有错误的，这时候就需要人工介入了。

App 上线

因为 App 的定位主要还是国内市场，所以避免不了一些必要的环节，比如上架 App Store 需要 App 备案号，然后 App 备案又需要域名+国内服务器，这些因为之前已经有过经验了所以相对来说比较顺利，申请花了不到一个星期就下来了。

上架 App Store 需要 688 一年的开发者账号，申请流程在这里不过多赘述，需要注意的是，申请账号的时候务必保持一个机器去申请，不然就会和我一样身份信息永远被黑号，只能换其他人的身份信息来申请。

比上架 App Store 更麻烦的是上架国内的应用商店，需要公司主体+软著。

总结

MarkNow 上线前内测了半个月，已经在春节当天正式上线了，还在早鸟特惠中，截止到 2 月 13 号，已经收回了给苹果交的房租，但是距离覆盖生活成本还有很大的距离，而且最近付费断层式下滑🥹。

Flutter 开发体验不错，生态也很丰富，开发出来的 App 虽然没有原生应用那么丝滑，但是也不至于会卡顿，可能和 App 的也有关系。

如果大家有什么想问的也可以在评论区留言，会尽可能回答。

应用链接：MarkNow

送码

给 V2EX 准备了 14 个月度（价值 8 元）+ 10 个年度（价值 48 元）+ 6 个永久会员（价值 68 元）

参与方式：回帖参与

截止时间：2 月 20 日 23:59:59

[CalledKingsley]

大赞，优美的图表分析是最想要的，ui 也不错，支持开发者！
Y2FsbF9raW5nc2xleUAxNjMuY29t
希望独立开发者生态越来越好

[sun522198558]

支持 bGVhcm5pbmdfZ29AMTYzLmNvbQ==

[Emyorii]

SDBpMEBvdXRsb29rLmNvbQ==
谢谢大佬分享

[ufan0]

请问图表组件用的哪家呢？比如其中的热力图。

[xyxc0673]

@ufan0 fl_chart ，从下载量上看是最多人用的

[xujdan]

支持一下 YWRhbWpvbmFzODg4QGdtYWlsLmNvbQ==

[forty]

应用很好，但我这种懒人是不会记录自己的日常的，有这工夫我也不至于连博客都断更

[qiyuanshouji]

事件的日历图 很不错，还有比较多的小组件，热力图展示有助于直观的看到频率
求中
d3V3ZWlzY3JpcHRAZ21haWwuY29t

[Lrony]

赞！求个码体验下
Mjk2ODI5MDlAcXEuY29t

[lwldcr]

求个🐎体验一下 感谢大佬

bHdsZGNyQGdtYWlsLmNvbQ==

[allenvve]

瞻仰下
[email protected]

[magic3584]

不错。
我也用 flutter 开发了一个 app ，但是后面加了 iCloud 同步，所以从 sqlite 迁移到了 CoreData

[CoderLife]

ui 自己设计的吗

[paullige]

体验一下，感谢大佬
cGF1bGxpZ2UxOTVAZ21haWwuY29t

[zhhbinn]

期待 op 分享上线过程

[bboring]

学习一下 谢谢大佬
Ym9yaW5nbGVvNjgxQGdtYWlsLmNvbQ==

另外问一下 flutter 或 RN 上架 IOS 难吗，之前 uniapp 上架 IOS 总因为重复代码被打回，即使用了代码混淆也没用，RN 需要考虑这个问题吗

[southpark]

不错，支持，正好缺一个
MTE3MjkyMTcyNkBxcS5jb20=

[FirstMing]

我最喜欢的事情就是体验各种新软件啦

[gechang]

开源吗，学学 flutter

[zzccc0505]

学习体验，感谢大佬
enpjY2MwNTA1QGdtYWlsLmNvbQ==

[Lituby]

bGl0dWJ5QG91dGxvb2suY29t
谢谢大佬

[VtoEXL]

没有 android 吗，我也想过做类似的东西，记录打卡的

[smomop]

界面很赞啊，支持 OTg2OTI1Mjk1QHFxLmNvbQ

[AccelerXu]

审美在线啊，我目前在自学 flutter 没事就编一些小玩意自己用
无奈自己审美太差了，还不会切图哈哈哈哈哈哈哈

[gogo88]

d2VuemhhbzE5ODhAZ21haWwuY29t
谢谢大佬

[Daniel0829]

看着不错啊，先下载下来体验下，谢谢开发者啦。

[rap16]

挺好看的，支持一下

[make115]

ODM2MzIzNDkzQHFxLmNvbQ==

[dabaov2]

ZGRkaW5nZGRkaW5nQDE2My5jb20=谢谢大佬

[roma]

回帖参与
:)

[SuperXRay]

eHZwcGRkQGdtYWlsLmNvbQ== 感谢

[lanrete]

回帖参与下，感谢分享
amVvcml0b0BnbWFpbC5jb20=

[bao626]

棒棒，参与嘻嘻 cWliYW82MjZAZ21haWwuY29t

[icchux]

很棒啊 界面看着很舒服

[one234]

体验一下

[hanxu317138]

学习一下~
aGFueHUzMTdAcXEuY29t

[LongLJ]

体验一下、感谢分享 eGlhb2xvbmcubGpAcXEuY29t

[hanxu317138]

小红书 Ooooh 的人太多了. 建议上 ID

[Hilong]

所以安卓版本还没有上线是吗，我一直也想自己搞个这样的软件。但是只搞了个胚子出来放弃了。

[Zc2]

支持

[CEEC]

Flutter 写出来的体验感觉很棒了！

[besthui]

感谢分享 c2VuZF9tc2dfbWFpbEAxMjYuY29t

[acmpy]

感谢大佬分享，YWNtcHk0NTkyQGdtYWlsLmNvbQ==

[ricky0125]

体验一下

[coderth]

感谢大佬分享，Y29kZXJ0aEBvdXRsb29rLmNvbQ==

[korvin]

加油，希望越做越好。a29ydmluMTAxK3YyZXhAZ21haWwuY29t

[ufan0]

@xyxc0673 谢谢回复，查询了 fl_chart 相关，其并不支持 heatmap 热力图设计

[FLADIMIR]

UI 很漂亮，是开发者自己设计的吗？
谢谢，bGFuZmxhZGltaXJAb3V0bG9vay5jb20=

[diliburong]

请问 flutter 现在用什么 ui 库？自带的吗

[kele999]

支持

[stonewu]

参与一下
bWVAc3RvbmV3dS5jb20=

[Meijer]

想问下 SwiftUI 和 Flutter ，开发出来的 app 效果性能或者丝滑程度差距多远，最近挺纠结用哪个的，SwiftUI 和 Xcode 真的像一坨屎，但是现在只有 flutter 我怕太差

[csvips]

FLUTTER 确实还不错，做双端应用比较丝滑

[KaneW95]

谢谢大佬 bW92ZW9uS2FuZQ==

[xyxc0673]

@ufan0 #47 你说热力图吗，这个是用 AI 手搓的，热力图社区我看也有挺多的库

[xyxc0673]

@magic3584 这个迁移是无痛的吗，我现在是直接把数据库文件同步到了 iCloud 上

[quqivo]

谢谢大佬 Y29vYWlkJTQwMTYzLmNvbQ==

[xyxc0673]

@CoderLife
@FLADIMIR
@diliburong
是自己设计的，纯手搓的，之前学过一点点 UI 设计

[xyxc0673]

@bboring 我之前用 RN 和 Flutter 都没遇到重复代码这个问题

[zsun86]

大佬在内购这块的逻辑是怎么实现的

[xyxc0673]

@Meijer 可以下载下来体验一下，我感觉在 iOS 上动画会比较生硬，但是流畅度是可以的，可能是因为我这个基本上是个本地软件

[xyxc0673]

@zsun86 我接入了 RevenueCat

[xyxc0673]

@Hilong 还没上线，为什么放弃了🤔

[magic3584]

@xyxc0673 #56
很痛苦啊，数据库都换了。
你这直接把 sqlite 同步到 iCloud ，能做到多设备同步吗？卸载重装后也能还原数据？

[coldmonkeybit]

很好用的感觉，谢谢大佬，d3VtYW5ob0B0dXRhbm90YS5jb20=

[7ommy]

求码体验，感谢大佬
Nzg2NzMxMjU2QHFxLmNvbQ==

[Hilong]

@xyxc0673 #63 因为没有找设计，自己画的 UI 太抽象，mvp 版本搞出来给女朋友用都被嫌弃了。

[fantasy55]

行动力满分，后端一直想用 flutter 写个 app ，还没开始。。。

[Hysian]

参与一手

[bestie]

最近我也在筹备使用 Flutter 开发一款小而美的工具类 APP ，楼主的技术栈感觉和我选择的和很类似，我也是前端，感觉太对了，跟踪一波楼主的进度，学习下经验。

[iwfan]

大赞 OP 的执行力，参与一下

[jichangzhuanyong]

靠 app 的收入想覆盖生活成本难度不小啊！换个思路，如果不是全职开发能达到这个效果，岂不是实现财富自由了？

[boringfish]

Y2RueHlmQGdtYWlsLmNvbQ==
参与一下

[kevin58]

很棒的想法还能付出行动并且成功上架，跟随楼主也学习一下；
重在参与：a2V2aW5rYWk1ODg4QGdtYWlsLmNvbQ==

[xyxc0673]

@magic3584 #64 能实现上传数据库文件和下载数据库文件并还原数据库，无法实时同步

[kongkx]

dark mode 好像还没处理好

[xyxc0673]

@jichangzhuanyong 有睡后收入总归是好的

[xyxc0673]

@kongkx 感谢反馈，可能是引导页还没处理好 dark mode

[ufan0]

@xyxc0673 #55 还是你设计的好看，所以前来询问了。

期待有时间可以分享下这个 app 的运维细节：订阅管理、日活监控都是用的什么，有什么推荐呢。

[magic3584]

@xyxc0673 #75
那还是比 CoreData 差点

[iyobucuo]

加油！

[ychen997]

支持一下 求一个永久码子
eWluYW4uZW1haWxAZ21haWwuY29t

[beak2333]

YmVhazIzM0BnbWFpbC5jb20=
参与一下

[lilyaki]

重在参与

[BetterSci]

求一个永久码子

[IAmRobot735]

求一个永久的码

[AceRacer]

支持一下，不错不错

[yoyoyoyolol]

挺好看的，支持一下

[tennc]

支持一下，看看是不是分子

[hapsinge]

aGFwc2luZ2VyQGdtYWlsLmNvbQ==

支持求码，界面挺好看的。谢谢

[marcong95]

看上去不错，支持一下

也来求个码，感谢分享~ bWFyY29uZzk1QDE2My5jb20=

[RobinzzZ]

bGlqdW55aXp6enpAZ21haWwuY29t

支持一下，求码

[greensy]

作为一个孜孜不倦下载测评使用记录和效率类产品的爱好者
请给我个体验机会
c3YwOUBxcS5jb20

[MXMF]

MTI4OTMzNzUwNUBxcS5jb20=
支持一下

[miaoxiaomayi]

想参与一下，我记得还有个软件名字跟这个很像，请甩来一个兑换码

[JiJJA]

支持,想体验一下;upup
MTA3MjcxMDQxM0BxcS5jb20=

[aero99]

感觉可以用来记录一些简单事件，还有习惯打卡用途

[hitaoguo]

简单下载用了下，说点感受。
添加事项后，事项模板没有自动关闭（应该很少要连续添加事项的）
在添加事项界面，字段的展示那块，字段类型的文本，与字段名称放在一起，感觉有点挤，看着比较累。
还有 [此刻] 这个标签页的筛选 [今天] [全部] ，这里可以加个 [明天] [本周] [本月] 这样的？另外是否也可以展示出事项的数量。

[zhanggang807]

ZGVhbnpoZ0BnbWFpbC5jb20K
支持一下

[Soonan]

参与一下
这类 app 好像有几个作者也在 v2