flukit is a Flutter UI Kit

Related tags

UI flutter
Overview

English|中文简体

Flukit Pub

flukit (Flutter UI Kit)是一个Flutter Widget库。

注意

本项目正在持续迭代中,欢迎大家贡献代码。

贡献代码须知

工程目录

flukit
	--lib           //示例目录
	--package_src
	  --lib
	   --src  //widget库目录
	--docs //文档目录,文档必须是markdown格式
      --images //文档用到的图片都放在这里,如截图
      --chs //中文文档目录
      --en //英文文档目录

运行Demo

flutter run

提交代码须知

如果你添加了一个,请遵循如下规则:

  1. 尽可能多的添加注释,文档注释为三斜线"///"
  2. 添加一个新的Widget后,请在Demo目录添加使用示例,示例应该纯净无干扰,如果一个widget需要多个示例,可以创建一个二级页面,可以参照Pull Refresh、QuickSelectListView。
  3. 如果可以,请尽可能在doc目录下为widget添加使用文档,文档必须是markdown格式,文档名应与widget文件名同名

Widgets

Widget名称 介绍
QuickScrollbar 可拖动的滚动条
TurnBox 可按任意角度旋转子组件
AnimatedRotationBox 可对子组件执行旋转动画
ScaleView 可以对子组件进行缩放(双指伸缩)
Swiper 一个轮播组件
GradientButton 背景色渐变按钮
RaisedGradientButton 背景色渐变按钮(Raised)
GradientCircularProgressIndicator 一个支持颜色渐变的圆形进度指示器
InfiniteListView 支持下拉刷新的无限加载列表组件
PullRefreshBox(betal) 下拉刷新(该组件并未成熟,将来可能会删掉)
NineGridView 类似微信/微博展示图片九宫格,钉钉群组,微信群组,QQ讨论组头像
DragSortView 类似微博/微信发布动态选图九宫格,拖拽换位

Demo部分截图

Others

另外一个NineGridView,使用的Stack + Positioned实现,本项目通过封装GridView实现。

AzListView A Flutter sticky headers & index ListView. Flutter 城市列表,联系人列表,索引&悬停。

Issues
  • quick_scrollbar

    quick_scrollbar

    opened by Panseng 3
  • about package_src

    about package_src

    --lib
    --package_src --lib --src

    package_src 这个目录下的文件是做什么的呀

    opened by BZbyr 2
  • pull_refresh_with_scrollview 这个例子,为什么点击status bar不能滚动回到顶部?

    pull_refresh_with_scrollview 这个例子,为什么点击status bar不能滚动回到顶部?

    在iOS系统中, 其他两个下拉刷新的demo都可以在点击status bar的时候,自动回到顶部

    但是pull_refresh_with_scrollview这个例子就不行。

    自定义了scrollController的都不可以吗

    opened by arieslee 2
  • NosuchMethodError:The method 'call' was

    NosuchMethodError:The method 'call' was

    null

    opened by xiaoshengtian 2
  • InfiniteListView onRetrieveData

    InfiniteListView onRetrieveData

    var hasMore = await widget.onRetrieveData(1, _items, pullDown); if (_items.isEmpty || _items.length % widget.pageSize != 0 && hasMore != true) { state.noMore = true; } state.items = _items;

    when the _widget.pageSize == items.length, hasMore = false: the state.noMore = true does not work

    opened by Crabsclaws 2
  • InfiniteListView 如何用代码触发下拉刷新

    InfiniteListView 如何用代码触发下拉刷新

    InfiniteListView 如何用代码触发下拉刷新

    opened by wakeupyq 2
  • can you update Dart Packages  to new version?

    can you update Dart Packages to new version?

    opened by linguitang 1
  • nullsafety

    nullsafety

    希望尽快适配nullsafety

    opened by Y-Jason-Q 1
  • 给 InfiniteListView 加一个刷新控制器

    给 InfiniteListView 加一个刷新控制器

    通常会遇到这样的场景,列表页顶部通常有搜索框,用户输入搜索内容触发整个列表重新获取数据并刷新列表。InfiniteListView并不支持用代码控制刷新。也有朋友给过一些例子 例如在 InfiniteListView 加上 ScrollController,用代码控制ScrollController下拉位置来触发下拉刷新,但是这样做有很多问题,例如当网络延时或其他原因查不到数据时,用这个方法就触发不了第二次刷新。我自己也想了一个解决方案,目前可以正常用代码触发刷新,希望交流一下。 添加一个控制器类 class InfiniteListViewRefreshController { Future Function(bool) refreshFunc; void refresh(bool pullDown) { if(refreshFunc!=null) refreshFunc(pullDown); } }

    在 InfiniteListView的构造函数中传入此类的实例。

    在_InfiniteListViewState 中的initState 方法中将_InfiniteListViewState内置的刷新方法签名赋值给InfiniteListViewRefreshController 实例的refreshFunc字段,代码如下:

    @override void initState() { super.initState();

    state = widget.initState ?? LoadingState<T>();
    if (!state.initialized) {
      refresh(false);
    }
    
    if(widget.refreshController!=null) {
      widget.refreshController.refreshFunc = refresh;
    }
    

    }

    这样可以调用InfiniteListViewRefreshController 的实例方法 refresh 来触发刷新。

    opened by huangxianghan 1
  • 没有文档吗

    没有文档吗

    opened by bulexi 1
  • 如果回去Swiper当前索引?

    如果回去Swiper当前索引?

    RT

    opened by zhlhuang 0
  • 牛逼的老哥

    牛逼的老哥

    opened by wxy520ll 0
Owner
Flutter中国开源项目
Flutter中文开发者社区开源项目。旨在开发一系列Flutter SDK之外常用(实用)的Package、插件,丰富Flutter第三方库,为Flutter生态贡献来自中国开发者的力量,欢迎所有志同道合的同学一起加入。
Flutter中国开源项目
A Flutter staggered grid view

flutter_staggered_grid_view A Flutter staggered grid view which supports multiple columns with rows of varying sizes. Features Configurable cross-axis

Romain Rastel 2.3k Nov 24, 2021
A simple animated radial menu widget for Flutter.

flutter_radial_menu A radial menu widget for Flutter. . Installation Install the latest version from pub. Quick Start Import the package, create a Rad

Victor Choueiri 401 Nov 19, 2021
Tinder like cards swipe effect with Flutter.

Tinder cards Hi! After showcasing Focus for Reddit, the app I am working on, people asked me how did I do the tinder like cards swipe (posts media are

Ivascu Adrian 644 Nov 25, 2021
The app to demo animation with Flutter by implement Facebook reactions

Facebook Reactions Animation Description The app to demo animation with Flutter by implement Facebook reactions. Watch the demo video for more clarity

Duy Tran 260 Nov 28, 2021
Custom widget for Flutter

Flushbar Use this package if you need more customization when notifying your user. For Android developers, it is made to substitute toasts and snackba

Andre Haueisen 814 Nov 22, 2021
flutter stepper_touch widget

stepper_touch the concept of the widget inspired from Nikolay Kuchkarov. i extended the functionality to be more useful in real world applications Tha

Raouf Rahiche 235 Nov 20, 2021
A TypeAhead widget for Flutter, where you can show suggestions to users as they type

Flutter TypeAhead A TypeAhead (autocomplete) widget for Flutter, where you can show suggestions to users as they type Features Shows suggestions in an

null 554 Nov 22, 2021
A highly customisable Flutter widget for entering pin code. Suitable for use cases such as login and OTP.

pin_code_text_field It's a beautiful and highly customizable Flutter widget for entering pin code. Suitable for use cases such as login and OTP. Usage

Liew Jun Tung 249 Nov 21, 2021
Flutter FoldingCell widget

Simple FoldingCell widget Simple folding cell widget, pass frontWidget and innerWidget to fold and unfold. Installation Add dependency in pubspec.yaml

Farrukh 431 Nov 22, 2021
🔁 A custom refresh indicator for flutter.

Liquid Pull To Refresh A beautiful and custom refresh indicator for flutter highly inspired from Ramotion Pull Down to Refresh. Table of contents Inst

Ayush Agarwal 916 Nov 25, 2021
A flutter package which makes it easier to display the difference between two images.

?? Before After A flutter package which makes it easier to display the differences between two images.. The source code is 100% Dart, and everything r

Sahil Kumar 575 Nov 26, 2021
A flutter package to help you beautify your app popups.

flutter_beautiful_popup 中文 A flutter package to help you beautify your app popup, can be used in all platform.Live Demo. Preview: Getting Started Add

朱嘉伟 448 Nov 23, 2021
Flutter Credit Card Input form

This package provides visually beautiful UX through animation of credit card information input form. Preview Installing Add dependency to pubspec.yaml

Jeongtae Kim 312 Nov 25, 2021
With flutter tags you can create selectable or input tags that automatically adapt to the screen width

flutter_tags Create beautiful tags quickly and easily. Installing Add this to your package's pubspec.yaml file: dependencies: flutter_tags: "^0.4.9+

Antonino Di Natale 330 Nov 30, 2021
A flutter package for building card based forms.

Card Settings NOTE: THIS IS EFFECTIVELY NULLSAFE BUT CANNOT REFLECT THIS UNTIL cupertino_settings IS UPGRADED. A flutter package for building settings

CodeGrue 354 Nov 19, 2021
A powerful & easy to use timeline package for Flutter! 🚀

A powerful & easy to use timeline package for Flutter! ?? Caveat: This package is an early stage. Not enough testing has been done to guarantee stabil

Chulwoo Park 408 Nov 29, 2021
A package to help build customisable timelines in Flutter.

TimelineTile A package to help build customisable timelines in Flutter. Example You can access the example project for a Timeline Showcase. The Beauti

null 444 Dec 1, 2021
The best swiper for flutter , with multiple layouts, infinite loop. Compatible with Android & iOS.

The best swiper for flutter , with multiple layouts, infinite loop. Compatible with Android & iOS.

null 3.2k Nov 24, 2021
Nice and clean Online Shop app UI by using #Flutter.

On our E-commerce app UI has two pages one for the product page which has a horizontal list of categories then a list of our products. Then on the details page, it shows the price and short description of the product with the Buy Now button. The best part of our E-commerce app is, each product has its own color which looks great.

Abu Anwar 1.3k Nov 26, 2021