How to change duration of Hero Animation in Flutter but with arguments

Question

Here is my code as a gist ( an interactive version of my code in dartpad.dev )

A quick rundown on what I was trying to do with this app:

I have two page / Where I want to type a String in a TextField , which will simultaneously start appearing in the appBar , and there is another button , which when you press , will take you to another page ( Home Widget ) but with the text that you wrote in the / page. I want this transition to be like a Hero Animation , where the text from the appBar of / page flies into body of Info

I was previously Using

Navigator.pushNamed(context, "Info", arguments: {"text": myController.text});

To route to the new page and also pass the text that I want to display over there.And I was able to do it , but even in Profile mode , the animation is too fast

But the answer I got coming from this Question was to use

Navigator.push(
  context,
  PageRouteBuilder(
      transitionDuration: Duration(seconds: 2),
      pageBuilder: (_, __, ___) => Page2())
      ),

But the problem is , the Navigator.push(context, PageRouteBuilder( ... ) ) doesn't let you pass arguments , which I definitely want to be able to do.

Answer 1

If you can control the transition animation using PageRouteBuilder class, then the only thing which you care about is passing the data. Now, I am sure, you have missed out on this, and this is:

Passing the data as an argument for classes in Flutter. You don't have to actually prefer something like this always arguments: {}.

Now, what I meant by that, every Class in Flutter can accept data as an argument, and how do you that.

• Create a content that accepts the arguments [Which you've done already]
• Pass the data in the class while using, in our case Info(pass_it_here) [This has to be done now]

How can we achieve that in code?

So, you just have to pass the data like the one which is mentioned below, while transitioning. Your Info class is accepting data fine. So all you need to do is to achieve what you want is, this:

Navigator.push(
  context,
  PageRouteBuilder(
      transitionDuration: Duration(seconds: 2),
      pageBuilder: (_, __, ___) => Info(text: myController.text) // <-- here is the magic
  )
)

Suggestion:

If you are defining parameter for a class, let us take the example of the Info only, please declare it as final. I know you will be changing the data, but you can copy the content to the local variable and do whatever you want to that.

Example

class Info extends StatefulWidget {
  final String text;  // <-- Declare this as final
  
  Info({this.text});

  @override
  _InfoState createState() => _InfoState();
}

Using the @immutable data inside the main class:

class _InfoState extends State<Info> {
   // here how you are just copying the data to the local variable
   // var _myText = widget.text;
   String _myText = "";

   // or you can do this via @initState
   @override
   void initState(){
     super.initState();

     _myText = widget.text;
   }

   // Now use your variable _myText however you want
}