How to Change Speed of a Hero Animation In Flutter ??

• General

MaterialPageRoute is a modal route that replaces the entire screen with a platform-adaptive transition. So in this article, we will see How to Change Speed of a Hero Animation In Flutter?

How to Change Speed of a Hero Animation In Flutter?

In order to change the transition speed, you’ll have to adjust the PageRoute transition duration.

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

So, Consider a code snippet like the below:

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>[
            ElevatedButton(
              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,
          ),
        ),
      ),
    );
  }
}

So, the above code will give us output like the below:

A Possible Solution

• Turn your screen into a Stateful Widget.
• If you’re using only one animation, add SingleTickerProviderStateMixin to your state class.
• Create a controller inside the state class.
• If animation appears at the start 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.

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 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, simply use a FlatButton with Navigator.pushNamed, nothing special.

Some Additional Important Info

Even if you change screens later the controller will still be active. So have a looping animation in the background, it’s good to dispose of () 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();
}

• • How the animation is run, or how it is executed can also be customized. One option is to use a CurvedAnimation
  • Declare animation right below your controller.
  • Below your controller, inside initState(), add:

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

Another way of animating in flutter is TweenAnimations.

For example, if you want to transition between colors, you could use ColorTween.

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

Conclusion:

Thanks for being with us on a Flutter Journey !!!

In this article, we have been through How to Change Speed of a Hero Animation In Flutter ??

So, Keep Learning !! Keep Fluttering !!

Flutter Agency is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

Flutter Agency is one of the most popular online portals dedicated to Flutter Technology. Daily thousands of unique visitors come to this portal to enhance their knowledge of Flutter.

Written by Nirali Patel

Nirali Patel is a dedicated Flutter developer with over two years of experience, specializing in creating seamless mobile applications using Dart. With a passion for crafting user-centric solutions, Nirali combines technical proficiency with innovative thinking to push the boundaries of mobile app development.