推荐一个Flutter项目(已开源)

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

其实我第一次听说Flutter是在收到谷歌开发者公众号的推送里,当时读完了那篇文章觉得Flutter的优点确实比较突出:

  • 热重载(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 这一节。

原创作者:bravekingzhang

原文发布于微信公众号 - 何俊林(DriodDeveloper)

原文发表时间:2018-05-24

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏张善友的专栏

Mono 3.0.12 支持可移植类库

Mono 3.0.12已于6月19日发布。对跨平台开发者而言,对可移植类库的支持可能是该版本最重要的变化。该技术可以使一个DLL支持.NET、Windows S...

18310
来自专栏新工科课程建设探讨——以能源与动力工程专业为例

2 HTML5基础

答:借助HTML5解决和分析工业设计中的问题,易于实现数据可视化,而且支持所有主流操作系统。与传统C/C++/FORTRON计算机语言相比具备几个显著优势:首先...

1670
来自专栏前端人人

React第三方组件4(状态管理之Reflux的使用①简单使用)

本教程总共5篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React第三方组件4(状态管理之Reflux的使用①...

3008
来自专栏程序员宝库

主流浏览器图片反防盗链方法总结

还记得之前写的那个无聊的插件,前一段时间由于豆瓣读书增加了防盗链策略使得我们无法直接引用他们的图片,使得我这个小插件无法工作。本以为是一个很简单的问题,但是没想...

1145
来自专栏新工科课程建设探讨——以能源与动力工程专业为例

2 HTML5基础

答:借助HTML5解决和分析工业设计中的问题,易于实现数据可视化,而且支持所有主流操作系统。与传统C/C++/FORTRON计算机语言相比具备几个显著优势:首先...

790
来自专栏张善友的专栏

ASP.NET 5 Beta 7 版本

在 VS2015 发布的同时,微软也发布了 ASP.NET 5 的路线图(详见 ASP.NET 5 Schedule and Roadmap : https:/...

1888
来自专栏IT派

15 个有意思的 JavaScript 和 CSS 库推荐! 你用过几个?

我们在Tutorialzine上的任务就是让你了解最新最酷的Web发展趋势。这就是为什么我们每个月都会发布一些我们偶然发现并认为值得你关注的最佳资源的缘由。

880
来自专栏FreeBuf

Chrome XSS审计之SVG标签绕过

在一年前,在我的私人Twitter账户 brutal secret ,我分享了一个有趣的方法来通过审计绕过chrome 的xss过滤器。我们将从黑盒测试的角度...

2915
来自专栏守望轩

利用WordPress REST API 开发微信小程序从入门到放弃

自从我发布并开源WordPress版微信小程序以来,很多WordPress网站的站长问有关程序开发的问题,其实在文章:《用微信小程序连接WordPress网站》...

3807
来自专栏编程微刊

ajax实现简单的点击左侧菜单,右侧加载不同网页

1815

扫码关注云+社区