How to change speed of a hero animation in flutter

Question

I have made simple hero animation following instructions from Flutter's website

It works as described in the instructions but in my case, I would like it to animate much more slowly from the first to the second screen. do anyone know how to change the speed of this animation?

Solution 1

To modify the transition speed, you'll have to adjust the PageRoute transition duration (as already pointed out by @diegoveloper).

If you wanna keep the default transition, you can create a class implementing MaterialPageRoute. If you already have your own transition or want to create one you can use the PageRouteBuilder to easily build your own. Simply adjust the transitionDuration.

Here's a small standalone example, using the PageRouteBuilder:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Page1(),
    );
  }
}

class Page1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[
            RaisedButton(
              child: Text('Page2'),
              onPressed: () => Navigator.push(
                  context,
                  PageRouteBuilder(
                      transitionDuration: Duration(seconds: 2),
                      pageBuilder: (_, __, ___) => Page2())),
            ),
            Hero(tag: 'home', child: Icon(Icons.home))
          ],
        ),
      ),
    );
  }
}

class Page2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Hero(
          tag: 'home',
          child: Icon(
            Icons.home,
          ),
        ),
      ),
    );
  }
}

Solution 2

1. A Possible Solution

I don't think the only way of achieving this is through changing the PageRoute transition duration. I think you could also achieve the same effect by using an AnimationController — this answer comes largely from lectures #149 and #150 of Angela Yu's The Complete 2019 Flutter Development Bootcamp with Dart.

1. Turn your screen into a StatefulWidget.
2. If you're using only one animation, add with SingleTickerProviderStateMixin to your state class.
3. Create a controller inside the state class.
4. If your animation is supposed to appear on the initialization of the screen, use the controller inside the initState method.
   • The controller has a property called duration, so you can change it to your liking.

2. How It Would Look Like

In the end, everything should look a bit like this:

class _NewScreenState extends State<HomeScreen> 
  with SingleTickerProviderStateMixin{

  AnimationController controller;

  @override
  void initState() {
    super.initState();

    controller = AnimationController(
      duration: Duration(seconds: 1),
      vsync: this,
    );

    controller.forward();

    controller.addListener((){
      setState(() {
        
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return ...

• vsync is a required (@required) parameter that takes the state (instance) object itself (usually).
• addListener and setState are there if you wish to use the value of the controller (controller.value) at some point in the future — for example, changing the height of the icon with something like height: finalHeight * controller.value.
• For the transition into this screen, I'm simply using a FlatButton with Navigator.pushNamed, nothing special.

3. Some Additional Important Info

1. The controller will still be active even if you change screens later. So if you have a looping animation in the background, it's a good idea to dispose it when changing the screen, this way you don't waste phone resources with it anymore. This could be achieved with:

   @override
   void dispose() {
     controller.dispose();
     super.dispose();
   }
   

2. You could also customize how the animation is run, or how it is executed. One option is to use a CurvedAnimation.
   1. Declare Animation animation; right below your controller.
   2. Below your controller, inside initState, add:

      animation = CurvedAnimation( // the controller can't have upperBound > 1
        parent: controller,        // the controller you created
        curve: Curves.decelerate,
      );
      

3. Another useful way of animating in Flutter is by using TweenAnimations. For example, if you want to transition between colors, you could use ColorTween (below your controller, inside initState):

   animation = ColorTween(
     begin: Colors.red,
     end: Colors.blue,
   ).animate(controller);