Mi primera aplicación

Creación de un nuevo proyecto de Flutter

Para hacer esto, por supuesto, debe ejecutar Android Studio y luego iniciar un nuevo proyecto de Flutter.

En función del uso reciente o no de su IDE, hay dos posibilidades. Para empezar, si este es el primer lanzamiento o si se han cerrado todos los proyectos, entonces debería aparecer un cuadro de diálogo como el que se muestra en la figura 1. En este caso, todo lo que tiene que hacer es elegir la opción Create New Flutter Project y luego continuar con la sección Elección del tipo de proyecto. Tenga cuidado de no confundirse con la primera línea, que propone crear un nuevo proyecto clásico de Android.

Figura 1 - Ventana de inicio de Android Studio

En el segundo caso, si un proyecto ya está abierto, debe cerrarlo pasando por File y Close project o abrir directamente un nuevo proyecto, haciendo clic en File, New y finalmente New Flutter Project. A continuación, se ofrecerá la opción de abrir este nuevo proyecto en una nueva ventana o en la ventana actual.

Si se cierra un proyecto, Android Studio estará en la configuración de la figura 1. De lo contrario, el usuario tendrá que elegir el tipo de proyecto de Flutter deseado (figura 2).

El contenido de la aplicación

Después de hacer clic en Finish en el paso anterior, se ha creado un nuevo proyecto básico de Flutter. Se trata de una especie de código de demostración para disfrutar de algunas características de Flutter.

Esta es la oportunidad de detenerse en el contenido de una aplicación. El objetivo no es ser exhaustivo, sino dibujar una imagen general que permita comprender la estructura de un proyecto.

¿Cuáles son los archivos que entran en juego? ¿Cómo se compone un proyecto de Flutter? ¿Cuál es el código base de una aplicación? ¿Cómo se ve el lenguaje Dart?

He aquí algunas preguntas que encontrarán su respuesta en esta parte.

Los emuladores

Primeros widgets

El ejercicio consistirá en modificar el código propuesto por defecto para lograr una aplicación ligeramente diferente. El objetivo es programar una bomba.

Para hacer esto, debe acordar varios puntos de referencia. Primero, será necesario revertir el funcionamiento del contador para comenzar en 10 y permitir llegar hasta 0. Esto también supone que se debe modificar el icono «+» del botón flotante.

Regresado a 0, el texto «You have pushed the button this many times» debería sustituirse por un bonito «BOOM». También será necesario cambiar el estilo de la fuente para que en este momento el texto aparezca en rojo y sea más grande.

En el momento de la explosión, es normal que el fondo de la pantalla cambie de color y se vuelva naranja.

Finalmente, el contador se bloqueará en 0 y no será posible alcanzar valores negativos.

Para poner en marcha una bomba, primero necesita una cuenta atrás. La idea aquí es reutilizar la variable _counter y el botón flotante para dar este efecto.

En la classe _MyHomePageState, el valor de _counter debe ser 10.

int _counter = 10; 

Después, para decrementar será necesario modificar el código contenido en setState():

_counter--; 

Para que el enfoque sea lógico, es necesario retocar el look del botón flotante. El icono debe cambiarse, así como el Tooltip.

floatingActionButton: FloatingActionButton( 
 onPressed: _decrementCounter, 
 tooltip: 'Cuenta atrás', 
 child: Icon(Icons.history), 
), 

Finalmente, para ser del todo coherente, el nombre del método llamado _incrementCounter se debe cambiar a _decrementCounter. El valor del tooltip se cambia a Cuenta atrás, mientras que el icono se convierte en Icons.history o, de manera más explícita, en el símbolo de un reloj que se recorre al revés.

Con la modificación de _incrementCounter, se provoca un error. De hecho, indicamos que se debe llamar al método _decrementCounter tan pronto como se presione el botón flotante (onPressed), pero no hay en ninguna parte del código un método con este nombre. Es necesario modificar el nombre del método incrementCounter situado en la parte superior. Por tanto, se convierte en:

void _decrementCounter () {...