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

Open
collinjackson opened this Issue Jun 13, 2017 · 1 comment

Comments

Projects
None yet
2 participants
@collinjackson
Contributor

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 from Dialogs support for Hero transitions to Dialog support for Hero transitions Jun 13, 2017

@Hixie Hixie added the framework label Jun 13, 2017

@Hixie Hixie modified the milestones: 4: Make shippers happy, 5: Make Hixie proud Jun 13, 2017

@Hixie

This comment has been minimized.

Contributor

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment