Flutter – Argumentos en rutas con nombre

La navegación entre las diversas rutas (es decir, páginas) de una aplicación en Flutter se realiza con el uso de Navigator . El Navegador usa un identificador común para la transición entre rutas. Se pueden pasar argumentos a estas rutas usando el parámetro arguments del método Navigator.pushNamed() . Los argumentos se pueden extraer usando el método ModalRoute.of() o usando la función onGenerateRoute() .

En este artículo, exploraremos los enfoques de extracción de argumentos utilizando el método ModalRoute.of(). Lo haremos implementando ambos en una aplicación simple. Para hacerlo, siga los siguientes pasos:

• Diseñar los argumentos que se van a pasar
• Crear un widget que extraiga el argumento
• Agregar el widget a la tabla de rutas
• Transición al widget

Analicemos los pasos anteriores en detalle:

Diseña el argumento:

Aquí pasaremos un único dato como argumento mediante el diseño de una clase Argumento de la siguiente manera:

class Arguments {
  final String title_bar;
  final String text_message;
 
  Arguments(this.title_bar, this.text_message);
}

Creación de un widget:

Ahora haga que un widget extraiga y muestre la barra de título y el mensaje de texto de la clase de argumento y use el método ModelRouteof() para extraer el argumento como se muestra a continuación :

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),
      ),
    );
  }
}

Registrando el widget:

Para registrar el widget recién creado en la tabla de rutas usando lo siguiente:

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

Transición:

Al tocar el botón elevado que agregaremos en la pantalla, debería pasar a otra pantalla y mostrar el mensaje de texto extraído y la barra de título . Para ello utiliza lo siguiente:

ElevatedButton(
  child: Text("Extracted through modelRouteof() method"),
  onPressed: () {
 
    Navigator.pushNamed(
      context,
      ExtractArgumentsScreen.routeName,
      arguments: ScreenArguments(
        'Extract Arguments Screen',
        'Extracted through modelRouteof() method',
      ),
    );
  },
),

Código fuente completo:

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: <Widget>[
            ElevatedButton(
              child: Text("Extracts arguments"),
              style: ButtonStyle(
                backgroundColor:MaterialStateProperty.all<Color>(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<Color>(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);
}

Producción: