Abrir una nueva pantalla

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

Las aplicaciones tienen más de una pantalla: una lista, después los detalles de un elemento y después una página de configuración. En Flutter, una pantalla es un widget, normalmente un Scaffold en su propia clase.

Navigator mantiene tus pantallas en una pila, como un montón de tarjetas. La que está arriba es la que ves. Navigator.push coloca una pantalla nueva encima:

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => const AboutScreen()),
);

MaterialPageRoute desliza la pantalla nueva, como lo hace un teléfono. Su builder es una función que devuelve la pantalla que se mostrará.

context le indica a Navigator dónde estás en el árbol de widgets. Por eso HomeScreen es una clase propia, dentro de MaterialApp: su context puede encontrar el navegador que crea MaterialApp.

Desafío

Fácil

El botón About this app todavía no hace nada. Haz que abra AboutScreen con Navigator.push.

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: () {},
          child: const Text('About this app'),
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('About')),
      body: const Center(
        child: Text('Made with Flutter'),
      ),
    );
  }
}