0

Basic setup:

  1. I have a ListView builder that generates a list based on a List.
  2. Each element of the list is wrapped with a Hero() widget and had a unique tag.
  3. List renders just fine, GestureDetector initiates a 'Details' page on tap, with same widget wrapped in Hero() widget with same tag, and animates just fine, as does the 'return' animation on Navigator.pop();

The problem is...

I allow the user to delete the list element on the details page, if they do this, when I close the page with .pop(), the Hero animation basically animates a blank box of the original size back over the top of the newly rendered (and shorter list) making it look like there are 'blanks' in the list.

I originally thought it was an issue with the state of the list and the list not updating, but lots of checking proves the list is being updated, and the widgets are being re-rendered exactly as they should, it's just that there's a blank box sitting on top of them because of the Hero animation caused by the deletion.

  • Remove the Hero() widget wrapper and it works fine.
  • Break the 'tag' so it no longer matches between the two pages and it's fine (but obviously doesn't animate when navigating to the Details page).

Obviously I can stop deletion and move to the main page to avoid the animation at all or remove the animation, but is there a 'correct' way yo do this?

Anyone else hitting the same?

2
  • Did you use a List of herotag to uniquely identify each element? Sep 6, 2019 at 12:32
  • Each element is tagged based on a value from the list itself so it unique (car registration number as it happens). Everything works as expected other than the deletion so I'm comfortable the the list is built correctly etc.
    – David
    Sep 6, 2019 at 13:16

2 Answers 2

0

What a quite interesting case you got there. Is your details page statefull? One thing i imagine you could do is to setState after the deletion, so in the rebuild the deleted hero widget wouldn't exists anymore, and when poping navigation the hero navigation won't be fired because it doesn't exist anymore.

1
  • It isn't, and at the moment I'm using Provider to manage the state, and the details page makes a call to the provided class which does the actual removal of the element and calls notifyListeners(). The Main page which displays the list is using a Consumer widget to get access to the list from the provided class, so in theory it should be using the updated list? I've reverted to using a Dismissable on the list from the main page at the moment to do the delete and avoid the problem, so I have a 'fix' but would be nice to find a solution!
    – David
    Sep 6, 2019 at 13:44
0

What if instead of deleting the item from the list on the pop-up up page, when the user clicks delete on the pop-up page you send a flag/parameter back to the parent page to delete the record. That way the animation will play fine as the pop-up closes, and then you can animate out the deleted record.

1
  • That certainly works. In the end I think I'll just opt to use the Dismissable in the main list as it's perhaps more intuitive and remove the option to delete from the details - it's probably a better UX as it's more 'standard' I think.
    – David
    Sep 6, 2019 at 14:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.