【开源】用 Flutter 轻松实现的桌面端仪表盘能有多好看?

830 阅读3分钟

速览

直接上图,你就说像不像设计网站上那些高赞分享吧😏

dashboard.png

Github 地址:github.com/NeroSong/be…

整体由一个侧边栏和内容区组成,极简又现代,低调又炫酷……吹不下去了,其实就是照着网上的几份设计稿,稍稍改动缝合的。看起来确实有那味了哈。

除了首页的折线图和几张小卡片之外,这份 UI 目前已经有了柱状图、饼图和雷达图,还有一个同样好看的表格。虽然只是个样式,但并没有简单的写死大小哦,所有控件都是自适应的,调整尺寸后会自动拉伸填充。摁住左边栏拖动窗口位置,双击切换全屏。

062815380514_0charts.png

以上所有这些,只需要几天业余时间和对基础知识的理解。这就是 Flutter 在桌面端的便利。

为啥能这么好看

网上看到有人觉得 Flutter 做的 App 都很简陋,不好看。这个误解可能来源于他们只看到了一些使用基础控件的demo,没有做任何设计和修饰,只有朴素的默认 Material Design 风格。实际上由于 Flutter 本身是个纯自绘的框架,无论在哪个平台上都是占据一块屏幕把自己画出来,因此反而是最不受限制的。你能想到的所有效果基本都能实现。

这样做的好处就是高保真的设计和交互,坏处就是没法使用平台优化好的东西,比如文字渲染。

这里的仪表盘,也就是数据展示类的场景,就很适合 Flutter。

只要设计的好,你写也好看😄

为啥写的这么快

很简单,因为:“踩在了巨人的肩膀上”。

从 Flutter 诞生开始,生态不好的评价就一直如影随形。确实,早几年真是要啥没啥,大部分效果都得自己写。但是现在情况已经发生了巨大的变化,可以说 90% 的一般场景和需求,都已经有社区和官方的支持了。

就拿这个仪表盘来说,桌面端窗口相关的功能都靠 window_manager,四个高度自定义的图表来自 FL Chart,可以锁定首行首列的表格用了 flutter_horizontal_data_table。核心功能都已经有现成的了。不但现成,还是跨各个平台哪里都能用的那种。

可以说一半的时间在写界面的框架结构,控件的圆角和颜色等,另一半时间,则是在学习这三样插件的配置和使用,调试修改到符合设计的状态。熟悉了都很快。

你这 UI 保熟嘛

害,这年头哪有人从头写呀,这都是大厂的框架。要是不好用,我把代码吃下去。

这个纯UI的项目代码非常简单,保证你三分钟跑起来,五分钟能乱改,一天内借鉴到自己项目里。

欢迎尝试:

Github 地址:github.com/NeroSong/be…