【 FlutterUnit 食用指南】 开源篇

30,477 阅读4分钟

零、前言

FlutterUnit终于和大家见面了,这将是【张风捷特烈】长期维护的一个项目
欢迎star : github.com/toly1994328…
可以在github 仓库里下载apk体验 :

FlutterUnit.apk 下载FlutterUnit mac版 下载Github仓库地址

一、组件的展示页面

1. 首页与组件收录

  • Flutter一共有356+组件,目前收录组件213个,并根据个人感觉进行评星
  • 将组件分为七种家族,对应七种颜色,上tab栏,点击切换七种家族组件。
...

2. 组件详情页

  • 其中每个都有至少一个演示展现和代码展示,对于重要的组件会详细展现。
  • 希望尽量做到细致,如果有需要补充,欢迎联系我。或进行pr
...

3. 组件的可操作性

  • 最重要的是: 所有的演示展现都是Flutter的组件形成的,而非图片,这就意味着可操作性更高。
  • 对一些操作交互的组件或有可操作性的某些组件,提供操作演示
...

4. 相关组件的关联切换

  • 相关组件通过link to 可以进行切换, 满足你的探索欲。
  • 维护了一个link to 的栈,可以退出时返回上一个组件。
...

5. 代码的查看和分享

激动人心的是,你可以通过右侧的图标展开/隐藏 实现下面效果的代码
并且支持分享,如果你想亲自体验,so,easy ! 而且代码高亮样式可以自定义

...

二、收藏集

收藏夹设计的初衷是: Flutter中的组件非常多,分类页并不明确
作为集卡癖的我很想有个收藏的接口,让我能自由收藏分类。
应用中默认给出了12种分类方式,也就是12个收藏夹,且210+组件已录入相应收藏夹
当然你可以自由的创建、修改、删除它们。收藏集还可以指定颜色用以区分。


1.收藏集

  • 支持添加收藏集,可指定颜色和简介
  • 支持修改收藏集
  • 支持删除收藏集,删除后,原先被收藏的组件将会移除。
添加收藏集修改收藏集删除收藏集

4. 组件的收藏与取消操作

数据库表采用widgetcategory一对多的结构,收录组件。
在每个详情页的右滑菜单中可以查看当前组件的收藏信息,
点击收藏夹名称时时可以切换该组件是否收录。在收藏夹里面可以左滑删除

删除与数据同步组件加入收藏集收藏集支持多选

5.整体效果

对收藏夹页面整体进行优化,效果如下,保留了默认收藏集。
点击收藏夹会进入收藏的内容,每个item也可以点击进入详情页。

滑动效果切页效果收藏详情

6.彩蛋: 左右滑栏

很多朋友反映左右滑栏与系统的侧滑返回冲突,所以特意设置了滑栏的小彩蛋
主页长按底部左侧按钮可打开左侧滑栏
主页长按底部右侧按钮可打开右侧滑栏 详情页长按顶部房子按钮可打开右侧滑栏

长按右菜单滑页长按左菜单滑页详情内长按展示收藏菜单

三、搜索与全局配置

1.搜索功能

由于Flutter中Widget比较杂乱,不太好分类,所以搜索是非常重要的
另外可以根据星级进行过滤,支持多选。

...

2. 颜色主题

只提供八种颜色,可在右滑菜单页我的主题配置,可以拓展

...

3.字体配置

支持全局字体设置,可以拓展

...

4.item样式设置

支持item样式设置,可以拓展,支持征集

...

5.代码面板风格设置

支持代码风格设置

..

7.关于我与项目

...

四、FlutterUnit 2.0 展望

后面将是一些集录,需要更多的Flutter爱好者参与,计划方案将陆续发布。

..

尾声

欢迎Star和关注FlutterUnit 的发展,让我们一起携手,成为Unit一员。
另外本人有一个Flutter微信交流群,欢迎小伙伴加入,共同探讨Flutter的问题,期待与你的交流与切磋。

@张风捷特烈 2019.04.04 未允禁转
我的公众号:编程之王 联系我--邮箱:1981462002@qq.com --微信:zdl1994328
~ END ~


最后, Flutter Widget 图鉴 奉上

目前只画了十张,大概100多个组件,过过眼也好。后面有时间会更新。
原图资源也放在 FlutterUnit 中 : 如发现错误欢迎联系我及时改正。