a gridview whose items the user can interactively reorder by dragging.
compared to the given reorderablelistview
, it
is possible to reorder different sizes of widgets with or without animation.
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
parameter | description | default value |
---|---|---|
children |
displays all given children that are build inside a wrap. | – |
spacing |
spacing in vertical direction between children. | 8 |
runspacing |
spacing in horizontal direction between children. | 8 |
enableanimation |
enables the animation when changing the positions of childrens after drag and drop. | true |
enablelongpress |
decides if the user needs a long press to move the item around. | true |
longpressdelay |
specify the delay to move an item when enabling long press. | 500 ms |
onupdate |
after 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.
Comments are closed.