HOW TO USE ON GENERATE ROUTE IN FLUTTER

When I started using routes in flutter I tried to use the simple routing code. When my application started having multiple pages/screens and passing data between screens, then I realized I need a better way. Most flutter try to hack their way just to avoid using on generate route. It seems complex at a glance but very easy grasp when you pay attention to it.

On Generate Route

What the flutter team is saying is, instead of extracting the arguments directly inside the widget, you can also extract the arguments inside an onGenerateRoute() function and pass them to a widget.

Say our app always passes data to LocationScreen

I always to put my route in one file(route_generator.dart) so that it doesn't get mixed up and its a class. So we get the data from final args = settings.arguments; and pass it inside LocationScreen constructor. Refer to the image below

Setting Your Routes

So in the main.dart file I will call my initial route and set to the home screen using the name route not the name widget. I will also set my onGenerateRoute to the route method we created in our route class.

Using Your Route With Arguments

So now we can pass arguments to our target screen through our route. With the route below, the pushNamed takes two parameters: first, for our named route and second, for the data we want to pass to LocationScreen

Creating Constructor In LocationScreen

Create a constructor in the LocationScreen. Make it required if your screen/page is always going to get data which in this case it is.

Accessing data in LocationScreen State

This is where you have to use the fundamental of flutter. Now we will call widget and tap inside to get our weatherData. eg: widget.weatherData.
The LocationScreen object and the LocationScreen state object are linked. The state object knows which statefull widget it belongs to. So the state object has a property call widget which points to its parent.

Take Away

So you could see, on generate route is not difficult after all. The best route approach flutter offers you. So don't be like me back then when I was try to avoid the hard way.

Comments

[teneon]

Hi there, nice tutorial! :D One thing i should say is that u should avoid images, it is impossible to copy paste this way. Also it would be excellent if u would also put the code on github! :D Thanks!

[blindguydiy]

Hi, wish it was done without all code in graphics. I am blind and would have liked to understand the posted material. Thank you

[Cuidapet]

Thank you very much!! Very well explained, I could finally understand onGenerateRoutes!! :)))

[Raahim Ghauri]

Great tutorial! I am running into a small issue however. When I specify the default route to be the error route, and use the initial route to point to another screen (let's say the login screen). When the app loads, it shows the back button which takes the user to the error screen. I can disable the back button from the app bar, but the user can still use the back button of the device that would lead them to the error page.

Only workaround I found was to make the default route to be the initial route, and remove the initial route property from Material App.

Has something changed recently, or am I doing something wrong here? Any help would be greatly appreciated.

[Fiifi Pius]

A screen and code sample will be of great help.

[Zain Ahmad]

I am facing the same issue. Did you find any solution?

[devisureshh]

HI, what if i want to pass 2 arguments..

[Fiifi Pius]

You can just create a class(model) and pass the params as in your screen.

Class ScreenArguments{
String type;
String name;
ScreenArguments(this.type, this.name);
}

## In your route generator class
final arguments = args as ScreenArguments;
return MaterialPageRoute(builder: (context) => Screen(type: args.type, name:args.name));


 Navigator.pushReplacementNamed(context, 'routeName', arguments: ScreenArguments('type', 'name'));

[BERAT DİNÇKAN]

you can use map

[Skript Kiddie]

I am emplementing a project and I am facing a problem concering that , I always get the value Null when I try to pass data betwene widgets using arguments