终于用Flutter制作了第一个App——Flutter Dictionary学习Flutter事半功倍

已收录   阅读次数: 1,007
2021-08-0423:08:08 发表评论
摘要

学习Flutter一月有余,在积累了一定的知识储备后,按照之前的经验开始利用Flutter编写应用,也是伯衡君用Flutter编写的第一个应用——Flutter Dictionary,暂时还是一个内容未完成品,但是框架和基本内容已经有了,包括Flutter各组件内容,Dart编程语言学习内容以及适合Flutter的开发者工具,后续陆续添加内容,假以时日,就是一个很有用的App啦……

分享至:
终于用Flutter制作了第一个App——Flutter Dictionary学习Flutter事半功倍

开篇寄语

学习Flutter一月有余,在积累了一定的知识储备后,按照之前的经验开始利用Flutter编写应用,也是伯衡君用Flutter编写的第一个应用——Flutter Dictionary,暂时还是一个内容未完成品,但是框架和基本内容已经有了,包括Flutter各组件内容,Dart编程语言学习内容以及适合Flutter的开发者工具,后续陆续添加内容,假以时日,就是一个很有用的App啦……

前情提要

内容详情

用Flutter学习开发应用,以我的经验来说,Flutter中包含很多已经打造好的组件,按照一定的规则将组件组合在一起,这样就形成了一个完整的App,也即是说,开发App,先制定需求,根据需求,想要实现什么功能,分解步骤,化解成一个个组件,之后组合在一起,伯衡君这里就以目前正在打造的这个App——Flutter Dictionary来详细说明一番。

项目地址:https://github.com/zhangboheng/Flutter-Dictionary

首先是入场动画,如下图所示:

这个功能的实现,来源于之前分享的这篇文章:

简单修改后,就得意实现了。

进入首页,上部的轮播图,主要是引用的一个Flutter的一个支持库——carousel_slider,也是伯衡君曾经分享的实例,具体可以参看这篇文章:

下方的一个个条目,主要是用来了解每个组件的介绍和主要功能,如下图所示:

终于用Flutter制作了第一个App——Flutter Dictionary学习Flutter事半功倍

这个类似于手风琴的功能,也是伯衡君曾经分享过的一篇文章:

稍微做了一些修改,增加了点击条目跳转到Flutter官网该条目的详细内容。

搜索功能倒是没有分享过,简单来说就是输入文字后,就会出现相应的条目,如下图所示:

终于用Flutter制作了第一个App——Flutter Dictionary学习Flutter事半功倍

该功能的源码内容,伯衡君会在后续的文章中分享,敬请期待。

此功能文章分享可以点击这篇文章查看:

接下来是右侧的黑暗模式的变换,以及左上的弹出菜单,也是在之前的文章中有所介绍,详情请见这篇文章:

实现的功能如下图所示:

弹出菜单是伯衡君对Flutter各个组件进行的分类(我的理解),点击后就是具体内容,如下图所示:

终于用Flutter制作了第一个App——Flutter Dictionary学习Flutter事半功倍

这个功能区的实现与首页的大致相同。

返回首页,那三张Banner图,分别对应的是Flutter的Packages(支撑库),Dart语法学习与Flutter开发或者编程开发常用工具。

Packages实现的功能和首页类似,如下图所示:

终于用Flutter制作了第一个App——Flutter Dictionary学习Flutter事半功倍

很多强大和有趣的功能其他开发者已经写好,所以直接引用可以节省开发时间,起到事半功倍的效果。

再来说一下Dart语法学习,Flutter是由Dart语法实现的,所以学习该语法对于Flutter开发绝对有必要,暂时还处于草创阶段,后续按照各个分类进行展开学习,如下图所示:

终于用Flutter制作了第一个App——Flutter Dictionary学习Flutter事半功倍

至于开发者工具,则是伯衡君常用以及业界比较流行的开发工具,暂时也只是草创阶段,如下图所示,这里实现的就像Tiktok来刷应用,或许有惊喜,如下图所示:

后续开发中相信还会有很多内容来分享,以后会在后面不定期更新的。

更多精彩内容,敬请期待。

2021年8月6日更新

  • 将Developer Tools页面进行了美化调整,进行了类似卡牌设计,增加点击随机显示内容的特效,生成效果如下图所示:
终于用Flutter制作了第一个App——Flutter Dictionary学习Flutter事半功倍
  • 新增了开发经验,问题解答页面,点击后可以直接查看代码,并在弹窗按钮增加缩小,放大以及剪切板代码功能的实现:
  • 我的微信
  • 微信扫一扫加好友
  • weinxin
  • 我的微信公众号
  • 扫描关注公众号
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: