A GridView whose items the user can interactively reorder by dragging

  grid

Compared to the given ReorderableListView, it is possible to reorder different sizes of widgets with or without animation.

An animated image of the iOS ReordableGridView UI

Features

Use this package in your Flutter App to:

  • Enable a reordering logic with different widgets
  • Simplified widget
  • Works with all kind of widgets that are rendered inside
  • Animated when reordering items

Getting started

Simply add ReordableGridView to your preferred Widget and specify a list of children.

Usage

import 'package:flutter_reorderable_grid_view/reorderable_grid_view.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey,
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(20),
          child: ReorderableGridView(
            children: List.generate(
              20,
                  (index) => Container(
                color: Colors.blue,
                height: 100,
                width: 100,
                child: Text(
                  'test $index',
                  style: const TextStyle(
                    fontSize: 20,
                    color: Colors.white,
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Additional information

ReordableGridView

ParameterDescriptionDefault Value
childrenDisplays all given children that are build inside a Wrap.
spacingSpacing in vertical direction between children.8
runSpacingSpacing in horizontal direction between children.8
enableAnimationEnables the animation when changing the positions of childrens after drag and drop.true
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
onUpdateAfter dragging an item to a new position, this function is called.
The function contains a list of all items in the same order they were added. The number in the list tells where the item is currently positioned.

Future

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

Thank you for using this package.

Contribute and download this package source code on GitHub