How to stop new screen bottom-up animation when using hero animations

Alfanhui

unread,

Jun 5, 2018, 8:53:12 AM6/5/18

to Flutter Dev

Hey,

As you can see below in the gif, the new page animation scrolls up when using Navigation.of(context).push() and scrolls down on .pop().

But, when using the hero animation, they collide and it looks disturbing. Both pages are using Scaffold widget.

Any clues?

Alfanhui

unread,

Jun 5, 2018, 8:57:19 AM6/5/18

to Flutter Dev

sorry, I meant *Navigator.of(context).push()

Joan Pablo Jiménez

unread,

Jun 5, 2018, 9:03:27 AM6/5/18

to Alfanhui, Flutter Dev

Hi, maybe you can add an opacity animation to the new page. When navigating to the details view of the selected element you cand make an opacity transition, that way the bottom-up animation of the incomming window will be more nice, if you look at the examples in flutter (Flutter Gallery) there are some examples about that.

--
You received this message because you are subscribed to the Google Groups "Flutter Dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to flutter-dev...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Nitish Kumar Singh

unread,

Jun 5, 2018, 9:09:52 AM6/5/18

to Flutter Dev

Show me code so that I can directly help you.

Alfanhui

unread,

Jun 5, 2018, 8:10:15 PM6/5/18

to Flutter Dev

Thanks for help offer Nitish, I have resolved the problem.

I found that by wrapping the highest level widget as a Hero, it removes the page slide animation. So, to resolve my problem I wrap both screens in a default hero widget, then for the icon, have another hero widget which is tagged for each icon. A basic outline is below:

class Achievements extends StatelessWidget {
 
Achievements({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Hero(
      tag: 'AchievementDetails',
      child: Scaffold(
        appBar: AppBar(
          title: Text("Achievements"),
        ),
        drawer: Sidebar("Achievements"),
        body: Scrollbar(
          child: GridView.count(
            primary: false,
            padding: const EdgeInsets.all(20.0),
            crossAxisCount: 2,
            crossAxisSpacing: 2.0,
            children: <Widget>[
              GestureDetector(
                onTap: () => Navigator.of(context).push(
                  MaterialPageRoute<Null>(builder: (BuildContext context) {                     return AchievementDetails(achievementName: "Maps")}
                child: Hero(tag: 'AchievementDetailsMaps', child: Icon(Icons.map)),
            ],
          ),
        ),
      ),
    );
  }


class AchievementsDetails extends StatelessWidget {

  final String achievementName;
  
  Achievements({Key key, this.achievementName}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Hero(
      tag: 'AchievementDetails',
      child: Scaffold(
        appBar: AppBar(
          leading: GestureDetector(              child: Icon(Icons.arrow_back),
              onTap: () {
                Navigator.of(context).pop();
              }),
          title: Text("Achievement Detail"),
        ),
        body: Center(          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Flexible(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    GestureDetector(
                        onTap: () {
                          Navigator.of(context).pop();
                        },
                        child: Hero(
                            tag: 'AchievementDetails$achievementName',
                            child: icon
                        )
                     ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Reply all

Reply to author

Forward