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

最近使用是 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