Crear Aplicacion de Multiples Paginas en Flutter

 in Flutter by

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.

En Flutter existen los Widgets que son los elementos Visuales , tambien existen los StatelessWidget que son Widgets son estado y los StatefulWidget que son Widgets con estado mas adelante hablaremos de esto.

Para este ejemplo todas las paginas seran Stateless es decir paginas sin estado o paginas estaticas.

Vamos a crear 3 paginas, que las llamaremos pagina1, pagina2 y pagina3.

  • pagina1: tiene un boton que nos dirige a la pagina 2
  • pagina2: tiene un boton que nos dirige a la pagina 1, pero tambien otro que nos dirige a la pagina 1 (Regresar)
  • pagina 3: solo tiene un boton que nos dirige a la pagina 2 de regreso

En caso de que tengamos mas paginas entonces tendriamos que reusar el codigo de la pagina 2, la cual tiene el boton de siguiente y regresar.

Todo el codigo que vamos a escribir lo haremos en el archivo main.dart que es el archivo principal del proyecto.

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.

Leave a comment