Devolver datos desde una pantalla

Cómo retornar datos de una nueva pantalla.

En algunos casos, es posible que quieras retornar datos desde una nueva pantalla. Por ejemplo, supongamos que agregas (push) una nueva pantalla que presenta dos opciones a un usuario. Cuando el usuario toque una opción, querrás informar a la primera pantalla sobre la selección del usuario para que pueda actuar según esa información.

Puedes hacer esto con el método Navigator.pop() siguiendo estos pasos:

Definir la pantalla de inicio
Agregar un botón que lance la pantalla de selección
Mostrar la pantalla de selección con dos botones
Cuando se toca un botón, cerrar la pantalla de selección
Mostrar un snackbar en la pantalla de inicio con la selección

La pantalla de inicio muestra un botón. Al tocarlo, lanza la pantalla de selección.

dart

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Returning Data Demo')),
      // Create the SelectionButton widget in the next step.
      body: const Center(child: SelectionButton()),
    );
  }
}

Ahora, crea el SelectionButton, el cual hace lo siguiente:

Lanza la pantalla SelectionScreen al tocarlo.
Espera a que la pantalla SelectionScreen devuelva un resultado.

dart

class SelectionButton extends StatefulWidget {
  const SelectionButton({super.key});

  @override
  State<SelectionButton> createState() => _SelectionButtonState();
}

class _SelectionButtonState extends State<SelectionButton> {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        _navigateAndDisplaySelection(context);
      },
      child: const Text('Pick an option, any option!'),
    );
  }

  Future<void> _navigateAndDisplaySelection(BuildContext context) async {
    // Navigator.push returns a Future that completes after calling
    // Navigator.pop on the Selection Screen.
    final result = await Navigator.push(
      context,
      // Create the SelectionScreen in the next step.
      MaterialPageRoute<String>(builder: (context) => const SelectionScreen()),
    );
  }
}

Ahora, construye una pantalla de selección que contenga dos botones. Cuando el usuario toque un botón, la aplicación cerrará la pantalla de selección y le informará a la pantalla de inicio qué botón fue tocado.

Este paso define la UI. El siguiente paso agrega código para retornar los datos.

dart

class SelectionScreen extends StatelessWidget {
  const SelectionScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Pick an option')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Padding(
              padding: const EdgeInsets.all(8),
              child: ElevatedButton(
                onPressed: () {
                  // Pop here with "Yep"...
                },
                child: const Text('Yep!'),
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(8),
              child: ElevatedButton(
                onPressed: () {
                  // Pop here with "Nope"...
                },
                child: const Text('Nope.'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Ahora, actualiza el callback onPressed() para ambos botones. Para retornar datos a la primera pantalla, usa el método Navigator.pop(), el cual acepta un segundo argumento opcional llamado result. Cualquier resultado es devuelto al Future en el SelectionButton.

dart

ElevatedButton(
  onPressed: () {
    // Close the screen and return "Yep!" as the result.
    Navigator.pop(context, 'Yep!');
  },
  child: const Text('Yep!'),
)

dart

ElevatedButton(
  onPressed: () {
    // Close the screen and return "Nope." as the result.
    Navigator.pop(context, 'Nope.');
  },
  child: const Text('Nope.'),
)

Ahora que estás lanzando una pantalla de selección y esperando el resultado, querrás hacer algo con la información que se devuelve.

En este caso, muestra un snackbar con el resultado utilizando el método _navigateAndDisplaySelection() en SelectionButton:

dart

// A method that launches the SelectionScreen and awaits the result from
// Navigator.pop.
Future<void> _navigateAndDisplaySelection(BuildContext context) async {
  // Navigator.push returns a Future that completes after calling
  // Navigator.pop on the Selection Screen.
  final result = await Navigator.push(
    context,
    MaterialPageRoute<String>(builder: (context) => const SelectionScreen()),
  );

  // When a BuildContext is used from a StatefulWidget, the mounted property
  // must be checked after an asynchronous gap.
  if (!context.mounted) return;

  // After the Selection Screen returns a result, hide any previous snackbars
  // and show the new result.
  ScaffoldMessenger.of(context)
    ..removeCurrentSnackBar()
    ..showSnackBar(SnackBar(content: Text('$result')));
}

¿Te resultó útil el contenido de esta página?

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

Devolver datos desde una pantalla

1. Definir la pantalla de inicio

2. Agregar un botón que lance la pantalla de selección

3. Mostrar la pantalla de selección con dos botones

4. Cuando se toca un botón, cerrar la pantalla de selección

Botón Yep

Botón Nope

5. Mostrar un snackbar en la pantalla de inicio con la selección

Ejemplo interactivo