Flutter - Como navegar entre telas com Nuvigator

Flutter - Como navegar entre telas com Nuvigator | Alura Cursos Online

import 'package:alura_project/screens/three_screen.dart';
import 'package:flutter/material.dart';
class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Terceira página"),
      ),
      body: Center(
        child: Column(
          children: [
            ElevatedButton(
              onPressed: ()  {
               Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => ThreeScreen()),
                );
              },
              child: Text('Ir para a página 3 ->'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: ()  {
               Navigator.pop();
              },
              child: Text('<- Voltar para a página 2'),
            ),
          ]
        )
      ),
    );
  }
}

// Código hipotético de um arquivo de navegação
// navegacao.dart
toScreenThree(BuildContext context) => Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => ThreeScreen()),
  );

import './navegacao.dart';
ElevatedButton(
  onPressed: () => toScreenThree(),
  style: ElevatedButton.styleFrom(
    primary: Colors.purple,
    onPrimary: Colors.white,
  ),
  child: Text('Ir para a página 3 ->'),
),

MaterialApp(
  // O initialRoute é a primeira rota que é aberta no app
  initialRoute: '/',
  routes: {
    '/': (context) => HomeScreen(),
    '/two': (context) => TwoScreen(),
    '/three': (context) => ThreeScreen(),
  },
);

import 'package:flutter/widgets.dart';
import 'package:nuvigator/nuvigator.dart';
import 'package:flutter/material.dart';
// Este arquivo ainda não existe, então, o seu código mostrará um erro.
// Mantenha este import do tipo part, já já ele será útil!
part 'main.g.dart';
class MyScreen extends StatelessWidget {
  @override
  Widget build(BuildContext) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Alura nuvigator"),
      ),
      body: Center(
        child: Text(
            'Esta tela foi aberta através do nuvigator!',
            style: TextStyle(fontSize: 20),
        ),
      ),
    );
  }
}
@nuRouter
class MainRouter extends NuRouter {
  @NuRoute()
  ScreenRoute myRoute() => ScreenRoute(
    builder: (_) => MyScreen(),
  );
  @override
  Map<RouteDef, ScreenRouteBuilder> get screensMap  => _$screensMap;
}
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      builder: Nuvigator(
        router: MainRouter(),
        screenType: materialScreenType,
        initialRoute: MainRoutes.myRoute,
      ),
    );
  }
}

name: alura_nuvigator
description: A new Flutter project.
publish_to: 'none'
version: 1.0.0+1
environment:
  sdk: ">=2.7.0 <3.0.0"
dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.0
  nuvigator: ^0.7.2
dev_dependencies:
  flutter_test:
    sdk: flutter
  build_runner: ^1.11.0
flutter:
  uses-material-design: true

├───lib
│   ├───navigation
│   ├───────alura_router.dart
│   ├───────alura_router.g.dart
│   ├───screens
│   ├───────home_screen.dart
│   ├───────two_screen.dart
│   ├───────three_screen.dart
│   ├────main.dart

import 'package:flutter/widgets.dart';
import 'package:nuvigator/nuvigator.dart';
import 'package:flutter/material.dart';
import 'navigation/alura_router.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      builder: Nuvigator(
        router: AluraRouter(),
        screenType: materialScreenType,
        initialRoute: AluraRoutes.home,
      ),
    );
  }
}

import 'package:alura_nuvigator/screens/home_screen.dart';
import 'package:alura_nuvigator/screens/three_screen.dart';
import 'package:alura_nuvigator/screens/two_screen.dart';
import 'package:nuvigator/nuvigator.dart';
import 'package:flutter/widgets.dart';
part 'alura_router.g.dart';
@nuRouter
class  AluraRouter extends NuRouter {
  @NuRoute()
  ScreenRoute<void> home() => ScreenRoute(
    builder: (context) => HomeScreen(),
  );
  @NuRoute()
  ScreenRoute<void> pageTwo() => ScreenRoute(
    builder: (context) => TwoScreen()
  );
  @NuRoute()
  ScreenRoute<void> pageThree({String texto}) => ScreenRoute(
    builder: (context) => ThreeScreen(texto: texto),
  );
  @override
  Map <RouteDef , ScreenRouteBuilder> get screensMap => _$screensMap;
}

import 'package:alura_nuvigator/navigation/alura_router.dart';
import 'package:flutter/material.dart';
import 'package:nuvigator/nuvigator.dart';
class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final router = NuRouter.of<AluraRouter>(context);
    return Scaffold(
      appBar: AppBar(
        title: Text("Primeira página"),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: ()  {
	// É dessa forma que damos um “push” para outra página através do nuvigator! :)
	// As opções de métodos disponíveis podem ser vistas dentro do 
// arquivo gerado pelo Nuvigator
            final router = NuRouter.of<AluraRouter>(context);
            router.toPageTwo();
          },
          child: Text('Ir para a página 2 ->'),
        ),
      ),
    );
  }
}

import 'package:alura_nuvigator/navigation/alura_router.dart';
import 'package:flutter/material.dart';
import 'package:nuvigator/nuvigator.dart';
class TwoScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final router = NuRouter.of<AluraRouter>(context);
    final TextEditingController textoController = TextEditingController();
    return Scaffold(
      appBar: AppBar(
        title: Text("Segunda página"),
        backgroundColor: Colors.purple,
      ),
      body: Padding(
        padding: const EdgeInsets.all(30.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextField(
              decoration: InputDecoration(
                  hintText: 'Diga alguma coisa'
              ),
              controller: textoController,
            ),
            SizedBox(height: 20,),
            ElevatedButton(
              onPressed: () {

// O método toPageThree e os seus similares para as outras telas 
// são gerados automaticamente no arquivo alura_router.g.dart
            router.toPageThree(texto: textoController.text);
          },
          style: ElevatedButton.styleFrom(
            primary: Colors.purple, // background
            onPrimary: Colors.white, // foreground
          ),
          child: Text(&#39;Ir para a página 3 -&gt;&#39;),
        ),
      ],
    ),
  ),
);


}
}

import 'package:alura_nuvigator/navigation/alura_router.dart';
import 'package:flutter/material.dart';
import 'package:nuvigator/nuvigator.dart';
class ThreeScreen extends StatelessWidget {
  final String texto;
  ThreeScreen({Key key, @required this.texto}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    final router = NuRouter.of<AluraRouter>(context);
    return Scaffold(
      appBar: AppBar(
        title: Text("Terceira página"),
        backgroundColor: Colors.black,
      ),
      body: Center(
        child: Text(
          this.texto.isEmpty ? 'Nada informado!' : this.texto,
          style: TextStyle(
            fontSize: 20,
            fontWeight: FontWeight.bold
          ),
        ),
      ),
    );
  }
}

Outras empresas do Grupo Alun

Outras empresas do Grupo Alun

Outras empresas do Grupo Alun

Outras empresas do Grupo Alun

Flutter - Como navegar entre telas com Nuvigator

Leonardo Marinho

Explore por tópico

Navegação

Push e Pop

Rotas nomeadas

Nuvigator

Conclusão

Referências

Leonardo Marinho

Inscreva-se em nossa Newsletter

Explore por tópico

Navegação

Push e Pop

Rotas nomeadas

Nuvigator

Conclusão

Referências

Leia também