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

Dialog support for Hero transitions #10667

Closed
collinjackson opened this issue Jun 13, 2017 · 8 comments
Closed

Dialog support for Hero transitions #10667

collinjackson opened this issue Jun 13, 2017 · 8 comments

Comments

@collinjackson
Copy link
Contributor

@collinjackson collinjackson commented Jun 13, 2017

Inspired by this stack overflow question.

Right now if you want to do a hero animation like this, you have to make your own custom semitransparent subclass of PageRoute.

We could support dialog hero transitions in the framework automatically.

One caveat with dialogs is that because the modal barrier isn't opaque, we should avoid rendering the Hero in its original location until the dialog is fully dismissed.

Here's the code that was used to generate the above image.

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(
    home: new HomePage(),
  ));
}

class HeroDialogRoute<T> extends PageRoute<T> {
  HeroDialogRoute({ this.builder }) : super();

  final WidgetBuilder builder;

  @override
  bool get opaque => false;

  @override
  bool get barrierDismissible => true;

  @override
  Duration get transitionDuration => const Duration(milliseconds: 300);

  @override
  bool get maintainState => true;

  @override
  Color get barrierColor => Colors.black54;

  @override
  Widget buildTransitions(BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) {
    return new FadeTransition(
      opacity: new CurvedAnimation(
        parent: animation,
        curve: Curves.easeOut
      ),
      child: child
    );
  }

  @override
  Widget buildPage(BuildContext context, Animation<double> animation,
    Animation<double> secondaryAnimation) {
    return builder(context);
  }

}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Hero demo'),
      ),
      body: new Align(
        alignment: FractionalOffset.center,
        child: new Card(
          child: new Hero(
            tag: 'developer-hero',
            child: new Container(
              width: 300.0,
              height: 300.0,
              child: new FlutterLogo(),
            ),
          ),
        ),
      ),
      floatingActionButton: new FloatingActionButton(
        child: new Icon(Icons.developer_mode),
        onPressed: () {
          Navigator.push(
            context,
            new HeroDialogRoute(
              builder: (BuildContext context) {
                return new Center(
                  child: new AlertDialog(
                    title: new Text('You are my hero.'),
                    content: new Container(
                      child: new Hero(
                        tag: 'developer-hero',
                        child: new Container(
                          height: 200.0,
                          width: 200.0,
                          child: new FlutterLogo(),
                        ),
                      ),
                    ),
                    actions: <Widget>[
                      new FlatButton(
                        child: new Text('RAD!'),
                        onPressed: Navigator
                          .of(context)
                          .pop,
                      ),
                    ],
                  ),
                );
              },
            ),
          );
        },
      ),
    );
  }
}
@collinjackson collinjackson changed the title Dialogs support for Hero transitions Dialog support for Hero transitions Jun 13, 2017
@Hixie Hixie modified the milestones: 4: Make shippers happy, 5: Make Hixie proud Jun 13, 2017
@Hixie
Copy link
Member

@Hixie Hixie commented Jun 13, 2017

To anyone who finds this bug hoping for a solution:
If the workaround above is not sufficient, please let us know. Our current plan is to not bring this into the framework itself in the near future.

@aytunch
Copy link

@aytunch aytunch commented Feb 10, 2019

I think Hero animations should not only support transitions between pages but also in same page (from one widget to another widget) animations as well.

@lukepighetti
Copy link

@lukepighetti lukepighetti commented Mar 2, 2019

@Hixie Hero animation from an image in a social media timeline to a full screen view is a common use case. Is there a mechanism preferred over Hero for this use case? The above solution is not good because the starting image reappears after the Hero animation is complete.

Another interesting thing is that the Hero jumps when it starts moving forward, but it lands perfectly on reverse.

screenrecording_03-02-2019 18-23-05 2019-03-02 18_28_26

@chunhtai chunhtai self-assigned this Jul 30, 2019
@chunhtai
Copy link
Contributor

@chunhtai chunhtai commented Jul 30, 2019

Other type of hero transitions support should be a separate issue. As for dialog transition support, the above example should be sufficient except the issue @lukepighetti mentions.

I think we have two different issues.
1, the original image reappears. This is because we purposely hide it during hero transition but unhide it when transition complete in the assumption the first route should be covered underneath. I think this is something we should fix. We should always hide the from hero image even if the transition complete.
2, the jumping might be related to boxfit #20510

@lukepighetti
Copy link

@lukepighetti lukepighetti commented Jul 30, 2019

just an update, the jumping was related to boxfit

@chunhtai chunhtai mentioned this issue Jul 31, 2019
0 of 9 tasks complete
@chunhtai
Copy link
Contributor

@chunhtai chunhtai commented Aug 9, 2019

I merged the fix for the image reappears issue, the jumping issue can be discussed in #20510. I will close this issue since there is no more actionable item.

Feel free to reopen if there is any other concern.

@chunhtai chunhtai closed this Aug 9, 2019
@lizhuoyuan
Copy link

@lizhuoyuan lizhuoyuan commented Oct 21, 2020

2000 years later

To anyone who finds this bug hoping for a solution:
If the workaround above is not sufficient, please let us know. Our current plan is to not bring this into the framework itself in the near future.

@DarthSid12
Copy link

@DarthSid12 DarthSid12 commented Dec 10, 2020

Would love to see dialogs having hero transitions. Its easier to use and more beginner friendly. I could just copy paste the above workaround but if I face bugs, I would not be able to solve them since I do not understand it.

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

Successfully merging a pull request may close this issue.

None yet
8 participants