Package detailsv2.0.0

nine_grid_view

Flutter NineGridView & DragSortView, Similar to Weibo / WeChat nine grid view controls to display pictures.

AndroidiOSWebmacOSWindowsLinux

pub.dev API documentation Source code

30-day downloads: 148
Likes: 87
Pub points: 140

Install package

flutter pub add nine_grid_view

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

NineGridView is a Flutter package that provides a flexible nine-grid layout for displaying images, inspired by Weibo and WeChat. It supports both static image grids and draggable sorting with DragSortView, enabling interactive photo arrangements. The package is optimized for multiple platforms including Android, iOS, Web, macOS, Windows, and Linux. It offers smooth rendering and customizable grid behavior, making it ideal for social media-style image galleries or content feeds.

Use cases

Social media photo grids
Image collection displays
Drag-and-drop image sorting
Content feed layouts
Photo album interfaces
Interactive image galleries

Key features

Nine-grid image layout
DragSortView for reordering
Cross-platform support
Customizable grid spacing
Smooth image loading
Responsive design

Suitable for

Developers building social apps
UI designers creating image-heavy interfaces
Apps requiring sortable image collections
Projects targeting multiple platforms
Teams using Flutter for full-stack development

Considerations

Requires proper image URL handling
May need performance tuning for large image sets
Limited to image-only content in base version
Custom styling requires additional code
Not suitable for non-image data

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

Language: English | 中文简体

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: ^2.0.0

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;
  },
);