flukit is a Flutter UI Kit

Last update: May 18, 2022

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 城市列表,联系人列表,索引&悬停。

GitHub

https://github.com/flutterchina/flukit
Comments
  • 1. 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

    Reviewed by Crabsclaws at 2020-05-31 06:49
  • 2. 给 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 来触发刷新。

    Reviewed by huangxianghan at 2020-06-12 08:53
  • 3. convertToPinyinStringWithoutException方法找不到

    Error: Method not found: 'PinyinHelper.convertToPinyinStringWithoutException'. String pinyin = PinyinHelper.convertToPinyinStringWithoutException(list[i].name); ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

    Reviewed by xieguangqian1992 at 2019-01-22 02:50
  • 4. [Swiper] ScrollPosition.viewportDimension 为空报错

    [ERROR:flutter/lib/ui/ui_dart_state.cc(209)] Unhandled Exception: Null check operator used on a null value E/flutter (24234): #0 ScrollPosition.viewportDimension (package:flutter/src/widgets/scroll_position.dart:175:53) E/flutter (24234): #1 _PagePosition.getPixelsFromPage (package:flutter/src/widgets/page_view.dart:382:19) E/flutter (24234): #2 PageController.animateToPage (package:flutter/src/widgets/page_view.dart:197:16) E/flutter (24234): #3 _SwiperState.animateToPage (package:flukit/src/swiper.dart:447:11) E/flutter (24234): #4 _SwiperState._start. (package:flukit/src/swiper.dart:408:7) E/flutter (24234): #5 _rootRunUnary (dart:async/zone.dart:1436:47) E/flutter (24234): #6 _CustomZone.runUnary (dart:async/zone.dart:1335:19) E/flutter (24234): #7 _CustomZone.runUnaryGuarded (dart:async/zone.dart:1244:7) E/flutter (24234): #8 _CustomZone.bindUnaryCallbackGuarded. (dart:async/zone.dart:1281:26) E/flutter (24234): #9 _rootRunUnary (dart:async/zone.dart:1444:13) E/flutter (24234): #10 _CustomZone.runUnary (dart:async/zone.dart:1335:19) E/flutter (24234): #11 _CustomZone.bindUnaryCallback. (dart:async/zone.dart:1265:26) E/flutter (24234): #12 _Timer._runTimers (dart:isolate-patch/timer_impl.dart:395:19) E/flutter (24234): #13 _Timer._handleMessage (dart:isolate-patch/timer_impl.dart:426:5) E/flutter (24234): #14 _RawReceivePortImpl._handleMessage (dart:isolate-patch/isolate_patch.dart:184:12)

    Reviewed by BigTimo at 2021-11-16 03:22
  • 5. pull_refresh.dart 的几个修改意见

    1、PullRefreshBox 的构造函数可以这样写:

    PullRefreshBox({Key key, this.child, @required this.onRefresh, PullRefreshIndicator indicator, this.overScrollEffect})
          : this.indicator = indicator ?? DefaultPullRefreshIndicator(),
            super(key: key);
    
      final PullRefreshCallback onRefresh;
      final Widget child;
      final TargetPlatform overScrollEffect;
      final PullRefreshIndicator indicator;
    

    2、PullRefreshBoxState 和 _AnimatedRotationBoxState 的initState没有 调用 super.initState() ,这是不合适的。 3、PullRefreshBoxState 中的方法返回Future,但是没有return。

    Reviewed by crazy365966834 at 2019-01-09 07:29

Related

Flutter - E Commerce UI KIT ( completely free for everyone )
Flutter - E Commerce UI KIT ( completely free for everyone )

Flutter E-Commerce UI KIT A powerful Flutter E-Commerce starter template that bootstraps development of your mobile application. Flutter E-Commerce St

May 18, 2022
Flutter Movie UI Kit

flutter_movie_uikit A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you star

Sep 12, 2021
A Flutter UI kit with 50 plus screens for beginners to learn.
A Flutter UI kit with 50 plus screens for beginners to learn.

Flutter application built on top of contra wireframe kit. Thorough this project i will be developing all the screens in flutter and sharing in couple of series post.

May 19, 2022
Movies App UI in Flutter using Simple Widgets without Using API's in Flutter.
Movies App UI in Flutter using Simple Widgets without Using API's in Flutter.

Movies App UI in Flutter using Simple Widgets without Using API's in Flutter.

May 15, 2022
A flutter plugin for Easily make Flutter apps responsive. Automatically adapt UI to different screen sizes. Responsiveness made simple.
A flutter plugin for Easily make Flutter apps responsive. Automatically adapt UI to different screen sizes. Responsiveness made simple.

A flutter plugin for Easily make Flutter apps responsive. Automatically adapt UI to different screen sizes. Responsiveness made simple.

May 19, 2022
The Coolicons icon pack for Flutter with over 400 icons available for your flutter project.
The Coolicons icon pack for Flutter with over 400 icons available for your flutter project.

coolicons This flutter package allows you to use the Coolicons icon pack. Made from Coolicons. ?? Installation In the dependencies: section of your pu

Jan 10, 2022
Foody - Flutter project to display foods to clients and display charts and has a lot of features , two flutter apps : Android and Web
Foody - Flutter project to display foods to clients and display charts and has a lot of features , two flutter apps : Android and Web

Foody Flutter project to display foods to the clients and use charts and use a lot of features to complete the process (HUGE APP) There two apps: Andr

Feb 7, 2022
Flutter-business-card-app - Flutter + Dart business card mobile app
Flutter-business-card-app - Flutter + Dart business card mobile app

Dart + Flutter Business Card Mobile Application

Jan 9, 2022
A Flutter project that gives basic flutter design to implement a login UI
A Flutter project that gives basic flutter design to implement a login UI

Login UI Design A Flutter project that gives basic flutter design to implement a

Apr 23, 2022
Flutter Complete E-Commerce app (UI by - 'The Flutter Way')

NOT COMPLETED YET! e_commerce A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to ge

Mar 8, 2022
Flutter Shop UI - an e-commerce app using Flutter
Flutter Shop UI - an e-commerce app using Flutter

If you are planning to create an e-commerce app using Flutter then this Shop UI Kit would be the perfect choice for you to make a gorgeous app for both Android & iOS.

May 22, 2022
A Flutter staggered grid view
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

May 20, 2022
A simple animated radial menu widget for Flutter.
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

Apr 29, 2022
Tinder like cards swipe effect with Flutter.
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

May 16, 2022
The app to demo animation with Flutter by implement Facebook reactions
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

May 23, 2022
Custom widget for Flutter
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

May 23, 2022
flutter stepper_touch widget
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

Apr 4, 2022
A TypeAhead widget for Flutter, where you can show suggestions to users as they type
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

May 15, 2022
A highly customisable Flutter widget for entering pin code. Suitable for use cases such as login and OTP.
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

May 18, 2022