Need help with nine_grid_view?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

flutterchina
153 Stars 21 Forks BSD 3-Clause "New" or "Revised" License 14 Commits 0 Opened issues

Description

Flutter NineGridView & DragSortView. Similar to Weibo / WeChat nine grid view controls to display pictures. Flutter仿微信/微博九宫格、拖拽排序,微信群组,钉钉群组,QQ讨论组头像。

Services available

!
?

Need anything else?

Contributors list

Language: English | 中文简体

Pub      Pub

NineGridView

Similar to Weibo dynamics, WeChat circle of friends, nine grid view controls to display pictures. Support single big picture preview.
It also supports WeChat group , DingTalk group, QQ group avatar effects.

DragSortView

Similar to Weibo/WeChat release dynamic picture selection nine grid view. Support press to enlarge effect, drag and drop sorting, drag and drop to a specified location to delete.

Pub

dependencies:
  nine_grid_view: ^1.0.7

Example

import 'package:nine_grid_view/nine_grid_view.dart';

// bigImage param, It is recommended to use a medium-quality picture, because the original picture is too large and takes time to load. NineGridView( margin: EdgeInsets.all(12), padding: EdgeInsets.all(5), space: 5, type: NineGridType.weChat,//NineGridType.weChat, NineGridType.weiBo itemCount: itemCount, itemBuilder: (BuildContext context, int index) {}, );

// group avatar. // need width, height param. NineGridView( width: 120, height: 120, padding: EdgeInsets.all(5), space: 5, type: NineGridType.qqGp, //NineGridType.weChatGp, NineGridType.dingTalkGp itemCount: itemCount, itemBuilder: (BuildContext context, int index) {}, );

// It is recommended to use a thumbnail picture,because the original picture is too large, it may cause repeated loading and cause flashing. DragSortView( imageList, space: 5, margin: EdgeInsets.all(20), padding: EdgeInsets.all(0), itemBuilder: (BuildContext context, int index) {}, initBuilder: (BuildContext context) {}, onDragListener: (MotionEvent event, double itemWidth) { /// Judge to drag to the specified position to delete /// return true; if (event.globalY > 600) { return true; } return false; }, );

Screenshots

|||| |:---:|:---:|:---:| |||| ||||

App

Moss :moss.apk

Others

Another NineGridView in flukit UI Kit,using GridView implementation。But in this project used Stack + Positioned。

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.