No Flutter, a navegação entre telas é geralmente gerenciada por um componente chamado Navigator. Existem diferentes maneiras de realizar a navegação entre telas, mas uma das abordagens mais comuns é utilizando o Navigator juntamente com rotas nomeadas.


Navegação entre Telas usando o Navigator:

  1. Definição de Rotas Nomeadas:

    • Defina rotas nomeadas no seu widget MaterialApp usando o parâmetro routes. As rotas nomeadas são mapeadas para os widgets que representam cada tela do seu aplicativo.

    MaterialApp(
  routes: {
    '/': (context) => HomeScreen(), // Rota inicial
    '/second': (context) => SecondScreen(), // Rota da segunda tela
    // Adicione outras rotas nomeadas conforme necessário
  },
)

  2. Navegação para Outra Tela:

    • Para navegar para outra tela, use o método Navigator.pushNamed passando o nome da rota.

    // Para navegar para a segunda tela
Navigator.pushNamed(context, '/second');

  3. Retornar para a Tela Anterior:

    • Para voltar para a tela anterior, utilize Navigator.pop(context).

    // Para voltar para a tela anterior
Navigator.pop(context);


Exemplo Prático:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      routes: {
        '/': (context) => HomeScreen(), // Rota inicial
        '/second': (context) => SecondScreen(), // Rota da segunda tela
      },
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // Navega para a segunda tela
            Navigator.pushNamed(context, '/second');
          },
          child: Text('Ir para a Segunda Tela'),
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Segunda Tela')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // Volta para a tela anterior
            Navigator.pop(context);
          },
          child: Text('Voltar para a Tela Anterior'),
        ),
      ),
    );
  }
}


No exemplo acima, temos duas telas (HomeScreen e SecondScreen). Ao pressionar o botão na HomeScreen, navegamos para a SecondScreen. Na SecondScreen, há um botão para voltar para a tela anterior.

Além do método Navigator.pushNamed, que usa rotas nomeadas, há outra maneira de navegar para outra tela no Flutter. Você pode usar o construtor MaterialPageRoute diretamente junto com o método Navigator.push.


Exemplo de Navegação com MaterialPageRoute:

ElevatedButton(
  onPressed: () {
    // Navega para a segunda tela usando MaterialPageRoute
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => SecondScreen()),
    );
  },
  child: Text('Ir para a Segunda Tela'),
),


Neste último exemplo, o MaterialPageRoute é utilizado diretamente no método Navigator.push. Ele constrói e navega para a SecondScreen quando o botão é pressionado.

Essa abordagem é útil quando você não está usando rotas nomeadas ou quando deseja configurar a navegação de forma mais detalhada para uma tela específica. O MaterialPageRoute permite configurar transições, animações e outras propriedades específicas da navegação para uma determinada tela.