Menu
CoddyTech

Volver con un botón

Parte de la sección Listas y pantallas del Journey de Flutter de Coddy. Lección 20 de 33.

La flecha hacia atrás no es la única forma de volver. Un botón Guardar o Listo también debería cerrar su pantalla al pulsarlo. Navigator.pop quita la pantalla superior de la pila, igual que la flecha hacia atrás:

ElevatedButton(
  onPressed: () {
    Navigator.pop(context);
  },
  child: const Text('Save'),
)

Push y pop forman una pareja: push añade una pantalla y pop la quita. Volver a hacer push de la pantalla de inicio no te llevaría atrás. Añadiría una segunda pantalla de inicio encima de la pila, con una flecha hacia atrás que lleva a la configuración.

challenge icon

Desafío

Fácil

El botón Save de la pantalla de configuración no hace nada. Haz que cierre la pantalla de configuración y vuelva a la pantalla de inicio con Navigator.pop.

Pruébalo tú mismo

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomeScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Home')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => const SettingsScreen()),
            );
          },
          child: const Text('Open settings'),
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Settings')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {},
          child: const Text('Save'),
        ),
      ),
    );
  }
}
quiz iconPonte a prueba

Esta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.

Todas las lecciones de Listas y pantallas

Practica por tu cuenta: Compilador de Flutter online