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

[BUG] The hero animation should work in all situations. #303

Closed
seekcx opened this issue Aug 1, 2020 · 4 comments
Closed

[BUG] The hero animation should work in all situations. #303

seekcx opened this issue Aug 1, 2020 · 4 comments
Labels
bug Something isn't working P1
Projects

Comments

@seekcx
Copy link

seekcx commented Aug 1, 2020

Describe the bug

When using network pictures, the data will not be immediately obtained, so the current code will cause Hero animation cannot take effect when it is first opened.

To Reproduce

Open a network picture.

What is the current behavior?

When opening the network picture for the first time, Hero animation does not take effect.

Expected behavior

The hero animation should work when opening the network picture for the first time.

@seekcx seekcx added the bug Something isn't working label Aug 1, 2020
@renancaraujo renancaraujo added this to Todo in Bug solving via automation Aug 11, 2020
@renancaraujo renancaraujo moved this from Todo to In progress in Bug solving Aug 22, 2020
renancaraujo added a commit that referenced this issue Aug 22, 2020
This makes the image retrieval process not rely on a FutureBuilder.
Previously we recreated Image behavior by showing a loader whilst the image loads, using a completer to detect when the image had finished load.
Now we rely only on the good old state and some ifs in the build method.
Also, we have split that code from the custom child code. The main widget had logics for both image and custom child modes. Now we split that into two internal widgets, the wrappers.

This should resolve the following issues #316 #303
@renancaraujo
Copy link
Member

Should be fixed on #320

Bug solving automation moved this from In progress to Done Aug 22, 2020
@amitkot
Copy link

amitkot commented Dec 1, 2020

I can't get the Hero animation to work with CachedNetworkImage (2.3.3) and PhotoView (0.10.3).

The code I use:

InkWell(
      onTap: () {
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) =>
                Scaffold(
                  backgroundColor: Colors.black,
                  appBar: AppBar(backgroundColor: Colors.transparent),
                  body: PhotoView(
                    imageProvider: CachedNetworkImageProvider(widget.coverImageUrl),
                    initialScale: PhotoViewComputedScale.contained,
                    minScale: PhotoViewComputedScale.contained,
                    maxScale: PhotoViewComputedScale.covered * 1.8,
                    heroAttributes: const PhotoViewHeroAttributes(
                      tag: 'eventCoverImage',
                      transitionOnUserGestures: true,
                    ),
                  ),
                ),
          ),
        );
      },
      child: Hero(
        tag: 'eventCoverImage',
        transitionOnUserGestures: true,
        child: CachedNetworkImage(
          imageUrl: imageUrl,
          height: height,
          fit: fit,
        ),
      ),
    )

@Abacaxi-Nelson
Copy link

Same here

@Mohdx
Copy link

Mohdx commented May 3, 2021

How to make hero animation work?

I'm passing the picture asset image:
GestureDetector( onTap: () { Navigator.pushNamed(context, '/view_photo', arguments: RouteClass( string1: 'lib/assets/images/user.jpg', )); },

`import 'package:flutter/material.dart';

import '../models/_objects.dart';

import 'package:photo_view/photo_view.dart';

class ViewPhoto extends StatefulWidget {
@OverRide
_ViewPhotoState createState() => _ViewPhotoState();
}

class _ViewPhotoState extends State {
RouteClass arguments;

@OverRide
Widget build(BuildContext context) {
arguments = ModalRoute.of(context).settings.arguments;
return Scaffold(
backgroundColor: Colors.transparent,
body: PhotoView(
imageProvider: AssetImage(arguments.string1),
heroAttributes: PhotoViewHeroAttributes(tag: arguments.string1),
),
);
}
}`

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working P1
Projects
Bug solving
  
Done
Development

No branches or pull requests

5 participants