Flutter Arguments in Named Routes (original) (raw)

Last Updated : 11 Apr, 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_barand **text_messageof 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_messageand 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: [ 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: