Saltar al contenido principal

Pasar argumentos a una ruta nombrada

Cómo pasar argumentos a una ruta nombrada.

El Navigator proporciona la capacidad de navegar a una ruta nominada desde cualquier parte de una aplicación utilizando un identificador común. En algunos casos, también podrías necesitar pasar argumentos a una ruta nominada. Por ejemplo, podrías querer navegar a la ruta /user y pasar información sobre el usuario a esa ruta.

Puedes lograr esto utilizando el parámetro arguments del método Navigator.pushNamed(). Extrae los argumentos usando el método ModalRoute.of() o dentro de una función onGenerateRoute() proporcionada al constructor de MaterialApp o CupertinoApp.

Esta receta demuestra cómo pasar argumentos a una ruta nominada y leer los argumentos usando ModalRoute.of() y onGenerateRoute() utilizando los siguientes pasos:

  1. Definir los argumentos que necesitas pasar.
  2. Crear un Widget que extraiga los argumentos.
  3. Registrar el Widget en la tabla de routes.
  4. Navegar al Widget.

1. Definir los argumentos que necesitas pasar

#

Primero, define los argumentos que necesitas pasar a la nueva ruta. En este ejemplo, pasa dos fragmentos de datos: el título title de la pantalla y un mensaje message.

Para pasar ambos datos, crea una clase que almacene esta información.

dart 
// You can pass any object to the arguments parameter.
// In this example, create a class that contains both
// a customizable title and message.
class ScreenArguments {
  final String title;
  final String message;
​
  ScreenArguments(this.title, this.message);
}

2. Crear un Widget que extraiga los argumentos

#

A continuación, crea un Widget que extraiga y muestre el title y el message de los ScreenArguments. Para acceder a los ScreenArguments, usa el método ModalRoute.of(). Este método devuelve la ruta actual con los argumentos.

dart 
// A Widget that extracts the necessary arguments from
// the ModalRoute.
class ExtractArgumentsScreen extends StatelessWidget {
  const ExtractArgumentsScreen({super.key});
​
  static const routeName = '/extractArguments';
​
  @override
  Widget build(BuildContext context) {
    // Extract the arguments from the current ModalRoute
    // settings and cast them as ScreenArguments.
    final args = ModalRoute.of(context)!.settings.arguments as ScreenArguments;
​
    return Scaffold(
      appBar: AppBar(title: Text(args.title)),
      body: Center(child: Text(args.message)),
    );
  }
}

3. Registrar el Widget en la tabla de routes

#

A continuación, agrega una entrada a las routes proporcionadas al Widget MaterialApp. Las routes definen qué Widget debe crearse en función del nombre de la ruta.

dart 
MaterialApp(
  routes: {
    ExtractArgumentsScreen.routeName: (context) =>
        const ExtractArgumentsScreen(),
  },
)

4. Navegar al Widget

#

Finalmente, navega a la pantalla ExtractArgumentsScreen cuando el usuario toque un botón usando Navigator.pushNamed(). Proporciona los argumentos a la ruta a través de la propiedad arguments. La pantalla ExtractArgumentsScreen extrae el title y el message de estos argumentos.

dart 
// A button that navigates to a named route.
// The named route extracts the arguments
// by itself.
ElevatedButton(
  onPressed: () {
    // When the user taps the button,
    // navigate to a named route and
    // provide the arguments as an optional
    // parameter.
    Navigator.pushNamed(
      context,
      ExtractArgumentsScreen.routeName,
      arguments: ScreenArguments(
        'Extract Arguments Screen',
        'This message is extracted in the build method.',
      ),
    );
  },
  child: const Text('Navigate to screen that extracts arguments'),
),

Alternativamente, extrae los argumentos usando onGenerateRoute

#

En lugar de extraer los argumentos directamente dentro del Widget, también puedes extraer los argumentos dentro de una función onGenerateRoute() y pasarlos a un Widget.

La función onGenerateRoute() crea la ruta correcta basándose en los RouteSettings proporcionados.

dart 
MaterialApp(
  // Provide a function to handle named routes.
  // Use this function to identify the named
  // route being pushed, and create the correct
  // Screen.
  onGenerateRoute: (settings) {
    // If you push the PassArguments route
    if (settings.name == PassArgumentsScreen.routeName) {
      // Cast the arguments to the correct
      // type: ScreenArguments.
      final args = settings.arguments as ScreenArguments;
​
      // Then, extract the required data from
      // the arguments and pass the data to the
      // correct screen.
      return MaterialPageRoute(
        builder: (context) {
          return PassArgumentsScreen(
            title: args.title,
            message: args.message,
          );
        },
      );
    }
    // The code only supports
    // PassArgumentsScreen.routeName right now.
    // Other values need to be implemented if we
    // add them. The assertion here will help remind
    // us of that higher up in the call stack, since
    // this assertion would otherwise fire somewhere
    // in the framework.
    assert(false, 'Need to implement ${settings.name}');
    return null;
  },
)

Ejemplo interactivo

#

A menos que se indique lo contrario, la documentación de este sitio refleja Flutter 3.44.0. Página actualizada por última vez el 2026-05-05. Ver código fuente oreportar un problema.