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.
Desafio
FácilO 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'),
),
),
);
}
}
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
1Listas roláveis
Uma lista que rolaItens da listaInício e fimToque em um item da listaDivisórias entre linhas5Mais de uma tela
Abra uma nova telaA seta VoltarVolte com um botãoEnvie dados para uma telaReceba um resultado de voltaPratique por conta própria: Compilador de Flutter online