Menu
CoddyTech

Volte com um botão

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

A seta de voltar não é a única forma de voltar. Um botão Salvar ou Concluído também deve fechar a tela quando for pressionado. Navigator.pop remove a tela do topo da pilha, assim como a seta de voltar:

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

Push e pop formam um par: push coloca uma tela na pilha, e pop a remove. Exibir a tela inicial novamente não faria você voltar. Isso colocaria uma segunda tela inicial no topo da pilha, com uma seta de voltar que leva às configurações.

challenge icon

Desafio

Fácil

O botão Save na tela de configurações não faz nada. Faça com que ele feche a tela de configurações e volte para a tela inicial com Navigator.pop.

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: () {
            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 iconTeste seus conhecimentos

Esta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.

Todas as lições de Listas e telas

Pratique por conta própria: Compilador de Flutter online