Blog Details

img
Development

Flutter – Arguments in Named Routes

Spoke Right / 1 Nov, 2023

Navigating between the various routes(ie, 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. We will do so by implementing both of them in a simple application. To do so follow the below steps:

  • Design the arguments that are to be passed
  • Create a widget that extracts the argument
  • Add the widget to the route table
  • Transition to the widget

Let’s discuss the above steps in detail:

Design the argument:

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

class Arguments {

  final String title_bar;

  final String text_message;


  Arguments(this.title_bar, this.text_message);

}

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) {


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


    return Scaffold(

      appBar: AppBar(

        title: Text(args.title_bar),

      ),

      body: Center(

        child: Text(args.text_message),

      ),

    );

  }

}

Registering the widget:

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

  • Dart




MaterialApp(

  routes: {

    ExtractArgumentsScreen.routeName: (context) => ExtractArgumentsScreen(),

  },

);

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("Extracted through modelRouteof() method"),

  onPressed: () {


    Navigator.pushNamed(

      context,

      ExtractArgumentsScreen.routeName,

      arguments: ScreenArguments(

        'Extract Arguments Screen',

        'Extracted through modelRouteof() method',

      ),

    );

  },

),

Complete Source Code:

  • 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) {

            final ScreenArguments args = settings.arguments;

            return MaterialPageRoute(

              builder: (context) {

                return PassArgumentsScreen(

                  title: args.title,

                  message: args.message,

                );

              },

            );

          }

          assert(false, 'Implementation ${settings.name}');

          return null;

        },

        title: 'Arguments in named routes',

        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,

      ),

      body: Center(

        child: Column(

          mainAxisAlignment: MainAxisAlignment.center,

          children: [

            ElevatedButton(

              child: Text("Extracts arguments"),

              style: ButtonStyle(

                backgroundColor:MaterialStateProperty.all(Colors.green),

              ),

              onPressed: () {

                Navigator.pushNamed(

                  context,

                  ExtractArgumentsScreen.routeName,

                  arguments: ScreenArguments(

                    'Extract Arguments Screen',

                    'Extracted in the build method.',

                  ),

                );

              },

            ),

            // on tap navigate to named route

            ElevatedButton(

              child: Text("Accepts arguments"),

              style: ButtonStyle(

                backgroundColor:MaterialStateProperty.all(Colors.green),

              ),

              onPressed: () {

                // on tab change route

                Navigator.pushNamed(

                  context,

                  PassArgumentsScreen.routeName,

                  arguments: ScreenArguments(

                    'Accept Arguments Screen',

                    'Extracted in the onGenerateRoute function.',

                  ),

                );

              },

            ),

          ],

        ),

      ),

    );

  }

}


class ExtractArgumentsScreen extends StatelessWidget {

  static const routeName = '/extractArguments';


  @override

  Widget build(BuildContext context) {


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


    return Scaffold(

      appBar: AppBar(

        title: Text(args.title),

      ),

      body: Center(

        child: Text(args.message),

      ),

    );

  }

}


//Widget to accept arguments

class PassArgumentsScreen extends StatelessWidget {

  static const routeName = '/passArguments';


  final String title;

  final String message;



  const PassArgumentsScreen({

    Key key,

    @required this.title,

    @required this.message,

  }) : super(key: key);


  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        title: Text(title),

      ),

      body: Center(

        child: Text(message),

      ),

    );

  }

}



class Arguments {

  final String title_bar;

  final String text_message;


  ScreenArguments(this.title_bar, this.text_message);

}



Output:

0 comments
Recent Blogs
Categories
Tags

Warning: PHP Startup: Unable to load dynamic library 'imagick.so' (tried: /usr/local/lib/php/extensions/no-debug-non-zts-20210902/imagick.so (/usr/local/lib/php/extensions/no-debug-non-zts-20210902/imagick.so: cannot open shared object file: No such file or directory), /usr/local/lib/php/extensions/no-debug-non-zts-20210902/imagick.so.so (/usr/local/lib/php/extensions/no-debug-non-zts-20210902/imagick.so.so: cannot open shared object file: No such file or directory)) in Unknown on line 0