首页 > 解决方案 > How to wait fetching item from BLoC state before running Hero animation?

问题描述

I make an app to learn more about Flutter, RxDart and BLoC pattern. I would to perform a Hero animation from my ListView to my Details Page. My problem is that most of my details page is wrapped into a StreamBuilder because I need to retrieve my item before showing its information, including the image concerned by the Hero animation. Because of that the Hero animation can't be triggered.

 return Scaffold(
        body: StreamBuilder(
      stream: eventBloc.eventDetails,
      builder: (context, snapshot) {
        Event event;
        if (snapshot.hasData) {
          event = snapshot.data;
          return Stack(
            children: <Widget>[
              Column(children: <Widget>[
                Expanded(
                    child: ListView(
                  shrinkWrap: true,
                  children: <Widget>[
                    _buildEventImage(context, event),
                    (event.description != null &&
                            event.description.trim().isNotEmpty)
                        ? _buildDescriptionSection(context, event)
                        : Container(),
                    event.hasLocation ? _buildLocationSection(context) : Container()
                  ],
                ))
              ]),
            ]);
          }
         return Container(child: LoadingIndicatorWidget(visible: true));

Widget _buildEventImage(BuildContext context, Event event) {
    //TODO: Fix Hero animation because of state
    return Hero(
      tag: 'eventImg${event.id}',
      child: Container(
          decoration: BoxDecoration(
            image: DecorationImage(
                image: eventImageProvider(event.image),
                alignment: Alignment.topCenter,
                fit: BoxFit.cover),
          ),
     );
}

标签: flutterflutter-animation

解决方案


推荐阅读