Flutter - Arguments in Named Routes

Last Updated : 23 Jul, 2025

Navigating between the various routes (i.e, pages) of an application in Flutter is done with the use of Navigator. The Navigator uses a common identifier to transition between routes. One can pass arguments to these routes using the arguments parameter of Navigator.pushNamed() method. Arguments can be extracted using the ModalRoute.of() method or using the onGenerateRoute function.

In this article, we will explore the approaches of argument extraction using the ModalRoute.of() method and the onGenerateRoute function.

Steps to Implement Arguments in Named Routes

Step 1: Create a new Flutter Application

Create a new Flutter application using the command Prompt. To create a new app, write the below command and run it.

flutter create app_name

To know more about it refer this article: Creating a Simple Application in Flutter

Step 2: Design the Argument

Here, we will pass a single piece of data as an argument by designing an Argument class as follows:

Dart 
class Arguments {
  final String title_bar;
  final String text_message;

  Arguments(this.title_bar, this.text_message);
}


Step 3: Creating a Widget

Now make a widget the extract and displays the title_bar and text_message of the Argument Class and use the ModelRouteof() method to extract the argument as shown below:

Dart 
class ExtractArgumentsScreen extends StatelessWidget {
  static const routeName = '/extractArguments';

  @override
  Widget build(BuildContext context) {
    // Cast the settings.arguments to Arguments.
    final Arguments args = ModalRoute.of(context)!.settings.arguments as Arguments;

    return Scaffold(
      appBar: AppBar(
        title: Text(args.title),
        backgroundColor: Colors.green,
        foregroundColor: Colors.white,
      ),
      body: Center(
        child: Text(args.message),
      ),
    );
  }
}


Step 4: Registering the widget

To register the newly created widget to the routes table use the following:

Dart 
MaterialApp(
  routes: {
    ExtractArgumentsScreen.routeName: (context) => ExtractArgumentsScreen(),
  },
);


Step 5: Transition

On tap of the elevated button that we will add on the screen, it should transition to another screen and display the extracted text_message and the title_bar. To do so, use the following:

Dart 
 ElevatedButton(
      child: Text("Extracts arguments"),
      style: ElevatedButton.styleFrom(
          backgroundColor: Colors.green, foregroundColor: Colors.white),
      onPressed: () {
            Navigator.pushNamed(
                  context,
                  ExtractArgumentsScreen.routeName,
                  arguments: Arguments(
                        'Extract Arguments Screen',
                        'Extracted in the build method.',
                  ),
            );
      },
),

To know more about ElevatedButton in flutter refer this article: Flutter – ElevatedButton Widget


Complete Source Code

main.dart:

Dart 
import 'package:flutter/material.dart';
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      onGenerateRoute: (settings) {
        if (settings.name == PassArgumentsScreen.routeName) {
          
          // Cast the settings.arguments to Arguments.
          final args = settings.arguments as Arguments;
          return MaterialPageRoute(
            builder: (context) {
              return PassArgumentsScreen(
                title: args.title,
                message: args.message,
              );
            },
          );
        }
        assert(false, 'Implementation for ${settings.name} is missing.');
        return null;
      },
      title: 'Arguments in named routes',
      debugShowCheckedModeBanner: false,
      home: HomeScreen(),
      routes: {
        ExtractArgumentsScreen.routeName: (context) => ExtractArgumentsScreen(),
      },
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('GeekForGeeks'),
        backgroundColor: Colors.green,
        foregroundColor: Colors.white,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              child: Text("Extracts arguments"),
              style: ElevatedButton.styleFrom(
                  backgroundColor: Colors.green, foregroundColor: Colors.white),
              onPressed: () {
                Navigator.pushNamed(
                  context,
                  ExtractArgumentsScreen.routeName,
                  arguments: Arguments(
                    'Extract Arguments Screen',
                    'Extracted in the build method.',
                  ),
                );
              },
            ),
            ElevatedButton(
              child: Text("Accepts arguments"),
              style: ElevatedButton.styleFrom(
                  backgroundColor: Colors.green, foregroundColor: Colors.white),
              onPressed: () {
                Navigator.pushNamed(
                  context,
                  PassArgumentsScreen.routeName,
                  arguments: Arguments(
                    'Accept Arguments Screen',
                    'Extracted in the onGenerateRoute function.',
                  ),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

class ExtractArgumentsScreen extends StatelessWidget {
  static const routeName = '/extractArguments';

  @override
  Widget build(BuildContext context) {
    
    // Cast the settings.arguments to Arguments.
    final Arguments args =
        ModalRoute.of(context)!.settings.arguments as Arguments;

    return Scaffold(
      appBar: AppBar(
        title: Text(args.title),
        backgroundColor: Colors.green,
        foregroundColor: Colors.white,
      ),
      body: Center(
        child: Text(args.message),
      ),
    );
  }
}

class PassArgumentsScreen extends StatelessWidget {
  static const routeName = '/passArguments';

  final String title;
  final String message;

  const PassArgumentsScreen({
    super.key,
    required this.title,
    required this.message,
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
        backgroundColor: Colors.green,
        foregroundColor: Colors.white,
      ),
      body: Center(
        child: Text(message),
      ),
    );
  }
}

// Updated Arguments class with matching field names.
class Arguments {
  final String title;
  final String message;

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


Output:
 

Comment
Article Tags:
Flutter
Flutter
Flutter Class

Explore