Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

There is no way to show item divider properly #28

Open
meowofficial opened this issue Oct 23, 2020 · 4 comments
Open

There is no way to show item divider properly #28

meowofficial opened this issue Oct 23, 2020 · 4 comments

Comments

@meowofficial
Copy link

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
Copy link
Owner

knopp commented Oct 23, 2020

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

@meowofficial
Copy link
Author

meowofficial commented Oct 23, 2020

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

@knopp
Copy link
Owner

knopp commented Oct 23, 2020

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

@meowofficial
Copy link
Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants