flutter_reorderable_grid_view

To add drag-and-drop functionality to a GridView, wrap your grid in a ReorderableBuilder.

Key Requirements:

1. Unique Keys: Every child within the GridView must have a unique Key.
2. onReorder Callback: You must implement the onReorder callback to update your underlying data source. The callback provides a ReorderedListFunction, which you pass your list to in order to receive the new reordered list.
3. ScrollController: If your GridView is scrollable, you must assign the same ScrollController instance to both the ReorderableBuilder and the GridView itself.

Note on Scrolling: If the ReorderableBuilder is inside another scrollable widget, do not manually assign a ScrollController; it will automatically look up the existing one in the context. Manually assigning one in a nested scrollable context can break drag-and-drop functionality.

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

// ... inside your State class ...
final _scrollController = ScrollController();
var _fruits = <String>["apple", "banana", "strawberry"];

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

  return Scaffold(
    body: ReorderableBuilder(
      children: generatedChildren,
      scrollController: _scrollController,
      onReorder: (ReorderedListFunction reorderedListFunction) {
        setState(() {
          // Update your data source using the returned list
          _fruits = reorderedListFunction(_fruits) as List<String>;
        });
      },
      builder: (children) {
        return GridView(
          controller: _scrollController, // Must match ReorderableBuilder controller
          children: children,
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 4,
          ),
        );
      },
    ),
  );
}

The following parameters are available for configuring the reorderable grid behavior. Note: Always provide a unique Key for every child widget.

| **Parameter**                  | **Description**                                                                                                           | **Default Value** |
|:-------------------------------|:--------------------------------------------------------------------------------------------------------------------------|:-----------------:|
| `children`                     | Displays all given children that are build inside a Wrap or GridView. Don't forget a unique key for every child.       |       **-**       |
| `childBuilder`                 | Enable support for [GridView.builder] using this function. Don't forget a unique key for every child.                   |       **-**       |
| `lockedIndices`                | Define all children that can't be moved while dragging. You need to add the index of this child in a list.              |    **<int>[]**    |
| `nonDraggableIndices`          | Specify indices for [children] that are not draggable.                                                                   |    **<int>[]**    |
| `animationConfig`              | Configuration for all child animations (fade in, position changes, drag feedback, release animation).                   | `const ReorderableAnimationConfig()` |
| `enableLongPress`              | Deprecated. Use `longPressDelay`; for immediate drag set `Duration.zero`.                                                |     **true**       |
| `longPressDelay`               | Specify the duration before dragging starts after long-pressing the widget.                                              |    **500 ms**    |
| `enableDraggable`              | Enables the drag and drop functionality.                                                                                 |     **true**       |
| `enableScrollingWhileDragging` | Enables the functionality to scroll while dragging a child to the top or bottom.                                        |     **true**       |
| `automaticScrollExtent`        | Defines the height of the top or bottom before the dragged child indicates a scrolling.                               |    **150.0**       |
| `dragChildBoxDecoration`       | When a child is dragged, you can override the default BoxDecoration of the dragged child.                                |       **-**       |
| `reverse`                      | Handles the reversed order of your children. Ensure to add this flag to your scrollable and this widget.                |     **false**     |
| `builder`                      | It's required to use [ReorderableBuilder] to obtain updated [children].                                              |       **-**       |
| `onReorder`                    | After releasing the dragged child, [onReorder] is called which contains a function as parameter to reorder all items.   |       **-**       |
| `onDragStarted`                | Callback when dragging starts with the index where it started.                                                           |       **-**       |
| `onDragEnd`                    | Callback when the dragged child was released with the index.                                                           |       **-**       |
| `onUpdatedDraggedChild`        | Called when the dragged child has updated his position while dragging.                                                   |       **-**       |
| `scrollController`             | `ScrollController` which should be also assigned to the scrollable widget. Don't forget this to prevent animation issues.|       **-**       |