一个非常美的FlutterUI组件扩展集:FLUI

564 阅读2分钟

项目地址 FLUI 官网 下载 Demo APK 体验

这是一个群内的网友写的,感觉里面的组件风格非常美,封装的挺到位的,在此推荐给大家,具体可以参考学习。 可以学到的知识还是挺多的,组件UI封装可以很大的提高页面的速度效率,封装是一个非常重要的技能。 适合广大Flutter爱好者。 丰富易用/简易定制/高效反馈。 请确保 Flutter 的版本 >= v1.7.8+hotfix.1 image 关于主题,由于 Flutter 本身对主题的支持(配置,切换等)已经足够强大,所以 FLUI 设计的初衷就是无风格化的组件,尽可能的从组件树中读取 ThemeData,另外大部分组件也是支持对颜色,样式进行设置的。

FLUI 里大部分组件的选择都是基于一致性,根据用户在各个平台的使用习惯迁移过来,这里也参考了很多其他平台上成熟的 UI 框架比如 Antd, QMUI, Vant 等等,由于 Flutter 未来面向的平台众多,所以能做的组件还是一个比较大的体量。

FLUI 还有另外一个目标就是提供交互反馈,比如支持显示 loading 的按钮,toast,支持伸缩和 shimmer 动画的骨架屏,支持点击效果的 ListTile 等等,这样用户可以清晰地感知到自己的操作,也能很好的标明当前页面的状态。

简介

image FLUI 的组件是在 Flutter 框架上进行的扩展,目前已经有 15 个类别并且在不断增加。

每个组件几乎都是独立的(少数有相互依赖),引入时可以直接 import 'package:flui.dart' 也可以 import 'package:flui/widgets/avatar.dart',编译打包时 tree-shaking 会接管依赖的优化流程。

未来 FLUI 也会加入一些业务组件,比如图表,图片选择器等等,关于组件的动态化配置和渲染也在探索中。

特性

  • 开箱即用的高质量 Flutter UI 组件
  • 完善的使用示例和文档
  • 细粒度非风格化的组件适用于不同类型的应用

兼容性

FLUI 在多端具有良好的兼容性,框架会一直基于 Flutter Stable Channel 开发。

快速上手

安装

dependencies:
  flui: 0.7.4

然后运行 flutter pub get 下载依赖。

使用

依赖安装完成后直接引入组件。

import 'package:flui/flui.dart

// in somewhere
FLAppBarTitle(
    title: 'AppBar',
    subtitle: '(subtitle)',
    layout: FLAppBarTitleLayout.vertical,
    showLoading: true
)

内有各种丰富的组件,具体项目内查看。

大家如果有其他更好的也可以投稿上来,或者在下方评论。

Flutter交流QQ群:874592746

微信公众号

关注公众号“Flutter前线”,各种Flutter项目实战经验技巧,干活知识,Flutter面试题答案,等你来领取。