Different ways to Navigate and Different ways to send parameters for Navigation in Flutter

Watch Video Tutorial

---

Navigate using Push

Normally if we want to navigate from one screen to another we would use Navigate.push, like in the code below

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => SecondScreen()
  ),
);

And if we want to send parameters, then one of the way to do this is like below

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => SecondScreen(
      'param1',
      'param2',
    ),
  ),
);

Here SecondScreen is another screen that extends StatelessWidget or StatefulWidget which as a constructor like this.

  final String title;
  final String message;

  SecondScreen({this.title, this.message});

Now we see another way to send parameters to next screen where we will use the ‘settings’ property inside the ‘MaterialPageRoute‘. So the above piece of code will change like this.

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => SecondScreen(),
    settings: RouteSettings(
      arguments: ScreenArguments(
        _controllerTitle.text,
        _controllerMessage.text,
      ),
    ),
  ),
);

Here ScreenArguments is our own custom class which is used to send two parameters while navigating to SecondScreen.

ScreenArguments class will look like this

class ScreenArguments {
  final String title;
  final String message;

  ScreenArguments(this.title, this.message);
}

So you can have your own custom object there. Now how will we receive it in the SecondScreen. For that we use the code like below in the build method of SecondScreen.

final ScreenArguments args = ModalRoute.of(context).settings.arguments;

Here args.title will get us the title parameter and args.message will get us the message parameter.

---

Navigate Using PushNamed

In this method, you need to register the screens up-front.
So we go to the main.dart and update our main Widget code like this.

class HomeApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      //home: FirstScreen(),
      routes: {
        FirstScreen.routeId: (context) => FirstScreen(),
        SecondScreen.routeId: (context) => SecondScreen(),
      },
      initialRoute: FirstScreen.routeId,
    );
  }
}

Here FirstScreen.routeId is a static String declared in the FirstScreen Screen. It can be any meaningful value. Similarly for SecondScreen.

// FirstScreen
static String routeId = 'first_screen';
// SecondScreen
static String routeId = 'second_screen';

Once done we can navigate using the below method.

Navigator.pushNamed(
  context,
  SecondScreen.routeId,
  arguments: ScreenArguments(
    _controllerTitle.text,
    _controllerMessage.text,
  ),
);

---

Listen to return values from Closing Screen

For Listening to the returning values from a Closing Screen, we need to pass parameters back in the pop method of the Navigator like this.

Navigator.pop(context, 'YOUR_VALUE_HERE');

Now to receive it. Call await on the Navigator.push or Navigator.pushNamed like below

 final result = await Navigator.pushNamed(
  context,
  SecondScreen.routeId,
  arguments: ScreenArguments(
    _controllerTitle.text,
    _controllerMessage.text,
  ),
);

and we will have the return value in the ‘result‘ variable here, and That’s it.

Don’t forget to watch this tutorial on Youtube.
Also Please Like, share, subscribe if you find the article and video useful.

---