Pub Version Codecov GitHub branch checks state

An animated image of the iOS ReordableGridView UI An animated image of the iOS ReordableGridView UI An animated image of the iOS ReordableGridView UI An animated image of the iOS ReordableGridView UI

Package for having animated Drag and Drop functionality for every type of GridView and to have animations when changing the size of children inside your GridView.

Index

Overview

Use this package in your Flutter App to:

  • get the functionality for an animated drag and drop in all type of GridView
  • have animations when updating, adding or removing children

Getting started

import 'package:flutter/material.dart';
import 'package:flutter_reorderable_grid_view/entities/order_update_entity.dart';
import 'package:flutter_reorderable_grid_view/widgets/widgets.dart';

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final _scrollController = ScrollController();
  final _gridViewKey = GlobalKey();
  final _fruits = <String>["apple", "banana", "strawberry"];

  @override
  Widget build(BuildContext context) {
    final generatedChildren = List.generate(
      _fruits.length,
              (index) => Container(
        key: Key(_fruits.elementAt(index)),
        color: Colors.lightBlue,
        child: Text(
          _fruits.elementAt(index),
        ),
      ),
    );

    return Scaffold(
      body: ReorderableBuilder(
        children: generatedChildren,
        scrollController: _scrollController,
        onReorder: (List<OrderUpdateEntity> orderUpdateEntities) {
          for (final orderUpdateEntity in orderUpdateEntities) {
            final fruit = _fruits.removeAt(orderUpdateEntity.oldIndex);
            _fruits.insert(orderUpdateEntity.newIndex, fruit);
          }
        },
        builder: (children) {
          return GridView(
            key: _gridViewKey,
            controller: _scrollController,
            children: children,
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 4,
              mainAxisSpacing: 4,
              crossAxisSpacing: 8,
            ),
          );
        },
      ),
    );
  }
}

Usage

ReorderableBuilder has two main functionalities: Drag and Drop and Animations.

For using this widget, you have to wrap ReorderableBuilder to your GridView (see more on Getting Started).

Every child has to have a unique key.

Also be sure to make where you have the scrolling behavior. If your GridView has the functionality to scroll, you should add the ScrollController from ReorderableBuilder to your GridView.

Drag and Drop

The functionality for drag and drop is enabled by default. You have to use onReorder to prevent a weird behavior after releasing the dragged child.

Scroll while dragging

While dragging a child, it can be moved to top or bottom of your GridView to start an automatic scrolling.

Animations

There are different animations:

  • when drag and drop, all position changes are animated
  • when adding, removing or updating a child (e.g. you swap two positions), there is also an animation for that behavior

Supported Widgets

  • GridViews
    • GridView
    • GridView.count
    • GridView.extent
    • GridView.builder

Parameters

ParameterDescriptionDefault Value
childrenDisplays all given children that are build inside a Wrap or GridView. Don't forget a unique key for every child.-
lockedIndicesDefine all children that can't be moved while dragging. You need to add the index of this child in a list.
enableLongPressDecides if the user needs a long press to move the item around.true
longPressDelaySpecify the delay to move an item when enabling long press.500 ms
enableDraggableEnables the drag and drop functionality.true
dragChildBoxDecorationWhen a child is dragged, you can override the default BoxDecoration, e. g. if your children have another shape.-
initDelay!Not recommended! - Adding a delay when creating children instead of a PostFrameCallback.-
enableScrollingWhileDraggingEnables the functionality to scroll while dragging a child to the top or bottom.true
automaticScrollExtentDefines the height of the top or bottom before the dragged child indicates a scrolling.80.0
scrollControllerScrollController to get the current scroll position. Important for calculations!-
onReorderCalled after drag and drop was released. Contains a list of OrderUpdateEntity that has information about the old and new index. See more on the example main.dart-
onDragStartedCallback when user starts dragging a child.-
onDragEndCallback when user releases dragged child.-
builderImportant function that returns your children as modified children to enable animations and the drag and drop. See more on the example main.dart.-

Road map for release of version 4.0.0

  • Code Refactoring for easier understanding!

  • Support for Wrap

    • with animation when adding or removing items
    • drag and drop
    • Github Issue #28
  • Support for GridView.builder with function itemBuilder

    • much better performance when rendering a lot of children
    • with animation when adding or removing items (optional because I am not sure if it's possible to implement it with my current knowledge)
    • drag and drop
    • Github Issue #43
  • Adding animation when releasing the item

Future Plans

If you have feature requests or found some issues, feel free and open your issues in the GitHub project.

Thank you for using this package.

Libraries

order_update_entity
reorderable_animated_container
reorderable_animated_dragging_container
reorderable_animated_opacity
reorderable_animated_update_container
reorderable_builder
reorderable_draggable
reorderable_entity
reorderable_scrolling_listener
widgets