Héctor Álvarez
Taller tecnologías móviles
Hola mundo Flutter
Esquema de la clase
- Introducción
- Separando el proyecto
- Widgets: Scaffold, Column y FloatingActionButton
- StatelessWidget y StatefulWidget
- Agregando funcionalidad a nuestro “hola mundo”
Introducción
En esta clase realizaremos nuestra primera aplicación con Flutter (El contador de Flutter), crearemos un proyecto desde cero mostrando cada parte que compone este ejemplo.
Para crear un proyecto nuevo debemos instalar el paquete 'Flutter', ya sea en Visual Studio Code como en Android Studio. Este paquete incluirá también el de Dart.
En Visual Studio Code podemos crear un proyecto nuevo desde el 'Command Palette' escribiendo "Flutter: new proyect" y siguiendo los pasos.
En Android Studio podremos crear un proyecto de Flutter desde la pantalla de Bienvenida.
Introducción a Flutter
Nuestro hola mundo
Borraremos todo el código de ejemplo y crearemos un main por nuestra cuenta
Nuestro hola mundo
Nuestro hola mundo
Flutter requiere de un punto de partida y estos son runApp() y MaterialApp().
Scaffold
El widget Scaffold nos permite crear la estructura básica de una pantalla o vista.
Scaffold nos permite agregar la barra superior, el cuerpo, botones flotantes, entre otros.
Crearemos un nuevo archivo llamado home_page.dart dentro de la carpeta src (los archivos en dart siguen la nomenclatura snake_case).
Scaffold
Scaffold
Scaffold
Cambiar home en main.dart
Scaffold
Scaffold
Actividad:
Cambiar el fondo, la elevación y la sombra del AppBar para que queden como la imágen.
TIPS:
El color de fondo es 'Colors.blueAccent', el color de la sombra es 'Colors.black' y la elevación es de 3.0.
Scaffold
Column
Column
Es un widget que nos permite tener múltiples hijos, apilados uno sobre otro (vertical).
Nos permite crear una lista de múltiples Widgets diferentes.
En el child de de nuestro Center en HomePage, cambiaremos el Text por un Column, permitiéndonos agregar más elementos.
Column
Column
FloatingActionButton
FloatingActionButton
Nos permite crear un botón flotante, por defecto en la posición inferior derecha.
Debe tener implementada una función onPressed de manera obligatoria.
Podemos cambiar la posición mediante el atributo floatingActionButtonLocation.
FloatingActionButton
FloatingActionButton
FloatingActionButton
Agreguemos funcionalidad al contador, en la función, en vez de imprimir “hola mundo”, aumentaremos un contador en uno.
Para ello crearemos una variable privada llamada _contador de tipo int en la clase HomePage.
Luego reemplazaremos el hola mundo con el incremento del contador.
¿Qué pasa?, imprimamos el valor!
FloatingActionButton
El problema de StatelessWidget
StatelessWidget es un Widget que no es consciente de sus cambios y no se puede re-dibujar.
Para poder cambiar el valor y actualizar los cambios en pantalla debemos adaptar nuestra clase a StatefulWidget.
El problema de StatelessWidget
Row
Row
Row es un widget similar a Column, pero en este caso nos permite agregar elementos de forma horizontal.
Utilizaremos Row para agregar un botón (FloatingActionButton) que decremente el contador de nuestra aplicación.
Actividad:
Intente agregar otro floating action button que decremente el contador utilizando Row.
Row
Row
