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

Comments
  • 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 Accumulation-dot 2
  • 给 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
  • convertToPinyinStringWithoutException方法找不到

    convertToPinyinStringWithoutException方法找不到

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

    opened by xieguangqian1992 1
  • [Swiper]  ScrollPosition.viewportDimension 为空报错

    [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)

    opened by BigTimo 0
  • pull_refresh.dart 的几个修改意见

    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。

    opened by crazy365966834 0
  • flutter3.3 和 flukit3.0.1似乎不兼容

    flutter3.3 和 flukit3.0.1似乎不兼容

    E/flutter ( 7676): [ERROR:flutter/runtime/dart_vm_initializer.cc(41)] Unhandled Exception: Null check operator used on a null value E/flutter ( 7676): #0 ScrollPosition.viewportDimension (package:flutter/src/widgets/scroll_position.dart:177:53) E/flutter ( 7676): #1 _PagePosition.getPixelsFromPage (package:flutter/src/widgets/page_view.dart:390:19) E/flutter ( 7676): #2 PageController.animateToPage (package:flutter/src/widgets/page_view.dart:203:16) E/flutter ( 7676): #3 _SwiperState.animateToPage (package:flukit/src/swiper.dart:447:11) E/flutter ( 7676): #4 _SwiperState._start. (package:flukit/src/swiper.dart:408:7) E/flutter ( 7676): #5 _Timer._runTimers (dart:isolate-patch/timer_impl.dart:398:19) E/flutter ( 7676): #6 _Timer._handleMessage (dart:isolate-patch/timer_impl.dart:429:5) E/flutter ( 7676): #7 _RawReceivePortImpl._handleMessage (dart:isolate-patch/isolate_patch.dart:192:12) E/flutter ( 7676):

    opened by specialbiscuit 0
  • 使用插件出现问题

    使用插件出现问题

    flukit-3.0.1/lib/src/safe_value_notifier.dart:20:33: Error: Method 'addPostFrameCallback' cannot be called on 'SchedulerBinding?' because it is potentially null.

    • 'SchedulerBinding' is from 'package:flutter/src/scheduler/binding.dart' ('/D:/flutter/packages/flutter/lib/src/scheduler/binding.dart'). package:flutter/…/scheduler/binding.dart:1 Try calling using ?. instead. SchedulerBinding.instance.addPostFrameCallback((_) {
    opened by GD-GK 0
Owner
Flutter中国开源项目
Flutter中文开发者社区开源项目。旨在开发一系列Flutter SDK之外常用(实用)的Package、插件,丰富Flutter第三方库,为Flutter生态贡献来自中国开发者的力量,欢迎所有志同道合的同学一起加入。
Flutter中国开源项目
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

Muhammad Furqan 307 Dec 24, 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

Dicky Reynaldi 2 Sep 12, 2021
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.

Sabarinathan 566 Dec 29, 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.

Habib ullah 3 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.

Urmish Patel 191 Dec 29, 2022
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

Stephen Joel 1 May 24, 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 the clients and use charts and use a lot of features to complete the process (HUGE APP) There two apps: Andr

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

Dart + Flutter Business Card Mobile Application

Mark Hellner 1 Nov 8, 2022
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

CABREX 9 Nov 8, 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

null 1 Mar 8, 2022
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.

Trần Văn Nguyên 21 Nov 21, 2022
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.7k Dec 30, 2022
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 434 Jan 7, 2023
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 733 Jan 7, 2023
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 318 Jan 8, 2023
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 899 Dec 30, 2022
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 271 Dec 30, 2022
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 661 Jan 5, 2023
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 309 Dec 28, 2022