flutter_reorderable_grid_view 4.0.0 icon indicating copy to clipboard operation
flutter_reorderable_grid_view: ^4.0.0 copied to clipboard

Enables animated GridViews when updating children or when trying to reorder them by using drag and drop.

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.

72
likes
140
pub points
91%
popularity

Publisher

verified publisher iconkarvulf.com

Enables animated GridViews when updating children or when trying to reorder them by using drag and drop.

Repository (GitHub)

Documentation

API reference

License

Icon for licenses.BSD-3-Clause (LICENSE)

Dependencies

equatable, flutter

More

Packages that depend on flutter_reorderable_grid_view