Flutter 自从2018年底发布1.0 以来,热度一直居高不下,虽然现在目前许多公司并没有使用这个平台,毕竟公司追求的是稳定,但是我认为 Flutter 从目前各个方面的性能来看应该是大势所趋,所以也就研究并实战了 Flutter 技术。
经过一个多月的学习和编码,终于完成了一个完整的 Flutter 项目。完成这个项目还是收获颇丰。不管是 Widget 组件的使用,还是 Flutter 状态的刷新,都有耳目一新的感觉。由于一直没有接触过 IOS 开发,对 IOS 的打包、签名和安装都有了一个突破性的认识。应该来说,通过这个小项目,让我对移动开发有了一个较为深入的理解。
下面列出几个我认为比较重要并且是难点的地方。
项目大致包括:
- 自定义的拖动条
- 跑马灯
- 图片的选择和相机的使用
- 省份选择器
- 状态管理 Flutter_redux 的使用
源码:https://github.com/Tomdogs/debit
另外也请大家随手帮我点个star,多一些鼓励,我也就多一些持续贡献开源的动力。
目前这个后台暂时没有开源,对外而也不可用,见谅!
一.Widget 控件的使用
Flutter 常用框架
Flutter 之 常用按钮控件集锦一
在 Android 中,View 是屏幕上显示的所有内容的基础。在 Flutter 中,View 相当于 Widget 。然而,与 View 相比,Widget 有一些不同之处。首先,Widget 仅支持一帧,并且在每一帧上,Flutter 的框架都会创建一个 Widget实例树。相比之下,在 Android 上 View 绘制结束后,就不会重绘,直到调用 invalidate 时才会重绘。
在 Android 中,你可以通过直接对 View 进行改变更新视图。然而,在 Flutter 中 Widget 是不可变的,不会直接更新,而必须使用 Widget 的状态。这是 Stateful 和 Stateless Widget 的概念的来源。一个 Stateless Widget 就想它的名字,是一个没有状态信息的 Widget。如果你希望通过 HTTP 动态请求的数据更改用户界面,则必须使用 Stateful Widget ,并告诉 Flutter 框架该 Widget ,并告诉 Flutter 框架该 Widget的状态已更新,以便可以更新该 Widget。有状态和无状态 Widget 核心是一样的,每一帧它们都会重新构建,不同之处在于 Stateful Widget 有一个 State 对象,它可以跨帧存储状态数据并恢复它。
Flutter 的 Widget 的其他具体细节可见项目。
二.Flutter_redux 的使用
Flutter 的许多灵感是来自 React ,它的设计思路是数据与视图分离,由数据映射渲染视图。所以在 Flutter 中,它的 Widget 是 immutable 的,而它的动态部分全部放到了状态(state)中。于是状态管理自然便成了我们密切关注的对象。
在我们一开始构建应用的时候,是很简单。我们的一些状态,直接把他们映射成视图就可以了。这种简单的的状态不需要状态管理。但是随着功能的增加,应用程序将会有几十个甚至上百个状态。这个时候我们就很难在清楚的测试维护我们的状态,因为它看上去是在是太复杂了!而且还会有多个页面共享一个状态,例如像本项目的,当你成功上传自己的信息时,会返回的上一个界面,上一个界面会显示你上传成功的信息,这个时候就需要同步这两个状态。
- 我们在Redux中,所有的状态都存储在 Store 里,这个 Store 户放在 APP 顶层。
- View 拿到 Store 存储的状态(State)并把它映射成视图。View 还会与用户进行交互,用户点击按钮滑动屏幕等,这时会因为交互需要数据发生改变。
- Redux 让我们不能让 View 直接操作数据,而是通过一个 action 来告诉 Reducer ,状态得以改变。
- 这个时候 Reducer 接收到了这个 action ,它就回去遍历 action表,然后找到那个匹配的 action ,根据 action 生成新的状态并把新的状态放到 Store 中。
- Store 丢掉了老的状态对象,存储了新的对象后,就通知所有使用到这个状态的 View 更新(类似 setState) ,这样我们就可以同步不同 View 中的状态了。
具体是使用过程可见本项目的用户信息状态的改变。
三.dio 网络框架的使用
这一部分在 Flutter 中文官网上讲的已经非常清楚多了,直接给出连接:
在Flutter中发起HTTP网络请求
JSON和序列化
四.IOS 的签名过程
IOS 的打包 ----> 签名 ----> 分发 ,我可是费了很大力气。首先,最好有 Mac 电脑,我开始本来用虚拟机上安装Mac系统,但是,当我费了九牛二虎之力成功安装 Mac 系统后,XCode 就是怎么也安装不上,没法我只好借用同事的 Mac 电脑。安装 Flutter 中文官网上,入门: 在macOS上搭建Flutter开发环境,这个过程中也遇到许多问题,都可以用百度或google来解决。
4.1打包
我使用的XCode 10.1进行打包 ipa ,你最好有一个 iOS Developer 开发者账号,这个账号可以不用付费。这个账号可以用来Xcode 自带的虚拟机进行测试。但是真机是测试不了的,必须是已付费的账号或经过第三方进行签名才可以。接下来,我们怎么得到打包的文件呢?
首先,我们先在终端使用命名生成一个 Runner.app:
flutter build ios
输出结果:
Building "com.bat.debit" for device (ios-release)...
Automatically signing iOS for device deployment using specified development team in Xcode project: xxxxxxx
Running pod install... 1.3s
Starting Xcode build...
├─Building Dart code... 26.7s
├─Generating dSYM file... 0.9s
├─Stripping debug symbols... 0.7s
├─Assembling Flutter resources... 1.2s
└─Compiling, linking and signing... 15.3s
Xcode build done. 54.3s
Built /Users/xxx/Code/Flutter/fluwx/example/build/ios/iphoneos/Runner.app.
然后找到 /Users/xxx/Code/Flutter/fluwx/example/build/ios/iphoneos/Runner.app 这个文件,
可以用 open /Users/xxx/Code/Flutter/fluwx/example/build/ios/iphoneos打开这个文件夹,然后我们要创建一个名为Playload的文件夹,注意名字不能错,然后把Runner.app粘贴到Playload文件下,然后对Playload压缩成.zip。然后将Runner.zip重命名为Runner.ipa 。
4.2 签名
这时这个 Runner.ipa 就可以交给第三方或是某包上进行签名,拿到签名后就需要分发了。
4.3 分发
自定义分发的话可以看,iOS app分发这篇文章,还是比较复杂的。
我选择的是用第三方的分发网站,如:财神分发,这个分发有100免费的下载次数,个人测试的也是够用了。
不管技术怎么发展,实践才是检验这个技术唯一标准,让我们拭目以待 Flutter 的发展吧!
最后以一句歌词结束本篇文章:
我曾把完整的镜子打碎,夜晚的枕头都是眼泪。
就是喜欢这首歌,没法。