Crear Aplicacion de Multiples Paginas Flutter

En el siguiente tutorial les mostrare como crear una aplicacion con 3 paginas en Flutter, ustedes pueden aplicar lo aprendido para crear mas paginas si asi lo requieren.

Este articulo es parte de la Guia Maestra para crear aplicaciones en Flutter →

En Flutter, la navegación se gestiona mediante una “pila” (stack). Cuando nos movemos a una nueva pantalla, esta se coloca encima de la anterior; cuando regresamos, la pantalla actual se “expulsa” para revelar la que estaba debajo.

Para este ejercicio, utilizaremos StatelessWidgets. Estos son ideales para páginas estáticas donde el contenido no cambia dinámicamente tras su construcción, lo que los hace ligeros y eficientes para interfaces de usuario informativas.

Estructura del Proyecto: El archivo main.dart

Todo nuestro flujo de navegación se centralizará en el archivo main.dart. Definiremos tres clases principales que representarán nuestras páginas.

1. Pagina1: El Punto de Partida

Es la base de nuestra aplicación. Contiene un botón principal que utiliza el método Navigator.push para enviarnos a la siguiente pantalla.

2. Pagina2: El Nodo de Conexión

Esta página es crucial porque actúa como puente. Contiene dos acciones:

• Siguiente: Nos dirige hacia la Pagina3.
• Regresar: Utiliza Navigator.pop para eliminar la pantalla actual de la pila y volver a la Pagina1.

Tip de Arquitectura: Si tuviéramos 10 páginas similares, no escribiríamos el código 10 veces. Crearíamos un Widget Personalizado que reciba como parámetros el destino de “Siguiente” y “Regresar”, manteniendo nuestro código limpio y modular.

3. Pagina3: El Cierre del Flujo

En este ejemplo, la tercera página solo permite el retorno a la Pagina2. Al presionar el botón de regresar, Flutter destruye la instancia de la Pagina3 y libera los recursos, volviendo al estado anterior en la Pagina2.

Pagina 1

La pagina 1 tiene el siguiente codigo, que va desde la declaracion de librerias, la funcion main, el widget o clase de inicio y la clase de la pagina 1.

import 'package:flutter/material.dart';

void main() {
  runApp(const MainApp());
}

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: Center(
          child: Pagina1(),
        ),
      ),
    );
  }
}


class Pagina1 extends StatelessWidget {
  const Pagina1({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold (
      appBar: AppBar ( title: const Text("Primera Pagina")),
      body: Center(
        child: TextButton(
          onPressed: ()=>{ 
            Navigator.push(context, MaterialPageRoute(builder: (context){
              return const Pagina2();
            })
          )},
          child: const Text("Siguiente Pagina")
        )
      )
    );
  }
}

La clase Pagina1 contiene la estructura basica de toda pagina en Flutter, un Scaffold que contiene el AppBar y en el body o cuerpo de la aplicacion contiene un TextButton que nos dirige a la pagina 2.

Podemos notar que el codigo para ir a la pagina 2 , esta en el atributo onPressed del Boton “Siguiente Pagina”

Navigator.push(context, MaterialPageRoute(builder: (context){
              return const Pagina2();
            })

Este codigo tiene como parametro el contexto de la app y retorna la clase que vamos a abrir como siguiente pagina.

Pagina 2

La clase de la pagina 2 es similar a la pagina 1, solo que en este caso contamos con 2 botones uno para ir a la pagina siguiente y otro para regresar a la pagina 1.

class Pagina2 extends StatelessWidget {
  const Pagina2({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold (
      appBar: AppBar ( title: const Text("Segunda Pagina")),
      body: Center (
        child: Column(
        children : <Widget>[ 

        TextButton(
          onPressed: ()=>{ 
            Navigator.push(context, MaterialPageRoute(builder: (context){
              return const Pagina3();
            })
          )},
          child: const Text("Siguiente Pagina")
        ),
        TextButton(onPressed: () { Navigator.pop(context); },
        child: const Text("Regresar")
        )
  ]
      )),
    );
  }
}

Para poder colocar 2 o mas elementos en la lista tenemos que usar el Widget Column este widget nos permite hacer un stack o pila de elementos.

El boton para la siguiente pagina tiene el mismo formato que la Pagina1, solo que ahora nos dirige a la Pagina3().

Ahora el boton para regresar tiene la siguiente estructura.

Navigator.pop(context);

Pagina 3

La pagina 3 solo cuenta con un boton, el boton de regresar a la pagina 2.

class Pagina3 extends StatelessWidget{
  const Pagina3({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar( title: const Text("Tercera Pagina")),
      body: Center(
        child: TextButton(
          onPressed: ()=>{ Navigator.pop(context)},
          child: const Text("Regresar")
        )
      )
    );
  }
}

De igual manera que en el caso anterior el boton regresar tiene la funcion Navigator.pop(context);

Resultado

Una vez que juntamos todo el codigo en el archivo main.dart, lo ejecutamos y podremos ver el resultado.

Aqui solo les muestro la pagina2 y se pueden ver los 2 botones.