Objetivo

Reforzar el uso de objetos para comprender el paradigma de la programación orientada a objetos en el cómputo móvil.

Descripción

En este tema conocerás un breve tratado de la programación orientada a objetos con un enfoque en el paradigma de cómputo móvil. Te servirá como una revisión de los fundamentos ajustados al entorno de desarrollo de Flutter. También abordarás el concepto de estado y cuál es su función dentro del desarrollo de aplicaciones móviles.

Haz clic para revisar la explicación.

Programación orientada a objetos en cómputo móvil

Revisa el siguiente video:

• ChiaTK. (2020, 13 de julio). Curso Introducción a Flutter - [09] - Árbol de Widgets [Archivo de video]. Recuperado de https://www.youtube.com/watch?v=ZZgfi_2We5g&ab_channel=ChiaTK

Revisa las siguientes lecturas:

• Bejarano, A. (2018). Trabajando con Layouts en Flutter. Recuperado de https://medium.com/comunidad-flutter/trabajando-con-layouts-en-flutter-30a78e2a3496
• Vega, C. (2019). Haciendo de Dart un mejor lenguaje para UI. Recuperado de https://medium.com/comunidad-flutter/haciendo-de-dart-un-mejor-lenguaje-para-ui-5f67065f4003

Objetivo

Navegar entre escenas mediante los botones situados en la parte inferior de la pantalla.

Instrucciones

1. Crea un proyecto con un archivo llamado home.dart. Dentro de este, añade un SafeArea con Padding como child de body y se añade como child de padding una variable Widget _currentPage que crearás más adelante, como se muestra a continuación:

body: SafeArea( 
 child: Padding( 
 padding: const EdgeInsets.all(16.0), 
 child: _ currentPage, 
 ), 
), 

2. Añade el widget de “BottomNavigationBar” al scaffold con la propiedad de “currentIndex” como “_currentIndex” que se creará más adelante, como se muestra a continuación:

bottomNavigationBar: BottomNavigationBar( 
 currentIndex: _currentIndex, 
), 

3. Añade la propiedad Items al “BottomNavigatorBar” con el método “BottomNavigationBarItem”. Cada ítem recibe un ícono y nombre, como se muestra a continuación:

bottomNavigationBar: BottomNavigationBar(
 currentIndex: _currentIndex,
 items: [
 BottomNavigationBarItem(
 icon: Icon(Icons.cake),
 title: Text('Birthdays'),
 ),
 BottomNavigationBarItem(
 icon: Icon(Icons.sentiment_satisfied),
 title: Text('Gratitude'),
 ),
 BottomNavigationBarItem(
icon: Icon(Icons.access_alarm),
 title: Text('Reminders'),
 ),
 ],
onTap: (selectedIndex) => _changePage(selectedIndex),
),

4. Estos tres ítems representan los botones que se usarán para navegar entre las rutas.
   
   Al finalizar lo anterior, es necesario añadir un método después del widget Scaffold, el cual se llama “_changePage”. Este método utiliza “SetState” para cambiar las variables “_currentIndex” y “_currentPage”.
   
   A continuación, se muestra el método descrito:

void _changePage(int selectedIndex) {
setState(() {
_currentIndex = selectedIndex;
_currentPage = _listPages[selectedIndex];
});
}

Es importante que sepas que el widget _currentPage muestra cada ruta sin necesidad de usar el Navigator widget.

En la primera línea, después de _HomeState, se definen las siguientes variables:

int _currentIndex = 0; 
List _listPages = List(); 
Widget _currentPage; 

5. Dentro de initState() se añade cada ruta a la lista de ruta y se inicializa la variable _currentePage con la primera ruta. Aquí se muestra lo descrito:

@override
void initState() {
super.initState();
_listPages
..add(Birthdays())
..add(Gratitude())
..add(Reminders());
_currentPage = Birthdays();
}

6. Ahora se crean las tres rutas que se usarán y se muestran aquí las clases, como ejemplo, que se pueden usar:

// birthdays.dart 
import 'package:flutter/material.dart'; 
class Birthdays extends StatelessWidget { 
 @override 
 Widget build(BuildContext context) { 
 return Scaffold( 
 body: Center( 
  child: Icon( 
  Icons.cake, 
 size: 120.0, 
 color: Colors.orange, 
  ), 
 ), 
 ); 
 } 
} 
// gratitude.dart 
import 'package:flutter/material.dart'; 
class Gratitude extends StatelessWidget { 
 @override 
 Widget build(BuildContext context) { 
 return Scaffold( 
 body: Center( 
 child: Icon( 
Icons.sentiment_satisfied, 
size: 120.0, 
color: Colors.lightGreen, 
 ), 
 ), 
 ); 
 } 
} 
// reminders.dart 
import 'package:flutter/material.dart'; 
class Reminders extends StatelessWidget { 
 @override 
 Widget build(BuildContext context) { 
 return Scaffold( 
 body: Center( 
 child: Icon( 
 cons.access_alarm, 
 size: 120.0, 
 color: Colors.purple, 
 ), 
 ), 
 ); 
 } 

7. Presenta el código completo para un mejor entendimiento de cómo usar BottomNavigatorBar:

import 'package:flutter/material.dart'; 
import 'gratitude.dart'; 
import 'reminders.dart'; 
import 'birthdays.dart'; 
class Home extends StatefulWidget { 
 @override 
 _HomeState createState() => _HomeState(); 
} 
class _HomeState extends State<Home> { 
  int _currentIndex = 0; 
  List _listPages = List(); 
  Widget _currentPage; 
 @override 
 void initState() { 
 super.initState(); 
  _listPages 
 ..add(Birthdays()) 
 ..add(Gratitude()) 
 ..add(Reminders()); 
 _currentPage = Birthdays(); 
 } 
 void _changePage(int selectedIndex) { 
 setState(() { 
 _currentIndex = selectedIndex; 
 _currentPage = _listPages[selectedIndex]; 
 }); 
 } 
 @override 
 Widget build(BuildContext context) { 
 return Scaffold( 
 appBar: AppBar( 
 title: Text('BottomNavigationBar'), 
 ), 
 body: SafeArea( 
 child: Padding( 
  padding: EdgeInsets.all(16.0), 
child: _currentPage, 
 ), 
 ), 
bottomNavigationBar: BottomNavigationBar( 
 currentIndex: _currentIndex, 
  items: [ 
 BottomNavigationBarItem( 
 icon: Icon(Icons.cake), 
 title: Text('Birthdays'), 
 ), 
 BottomNavigationBarItem( 
  icon: Icon(Icons.sentiment_satisfied), 
 title: Text('Gratitude'), 
 ), 
 BottomNavigationBarItem( 
icon: Icon(Icons.access_alarm), 
 title: Text('Reminders'), 
 ), 
 ], 
 onTap: (selectedIndex) => _changePage(selectedIndex), 
 ), 
 ); 
 } 
} 

8. Haz pruebas de funcionamiento en tu emulador de Android.
9. Realiza un reporte en el que documentes los pasos que realizaste para hacer el laboratorio y agrega tus conclusiones sobre el aprendizaje obtenido, así como el funcionamiento de las escenas. No olvides agregar las capturas de pantalla de tu laboratorio de navegación entre escenas.

Checklist

• Programar funciones y utilizar métodos para hacer eficiente el desarrollo de aplicaciones móviles.
• Emplear el uso de la herencia para generar árboles de widgets correctamente y heredar atributos de widgets padres a widgets hijos.
• Diseñar escenas e integrar adecuadamente las rutas para agregar navegación de escenas en la aplicación móvil.