Flutter Navegación

Intruducción

• Más información en:

• https://esflutter.dev/docs/cookbook/navigation
• https://api.flutter.dev/flutter/widgets/Navigator-class.html

• https://api.flutter.dev/flutter/material/AppBar-class.html
• https://api.flutter.dev/flutter/material/BottomNavigationBar-class.html
• https://api.flutter.dev/flutter/material/PopupMenuButton-class.html

• 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.

• 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.

• 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
    );
  }
}

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).