How to set and how to get Arguments in Flutter Navigator

In Flutter, you can pass Arguments when navigating between screens using the Navigator class. Here’s how to set and get arguments:

Setting Arguments to Navigator

To pass arguments when navigating, you can use the push or pushNamed method of the Navigator. The first argument is the route name, and the second argument is a map containing the arguments.

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => SecondScreen(arguments: 'My Arguments')),
);

Or using pushNamed:

Navigator.pushNamed(
  context,
  '/second-screen',
  arguments: 'My Arguments',
);

Getting Arguments from the Flutter Navigator

To get the arguments in the destination screen, you can use the ModalRoute class. This class provides information about the route that led to this screen.

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final args = ModalRoute.of(context).settings.arguments;
    return Scaffold(
      appBar: AppBar(title: Text('Second Screen')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Name: $args'),
          ],
        ),
      ),
    );
  }
}

In this example, args is a map containing the arguments passed from the previous screen.

Using Named Arguments

If you’re using pushNamed or Navigator.pushNamed, you can define the arguments in your app’s routes.

MaterialApp(
  title: 'My App',
  home: FirstScreen(),
  routes: {
    '/second-screen': (context) => SecondScreen(),
  },
)

Then, you can pass the arguments when navigating to this route.

class FirstScreen extends StatelessWidget {
  const FirstScreen({super.key});

  @override
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(),
        body: Center(
          child: InkWell(
            child: const Text("go to second"),
            onTap: () {
              Navigator.of(context)
                  .pushNamed('/second-screen', arguments: "My Arguments");
            },
          ),
        ),
      );
}

This way, you create child screens that have some arguments from the parent. And if you want the parent to recieve some result from the second, you could do it like this:

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      title: 'Named Routes Demo',
      // Start the app with the "/" named route. In this case, the app starts
      // on the FirstScreen widget.
      initialRoute: '/',
      routes: {
        // When navigating to the "/" route, build the FirstScreen widget.
        '/': (context) => const FirstScreen(),
        // When navigating to the "/second" route, build the SecondScreen widget.
        '/second': (context) => const SecondScreen(),
      },
    ),
  );
}

class FirstScreen extends StatefulWidget {
  const FirstScreen({super.key});

  @override
  State createState() => _FirstScreenState();
}

class _FirstScreenState extends State {
  Object? myVal = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('First Screen')),
      body: Center(
        child: ElevatedButton(
          // Within the `FirstScreen` widget
          onPressed: () {
            // Navigate to the second screen using a named route.
            Navigator.pushNamed(context, '/second', arguments: 'arg from first screen').then(
              (value) {
                setState(() {
                  myVal = value;
                });
              },
            );
          },
          child: Text('Launch screen $myVal'),
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  const SecondScreen({super.key});

  @override
  Widget build(BuildContext context) {

    final args = ModalRoute.of(context)?.settings.arguments;
    return Scaffold(
      appBar: AppBar(title: const Text('Second Screen')),
      body: Center(
        child: ElevatedButton(
          // Within the SecondScreen widget
          onPressed: () {
            Navigator.pop(context, "Argument from second screen");
          },
          child:  Text('Go back! $args'),
        ),
      ),
    );
  }
}

Using the Flutter Build-in navigation makes sense only for simple to medium apps. For any apps with authentication, medium size and bigger number of feature – auto_route, go_route or any other navigation package is preferred.