Navegação e Roteamento
No Flutter, a navegação e o roteamento entre diferentes telas são gerenciados pelo Navigator
. O Navigator
é responsável por empilhar e desempilhar telas na sua aplicação Flutter. Aqui está um exemplo básico de como você pode navegar entre duas telas diferentes:
1. Criando Tela de Origem:
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(
home: FirstScreen(),
));
class FirstScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Primeira Tela'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondScreen()),
);
},
child: Text('Ir para a Segunda Tela'),
),
),
);
}
}
Neste exemplo, a FirstScreen
contém um botão. Quando o botão é pressionado, ele usa o Navigator
para empilhar uma nova tela (SecondScreen
) na pilha de navegação.
2. Criando Tela de Destino:
class SecondScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Segunda Tela'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.pop(context);
},
child: Text('Voltar para a Primeira Tela'),
),
),
);
}
}
Na SecondScreen
, há um botão que, quando pressionado, utiliza Navigator.pop(context)
para voltar para a tela anterior.
Este é um exemplo simples de navegação entre duas telas usando o Navigator
. Você também pode passar dados entre telas, personalizar a transição entre telas e utilizar rotas nomeadas para gerenciar a navegação em aplicativos Flutter mais complexos. A prática varia com base nos requisitos específicos do seu aplicativo.