Repository navigation
Document that Hero needs everything present and ready on frame zero of the transition animation #15586
Description
Steps to Reproduce
When navigating from a list view which displays the below CollectionPhoto to the CollectionDetails screen, the Hero animation is not shown. However, when I press the back button from the CollectionDetails page, the animation shows the image moving back into the list.
class CollectionPhoto extends StatelessWidget {
CollectionPhoto({ Key key, this.imageName, this.collectionId, }) : super(key: key);
final String imageName;
final String collectionId;
@override
Widget build(BuildContext context) {
return new Material(
color: Colors.transparent,
child: new InkWell(
onTap: () {
Application.router.navigateTo(context, '/collections/$collectionId', transition: TransitionType.native);
},
child: new Hero(
tag: '$collectionId-image',
child: new Image.network(URLS.getCollectionImageURL(imageName)),
)
)
);
}
}class CollectionDetails extends StatelessWidget {
CollectionDetails({ Key key, this.id }) : super(key: key);
final String id;
@override
Widget build(BuildContext context) {
return new StreamBuilder(
stream: Firestore.instance.collection('collections')
.document(id)
.snapshots,
builder: (context, snapshot) {
if (!snapshot.hasData) return new Text('Loading...');
return new Scaffold(
appBar: new AppBar(
title: new Text(snapshot.data.data['name']),
),
body: new Hero(
tag: '$id-image',
child: new Image.network(URLS.getCollectionImageURL(snapshot.data.data['imageName'])),
)
);
},
);
}
}
Activity
Hixie commentedon Jun 12, 2018
For a Hero animation to trigger, the Hero has to exist on the very first frame of the new page's animation. In this case, since you are using a StreamBuilder, the first frame will only show "Loading...", and therefore there's no hero to animate.
We should definitely make the documentation better.
[-]Hero not animating with Network Image[/-][+]Document that Hero needs everything present and ready on frame zero of the transition animation[/+]apaatsio commentedon Sep 26, 2018
Is there a good workaround for this limitation? I have a similar situation with the exception that my stream data is from a local source (I'm using the BLoC pattern to manage state) so there is no network delay and thus basically no need for any kind of loading screen.
A simplified version of the destination widget:
Edit: I found a solution for my specific problem. Just have a synchronous getter for the data in the bloc and pass that as
initialDatafor theStreamBuilderlike described here: https://medium.com/@artemsidorenko/bloc-architecture-in-flutter-a-modern-architectural-approach-and-how-we-use-it-at-jimdo-bea143b56d01github-actions commentedon Aug 15, 2021
This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of
flutter doctor -vand a minimal reproduction of the issue.