knopp / flutter_reorderable_list

ReorderableList for Flutter
BSD 3-Clause "New" or "Revised" License
336 stars 98 forks source link

There is no way to show item divider properly #28

Open meowofficial opened 4 years ago

meowofficial commented 4 years ago

All lists on screenshots have initial order (1, 2, 3, 4, ...) before reordering. I increased divider thickness of the package example to make it more representative.

When you drag 2nd item down to switch with 3rd one you will get missing top border of 3rd item:

2 -  3

When you drag 3rd item up to switch with 2nd one you will get missing top borders of 2nd and 4th items:

3 -  2

I was able to fix some of the missing dividers by adding new item state. I changed item build function from:

Widget build(BuildContext context) {
    // super.build(context);
    _listState = _ReorderableListState.of(context);

    _listState.registerItem(this);
    bool dragging = _listState.dragging == key;
    double translation = _listState.itemTranslation(key);
    return Transform(
      transform: new Matrix4.translationValues(0.0, translation, 0.0),
      child: widget.childBuilder(
        context,
        dragging
            ? ReorderableItemState.placeholder
            : ReorderableItemState.normal,
      ),
    );
  }

to:

Widget build(BuildContext context) {
    // super.build(context);
    _listState = _ReorderableListState.of(context);

    _listState.registerItem(this);
    bool dragging = _listState.dragging == key;
    double translation = _listState.itemTranslation(key);
    return Transform(
      transform: new Matrix4.translationValues(0.0, translation, 0.0),
      child: widget.childBuilder(
        context,
        dragging
            ? ReorderableItemState.placeholder
            : (translation == 0 ? ReorderableItemState.normal : ReorderableItemState.moving),
      ),
    );
  }

And got this result:

my 2 -  3 my 3 -  2

I guess there should be more item states to make it possible.

knopp commented 4 years ago

Are these screenshots taken during animation? (in which case the temporarily missing dividers are to be expected)

meowofficial commented 4 years ago

Yes, all screenshots are taken during animation at the moment when dragged item in DragProxy state switches with other item.

knopp commented 4 years ago

This list was built to be identical with the UITableView reorder behavior, which does same thing with the top/bottom border during reordering.

meowofficial commented 4 years ago

I'm not familiar with UITableView, but I checked this behavior on ios 14 and got something average between what I described in this issue and actual package behavior.

When you drag 2nd item down to switch with 3rd one you will get this:

ios 2 -  3

When you drag 3rd item up to switch with 2nd one you will get this:

ios 3 -  2

The difference is only in the second case. This all seems inconsistent and weird for me even on ios as there is only top border missing every time. It doesn't look like designed behavior but like a bug, because there is no symmetry. I hope there will be a way to customize this behavior.