Flutter Unit 开源篇

零、前言

FlutterUnit终于和大家见面了,这将是【张风捷特烈】长期维护的一个项目
欢迎star : https://github.com/toly1994328/FlutterUnit
可以在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开源项目: https://github.com/toly1994328/FlutterUnit
我的公众号:编程之王
联系我–邮箱:1981462002@qq.com –微信:zdl1994328
@张风捷特烈 2020.04.29
~ END ~

张风捷特烈 wechat
-------------本文结束感谢您的阅读 @张风捷特烈-------------
0%