Abra uma nova tela

Parte da seção Listas e telas do Journey de Flutter da Coddy. Lição 18 de 33.

Os aplicativos têm mais de uma tela: uma lista, depois os detalhes de um item e, em seguida, uma página de configurações. No Flutter, uma tela é um widget, geralmente um Scaffold em sua própria classe.

O Navigator mantém suas telas em uma pilha, como um monte de cartas. A que está no topo é a que você vê. Navigator.push coloca uma nova tela no topo:

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

MaterialPageRoute desliza a nova tela para dentro, como acontece em um celular. Seu builder é uma função que retorna a tela a ser exibida.

context informa ao Navigator onde você está na árvore de widgets. É por isso que HomeScreen é uma classe própria, dentro de MaterialApp: seu context pode encontrar o navegador que MaterialApp cria.

Desafio

Fácil

O botão About this app ainda não faz nada. Faça com que ele abra a AboutScreen com Navigator.push.

Experimente você mesmo

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