Navegação e Roteamento

Navigator

O Navigator gerencia uma pilha de rotas (telas):

Navegação simples

// Navegar para nova tela
Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => SegundaTela(),
  ),
);

// Voltar
Navigator.pop(context);

// Voltar com resultado
Navigator.pop(context, 'resultado');

Recebendo resultado

// Navegar e aguardar resultado
final resultado = await Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => SegundaTela(),
  ),
);

if (resultado != null) {
  print('Resultado: $resultado');
}

Routes

Definindo rotas nomeadas:

MaterialApp(
  initialRoute: '/',
  routes: {
    '/': (context) => TelaInicial(),
    '/segunda': (context) => SegundaTela(),
    '/terceira': (context) => TerceiraTela(),
  },
)

// Navegar usando rotas nomeadas
Navigator.pushNamed(context, '/segunda');

Navegação entre telas

Exemplo completo:

class TelaInicial extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Tela Inicial')),
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            final resultado = await Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => SegundaTela(),
              ),
            );
            if (resultado != null) {
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(content: Text('Resultado: $resultado')),
              );
            }
          },
          child: Text('Ir para Segunda Tela'),
        ),
      ),
    );
  }
}

class SegundaTela extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Segunda Tela')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context, 'Dados retornados');
          },
          child: Text('Voltar com resultado'),
        ),
      ),
    );
  }
}

Exercícios

Navegação simples: Crie duas telas: TelaInicial e SegundaTela. Na tela inicial, adicione um botão que navegue para a segunda tela usando Navigator.push.
Voltar com resultado: Modifique o exercício anterior para que a segunda tela retorne um resultado quando o usuário pressionar um botão "Voltar". A tela inicial deve exibir o resultado recebido.
Rotas nomeadas: Crie um aplicativo com três telas e configure rotas nomeadas. Use Navigator.pushNamed para navegar entre as telas.
Navegação com dados: Crie uma tela de lista e uma tela de detalhes. Ao clicar em um item da lista, navegue para a tela de detalhes passando os dados do item como parâmetro.
AppBar com botão voltar: Crie uma navegação onde a segunda tela tenha um AppBar que permita voltar para a tela anterior usando o botão de voltar padrão do Flutter.

Soluções

Ver solução do exercício 1

import 'package:flutter/material.dart';

class TelaInicial extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Tela Inicial')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SegundaTela()),
            );
          },
          child: Text('Ir para Segunda Tela'),
        ),
      ),
    );
  }
}

class SegundaTela extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Segunda Tela')),
      body: Center(
        child: Text('Esta é a segunda tela'),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(home: TelaInicial()));
}

Ver solução do exercício 2

import 'package:flutter/material.dart';

class TelaInicial extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Tela Inicial')),
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            final resultado = await Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SegundaTela()),
            );
            if (resultado != null) {
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(content: Text('Resultado: $resultado')),
              );
            }
          },
          child: Text('Ir para Segunda Tela'),
        ),
      ),
    );
  }
}

class SegundaTela extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Segunda Tela')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context, 'Dados retornados!');
          },
          child: Text('Voltar com resultado'),
        ),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(home: TelaInicial()));
}

Ver solução do exercício 3

import 'package:flutter/material.dart';

class Tela1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Tela 1')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () => Navigator.pushNamed(context, '/tela2'),
              child: Text('Ir para Tela 2'),
            ),
            ElevatedButton(
              onPressed: () => Navigator.pushNamed(context, '/tela3'),
              child: Text('Ir para Tela 3'),
            ),
          ],
        ),
      ),
    );
  }
}

class Tela2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Tela 2')),
      body: Center(child: Text('Tela 2')),
    );
  }
}

class Tela3 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Tela 3')),
      body: Center(child: Text('Tela 3')),
    );
  }
}

void main() {
  runApp(MaterialApp(
    initialRoute: '/',
    routes: {
      '/': (context) => Tela1(),
      '/tela2': (context) => Tela2(),
      '/tela3': (context) => Tela3(),
    },
  ));
}

Ver solução do exercício 4

import 'package:flutter/material.dart';

class TelaLista extends StatelessWidget {
  final List<String> itens = ['Item 1', 'Item 2', 'Item 3', 'Item 4'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Lista')),
      body: ListView.builder(
        itemCount: itens.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(itens[index]),
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => TelaDetalhes(item: itens[index]),
                ),
              );
            },
          );
        },
      ),
    );
  }
}

class TelaDetalhes extends StatelessWidget {
  final String item;

  TelaDetalhes({required this.item});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Detalhes')),
      body: Center(
        child: Text('Detalhes do $item', style: TextStyle(fontSize: 24)),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(home: TelaLista()));
}

Ver solução do exercício 5

import 'package:flutter/material.dart';

class TelaInicial extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Tela Inicial')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SegundaTela()),
            );
          },
          child: Text('Ir para Segunda Tela'),
        ),
      ),
    );
  }
}

class SegundaTela extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Segunda Tela'),
        leading: IconButton(
          icon: Icon(Icons.arrow_back),
          onPressed: () => Navigator.pop(context),
        ),
      ),
      body: Center(
        child: Text('Use o botão voltar no AppBar'),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(home: TelaInicial()));
}

Navigator​

Navegação simples​

Recebendo resultado​

Routes​

Navegação entre telas​

Exercícios​

Soluções​