Diferencia entre revisiones de «Flutter Navegación»

De MediaWiki
Ir a la navegación Ir a la búsqueda
Línea 302: Línea 302:
 
<br />
 
<br />
 
==Navegación usando rutas==
 
==Navegación usando rutas==
 +
 +
 +
<br />
 +
===Navegación imperativa===
  
 
* Más información en: https://api.flutter.dev/flutter/widgets/Navigator/pushNamed.html
 
* Más información en: https://api.flutter.dev/flutter/widgets/Navigator/pushNamed.html
 +
 +
: En este tipo de navegación, los Widgets que conforman las pantallas, se comportan como hojas que se apiladas unas encima de otras.
 +
: Debemos entender que la hoja (pantalla = widget) que está encima de todo es la pantalla que se está visualizando en este momento.
 +
: Podemos hacer operaciones de 'push' para apilar una nueva hoja=pantalla, operaciones de 'pop' para quitar una hoja de encima de la pila u operaciones de replace, para cambiar una hoja por otra.
  
 
<br />
 
<br />
Línea 501: Línea 509:
  
 
:Al pulsar sobre el botón, la página1 es sustituída por la página2 y si volvemos atrás pulsando el botón Back, aparecerá la pantalla inicial.
 
:Al pulsar sobre el botón, la página1 es sustituída por la página2 y si volvemos atrás pulsando el botón Back, aparecerá la pantalla inicial.
 +
 +
<br />
 +
===Navegación declarativa===
 +
 +
* Más información en https://medium.com/flutter/learning-flutters-new-navigation-and-routing-system-7c9068155ade
 +
 +
 +
* A partir de Flutter 2.0 se ha añadido esta nueva forma de navegación entre Widgets.
 +
: Este modo de navegación es mejor soportado por la plataforma de tipo Web.
 +
  
 
<br />
 
<br />

Revisión del 18:47 10 nov 2021

Intruducción

  • Más información en:


  • El objetivo de esta sección es aprender una forma de 'navegar' entre las diferentes pantallas que haya en una aplicación móbil, bien a través de opciones de menú, bien a través de un Widget al que controlemos un evento que provoque la carga de una nueva pantalla.
La forma en como 'navega' entre pantallas es empleando el concepto de pila. Cada nueva pantalla que se visualiza se pone 'encima' de la anterior mediante una operación de PUSH empleando un objeto Navigator.
Cuando cerramos una pantalla, se realiza la operación contraria y se hace una operación POP sobre la pila, quitando la pantalla actual y visualizando la pantalla anterior.
Veremos que se pueden hacer otro tipo de operaciones, como REPLACE, que reemplzaría la pantalla actual con otra nueva manteniendo la pila como estuviera en ese momento.
  • Por eso es muy importante no abrir nuevas pantallas cuando queramos regresar a una pantalla anterior ya que estaríamos añadiendo nuevas pantallas a la pila, manteniendo las anteriores.



  • Para ello voy a crear un nuevo StatelessWidget MiMaterialAppNavegar el cual va a visualizar una lista de opciones que cargarán diferentes pantallas.
También modificaré el AppBar para que aparezcan opciones de menú y que también se navege entre páginas al pulsar una de ellas así como el uso de Button Navigation.
Para ello haré uso del snippet fscaffoldabbn el cual genera todo el código necesario.
También voy a crear dos páginas a las cuales vamos a navegar desde las diferentes opciones.


Flutter dart navegacion 1.JPG


  • La estructura de páginas será la siguiente:
  • /lib/main.dart => Página que ejecuta el main y carga MiMaterialAppConNavegacion
  • /lib/src/pages/app_con_navegación.dart => Clase MiMaterialAppConNavegacion, que visualiza un ManterialApp y carga PrincipalNavegacionPage
  • /lib/src/pages/stateful/navegando/principal_navegación_page.dart => Clase PrincipalNavegacionPage que visualiza una lista para navegar, un Appbar con dos opciones de menú para navegar y dos Navigation Button en la parte inferior para navegar.
  • /lib/src/pages/stateful/navegando/pagina1_page.dart => Clase Pagina1NavegacionPage. Página con un contenido
  • /lib/src/pages/stateful/navegando/pagina2_page.dart => Clase Pagina2NavegacionPage. Página con un contenido.


Archivo main.dart: 

import 'package:flutter/material.dart';
import 'package:holamundo/src/app.dart';
import 'src/app_con_navegacion.dart';

void main() => runApp(MiMaterialAppConNavegacion());


Archivo app_con_navegacion.dart: 

import 'package:flutter/material.dart';
import 'package:holamundo/src/pages/stateful/navegando/principal_navegacion_page.dart';

class MiMaterialAppConNavegacion extends StatelessWidget {
  const MiMaterialAppConNavegacion({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: PrincipalNavegacionPage(),
      debugShowCheckedModeBanner: false,
    );
  }
}


Archivo PrincipalNavegacionPage.dart: 

import 'package:flutter/material.dart';
import 'package:holamundo/src/pages/stateful/navegando/pagina1_page.dart';
import 'package:holamundo/src/pages/stateful/navegando/pagina2_page.dart';

class PrincipalNavegacionPage extends StatefulWidget {
  const PrincipalNavegacionPage({Key? key}) : super(key: key);

  @override
  _PrincipalNavegacionPageState createState() => _PrincipalNavegacionPageState();
}

class _PrincipalNavegacionPageState extends State<PrincipalNavegacionPage> {
  int _index = 0; // TODO: make sure this is outside build(), otherwise every setState will change the value back to 0

  @override
  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(
        title: Text('App con navegación'),
        actions: [
          IconButton(icon: Icon(Icons.av_timer),onPressed: (){},),
          IconButton(icon: Icon(Icons.add),onPressed: (){},),

        ],
      ),

      body: _pantallasCargar(),
      bottomNavigationBar: BottomNavigationBar(
        onTap: (tappedItemIndex) =>
            setState(() {
              _index = tappedItemIndex;
            }),
        currentIndex: _index,
        items: [
          BottomNavigationBarItem(
              icon: Icon(Icons.av_timer), label: 'navBarItem1Text'),
          BottomNavigationBarItem(
              icon: Icon(Icons.add), label: 'navBarItem2Text')
        ],
      ),
    );
  }

  Widget _pantallasCargar(){

    return ListView(
      children: [
        ListTile(title: Text('Pantalla 1'), trailing: Icon(Icons.av_timer),
                onTap: (){},),
        ListTile(title: Text('Pantalla 2'), trailing: Icon(Icons.add),
          onTap: (){},),
      ],

    );

  }
}


Archivo pagina1_page.dart: 

import 'package:flutter/material.dart';

class Pagina1NavegacionPage extends StatelessWidget {
  const Pagina1NavegacionPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Página 1'),
        ),
        body: null
    );
  }
}


Archivo pagina2_page.dart: 

import 'package:flutter/material.dart';

class Pagina2NavegacionPage extends StatelessWidget {
  const Pagina2NavegacionPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Página 2'),
        ),
        body: null
    );
  }
}




Navegando entre páginas

  • Más información en:





Archivo principal_navegacion_page.dart: 

import 'package:flutter/material.dart';
import 'package:holamundo/src/pages/stateful/navegando/pagina1_page.dart';
import 'package:holamundo/src/pages/stateful/navegando/pagina2_page.dart';


class PrincipalNavegacionPage extends StatefulWidget {
  const PrincipalNavegacionPage({Key? key}) : super(key: key);

  @override
  _PrincipalNavegacionPageState createState() => _PrincipalNavegacionPageState();
}

class _PrincipalNavegacionPageState extends State<PrincipalNavegacionPage> {
  int _index = 0; // TODO: make sure this is outside build(), otherwise every setState will change the value back to 0

  @override
  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(
        title: Text('App con navegación'),
        actions: [
          IconButton(icon: Icon(Icons.av_timer),onPressed: (){},),
          IconButton(icon: Icon(Icons.add),onPressed: (){},),

        ],
      ),

      body: _pantallasCargar(),
      bottomNavigationBar: BottomNavigationBar(
        onTap: (tappedItemIndex) =>
            setState(() {
              _index = tappedItemIndex;
            }),
        currentIndex: _index,
        items: [
          BottomNavigationBarItem(
              icon: Icon(Icons.av_timer), label: 'navBarItem1Text'),
          BottomNavigationBarItem(
              icon: Icon(Icons.add), label: 'navBarItem2Text')
        ],
      ),
    );
  }

  Widget _pantallasCargar(){

    return ListView(
      children: [
        ListTile(title: Text('Pantalla 1'), trailing: Icon(Icons.av_timer),
                onTap: (){
                  final ruta = MaterialPageRoute(
                      builder: (context) => Pagina1NavegacionPage(),);

                  Navigator.of(context).push(ruta);
                },),
        ListTile(title: Text('Pantalla 2'), trailing: Icon(Icons.add),
          onTap: (){},),
      ],

    );

  }
}


Archivo pagina1_page.dart: 

import 'package:flutter/material.dart';

class Pagina1NavegacionPage extends StatelessWidget {
  const Pagina1NavegacionPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          Navigator.of(context).pop();
        },
        child: Icon(Icons.arrow_back),
      ),
        appBar: AppBar(
          title: Text('Página 1'),
        ),
        body: null
    );
  }
}



Navegación usando rutas


Navegación imperativa

En este tipo de navegación, los Widgets que conforman las pantallas, se comportan como hojas que se apiladas unas encima de otras.
Debemos entender que la hoja (pantalla = widget) que está encima de todo es la pantalla que se está visualizando en este momento.
Podemos hacer operaciones de 'push' para apilar una nueva hoja=pantalla, operaciones de 'pop' para quitar una hoja de encima de la pila u operaciones de replace, para cambiar una hoja por otra.






Archivo routes.dart: 

import 'package:flutter/material.dart';

import 'package:holamundo/src/pages/stateful/navegando/pagina1_page.dart';
import 'package:holamundo/src/pages/stateful/navegando/pagina2_page.dart';
import 'package:holamundo/src/pages/stateful/navegando/principal_navegacion_page.dart';

Map<String,WidgetBuilder>obtenerRutas(){

  return <String,WidgetBuilder>{
    'home' : (BuildContext context) => PrincipalNavegacionPage(),
    'pagina1' : (BuildContext context) => Pagina1NavegacionPage(),
    'pagina2' : (BuildContext context) => Pagina2NavegacionPage(),
  };

}


Archivo app_con_navegacion.dart: 

import 'package:flutter/material.dart';

import 'package:holamundo/src/pages/stateful/navegando/default_page.dart';
import 'package:holamundo/src/pages/stateful/navegando/principal_navegacion_page.dart';
import 'package:holamundo/src/routes/routes.dart';

class MiMaterialAppConNavegacion extends StatelessWidget {
  const MiMaterialAppConNavegacion({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: null,
      debugShowCheckedModeBanner: false,
      initialRoute: 'home',
      routes: obtenerRutas(),
      onGenerateRoute: (RouteSettings routesettings){
        print(routesettings.name);

        return MaterialPageRoute(
            builder: (BuildContext context) => DefaultNavegacionPage());
      },
    );
  }
}


Archivo principal_navegacion_page.dart: 

import 'package:flutter/material.dart';
import 'package:holamundo/src/pages/stateful/navegando/pagina1_page.dart';
import 'package:holamundo/src/pages/stateful/navegando/pagina2_page.dart';


class PrincipalNavegacionPage extends StatefulWidget {
  const PrincipalNavegacionPage({Key? key}) : super(key: key);

  @override
  _PrincipalNavegacionPageState createState() => _PrincipalNavegacionPageState();
}

class _PrincipalNavegacionPageState extends State<PrincipalNavegacionPage> {
  int _index = 0; // TODO: make sure this is outside build(), otherwise every setState will change the value back to 0

  @override
  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(
        title: Text('App con navegación'),
        actions: [
          IconButton(icon: Icon(Icons.av_timer),onPressed: (){},),
          IconButton(icon: Icon(Icons.add),onPressed: (){},),

        ],
      ),

      body: _pantallasCargar(),
      bottomNavigationBar: BottomNavigationBar(
        onTap: (tappedItemIndex) =>
            setState(() {
              _index = tappedItemIndex;
            }),
        currentIndex: _index,
        items: [
          BottomNavigationBarItem(
              icon: Icon(Icons.av_timer), label: 'navBarItem1Text'),
          BottomNavigationBarItem(
              icon: Icon(Icons.add), label: 'navBarItem2Text')
        ],
      ),
    );
  }

  Widget _pantallasCargar(){

    return ListView(
      children: [
        ListTile(title: Text('Pantalla 1'), trailing: Icon(Icons.av_timer),
                onTap: () =>  Navigator.of(context).pushNamed('pagina1')
                ,),
        ListTile(title: Text('Pantalla 2'), trailing: Icon(Icons.add),
                onTap: () =>  Navigator.of(context).pushNamed('pagina2')
          ,),
        ListTile(title: Text('Pantalla por defecto'), trailing: Icon(Icons.backpack),
          onTap: () =>  Navigator.of(context).pushNamed('noexiste')
          ,),
      ],

    );

  }
}


Archivo default_page.dart: 

import 'package:flutter/material.dart';

class DefaultNavegacionPage extends StatelessWidget {
  const DefaultNavegacionPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Página por defecto'),
        ),
        body: null
    );
  }
}


  • Nota: Indicar que Navigator tiene más métodos que push y pop para manejar el cambio de pantallas. Por ejemplo, podemos hacer uso del método pushReplacementNamed (o su equivalente sin emplear los nombres de rutas) para sustituír la pantalla actual por otra.
Aplicado a nuestro ejemplo:

Archivo pagina1_page.dart: 

import 'package:flutter/material.dart';

class Pagina1NavegacionPage extends StatelessWidget {
  const Pagina1NavegacionPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          Navigator.of(context).pop();
        },
        child: Icon(Icons.arrow_back),
      ),
        appBar: AppBar(
          title: Text('Página 1'),
        ),
        body: Center(
          child: TextButton(
            child: Text('PULSAME PARA REEMPLAZAR ESTA PAGINA POR LA PAGINA 2',
                        style: TextStyle(backgroundColor: Colors.green,fontSize: 20,color: Colors.white),),
            onPressed: (){
              Navigator.of(context).pushReplacementNamed('pagina2');
            },
          ),
        )
    );
  }
}


Al pulsar sobre el botón, la página1 es sustituída por la página2 y si volvemos atrás pulsando el botón Back, aparecerá la pantalla inicial.


Navegación declarativa


  • A partir de Flutter 2.0 se ha añadido esta nueva forma de navegación entre Widgets.
Este modo de navegación es mejor soportado por la plataforma de tipo Web.



Paso de datos entre páginas

https://flutter.dev/docs/cookbook#navigation


Archivo main.dart:







Enlace a la página principal de la UD5

Enlace a la página principal del curso




-- Ángel D. Fernández González -- (2021).

Obtenido de «https://wiki.cifprodolfoucha.es/index.php?title=Flutter_Navegación&oldid=17053»