推荐一个Flutter项目（已开源）

Posted 2021-04-29 何俊林

什么是Flutter?
2018年2月27日，在2018世界移动大会上，Google发布了Flutter的第一个Beta版本。Flutter是Google用以帮助开发者在ios和android两个平台开发高质量原生应用的全新移动UI框架。

• 热重载（Hot Reload），作为一个菜鸟安卓开发者，能热重载真的太舒服了，利用Android Studio直接一个ctrl+s就可以保存并重载，模拟器立马就可以看见效果，就这一点比原生安卓制作简直不知道高到哪里去了。

• 一切皆为Widget的理念，对于Flutter来说，手机应用里的所有东西都是Widget，通过可组合的空间集合、丰富的动画库以及分层课扩展的架构实现了富有感染力的灵活界面设计。

• 借助可移植的GPU加速的渲染引擎以及高性能本地代码运行时以达到跨平台设备的高质量用户体验。 这段介绍是直接抄下来的，虽然我并不知道什么叫可移植的GPU加速的渲染引擎，但是最终结果就是利用Flutter构建的应用在运行效率上会和原生应用差不多。

• 酷安上有一个Flutter的演示Demo，Flutter Gallery。

• 如果经常逛酷安的一定会发现这个画廊的演示Demo的图标和另一个演示Demo的图标是一样的，Google Fuchsia OS Preview,这个应用的是传闻的Google正在研发的新一代操作系统，所以个人认为，Flutter的存在可能不仅仅是实现在安卓和IOS上的运行，更是为了日后丰富Fuchsia这个新系统的软件生态而存在的。

Flutter的核心内容
接下来我想写一下我自己通过这两天的接触对于Flutter的核心内容也就是上面好处的第二点的理解。

一切都是控件（Widget）
在Flutter中，每个应用程序都是Widget，这点和其他的应用框架不一样，Flutter的对象模型是统一的，也就是控件。
一个控件可以定义：

• 结构元素（比如按钮或者菜单）

• 风格元素（比如字体或者颜色方案）

• 布局

• 一些业务逻辑

控件是基于构图形成层次结构，每个控件嵌套在其中，并从其父代继承属性，没有单独的“应用程序”对象，只有根控件。
您可以通过告知框架用另一个控件替换层次结构中的控件来响应事件，比如用户交互，然后框架会对比新的控件和旧的控件，并有效的更新用户界面，即更新有变化的控件。

也就是说，在Flutter中，一个应用就是有许许多多的Widget组合而成的。

实践
做了一个豆瓣电影列表的功能

你将会学到

• 怎么样使用列表控件，Row控件，Column控件

• 怎么使用网络加载，异步操作怎么处理

• 实现加载更多

• 如何使用flutter布局，个人感觉相当好理解，Row控件，Column控件，ListView控件就能做出这个效果，我这是一个卡片

• 使用buildDefaultTabController容易的实现viewpager类似的东东

• 实现自定义控件 Ratingbar

• tab

• bottomNavigationBar

• 页面间的跳转。

• json2model代码自动生成

我这里遇到了一些坑

• 在ListView的item中使用横向ListView，导致运行不出来，因此那个换成了Row。

• 在使用column和row控件的时候，界面刷步出来，定位原因是因为里面存在不确定的rect的子控件导致， 因此解决的办法就是使用expande,或者flexable包裹，或者其他的方式能够明确子控件怎么占位，占多少位置。

• 切换代缓存的图片控件cacheImage出现问题，刷步出图片，解决办法，卸载安装包，重装，原因没有定位出

下面是效果图：

增加了段子页面
你可以学会， 弹框bottomModalDialog

安装包大小
安装包有8M。因为用原生的写会不至于有这么大，所以要看看究竟，其实很容易发现，flutter库占了很大部分，实际dex文件较小。

上传的源码中已经打好了apk，可以直接下载安装，ipa包没有打，打了没有越狱一般也安装不了的，苹果这套对开发者不是很友好。

注意事项

• 如果你想自己下载源码玩玩的话：

• config.dart 是需要你在showApi平台上自己申请appid和secretkey的
  android工程中的key.properties文件中的value需要你自己配置你的秘钥，具体打包方式参考dart.io文档中 Build and release for Android 这一节。