推荐一个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 条评论
登录 后参与评论

相关文章

来自专栏速成应用小程序开发平台

新手教程--手把手教你从零开始制作一款电商必备的商城小程序

近年来,在电商、新零售趋势的影响下,实体零售商也都在谋求自身的渠道变革,完善消费体验。如今微信已有超过十亿的用户,市场巨大,而微信小程序的开通不仅能够降低品牌...

942
来自专栏ytkah

微信小程序开发教程第五章:微信小程序名片夹详情页开发

今天加了新干货!除了开发日志本身,还回答了一些朋友的问题。 闲话不多说,先看下「名片盒」详情页的效果图: ? ? 备注下大致需求:顶部背后是轮播图,二维码...

3038
来自专栏做全栈攻城狮

小白学编程实战项目-利用Winform开发美女音乐播放器

这是小白学习软件开发系列课程,旨在帮助对电脑编程感兴趣的朋友学习并熟悉C#技术。其中基础部分已经讲解完毕,可以查看:电脑编程入门(10)-C#面向对象编程浅聊,...

913
来自专栏iOS技术

iOS图片浏览器(功能强大/性能优越)

支持 cocopods,功能完善,性能不错,代码质量尚可,喜欢的朋友可以给个小星星?。

4097
来自专栏WebHub

移动前端兼容操作总结

手机设备屏幕尺寸不一,做移动端的Web页面,需要考虑在安卓/IOS的各种尺寸设备上的兼容,这里总结的是针对移动端设备的页面,设计与前端实现怎样做能更好地适配不同...

643
来自专栏liuchengxu

如何使用 Vim 的 help

实际上,无论是 Vim 的基础知识还是进阶知识,大都可以从 help 中找到指引。但是我想很多人并没有意识到这一点,或者并没有重视这一点。RTFM (read ...

592
来自专栏腾讯NEXT学位

2018 我所了解的 Vue 知识大全

3656
来自专栏sunseekers

2018 我所了解的 Vue 知识大全(一)

Vue ,React ,Angular 三大主流框架,最后我选择学习 Vue ,接触过 React ,自己感觉学习曲线有些陡峭,进而我选择了学习 Vue ,他的...

753
来自专栏web编程技术分享

【手把手】JavaWeb 入门级项目实战 -- 文章发布系统 (第十节)1. 详情页面的布局2. 从主页面到详情页面的跳转问题

2734
来自专栏王大锤

iOS各种调试技巧豪华套餐

3779

扫码关注云+社区