Flutter II: Material Design — [Flutter 1.0]
En este segundo post de la serie sobre Flutter que estamos haciendo vamos a ver las facilidades que nos ofrece Flutter para crear apps basadas en Material Design. Para esto Flutter nos proporciona el widget MaterialApp que encapsula diversos widgets utilizados en Material Design.
Actualizado a Flutter 1.0 — Diciembre 2018
Índice
Antes de explicar el widget MaterialApp y ver algunos ejemplos tenemos que entender la diferencia entre los dos tipos de widget que podemos crear en Flutter. Nuestros widgets normalmente extenderán de uno de estos widgets que nos proporciona Flutter: StatefulWidget o StatelessWidget.
La diferencia entre ambos es la persistencia de sus estados en el futuro. Cuando queremos hacer un widget que no cambie de estado internamente debemos usar StatelessWidget. Cuando decimos que no cambie su estado queremos decir que el widget sea “inmutable”. En caso contrario, si el widget es “mutable” debemos usar el StatefulWidget, al StatefulWidget debemos asociarle un State que es quien guarda el estado del widget. El motivo de esto es el diferente ciclo de vida de ambos objetos, un widget es algo temporal en cambio un State se mantiene entre llamadas al método build. El método build es donde creamos la interfaz de usuario para el widget ya sea un StatelessWidget o un StatefulWidget.
¿A qué llamamos un widget “mutable” o “inmutable”?
Un ejemplo de un widget inmutable puede ser el widget Text, en el constructor le pasamos el texto a mostrar y el Text lo guarda internamente como un atributo final. Este atributo no puede cambiar al ser el widget algo temporal y no guardar su estado.
En el caso contrario, un widget mutable podría ser una lista de items. Una lista de items contendrá los items internamente, si estos items los pedimos a un servicio este conjunto de items ira creciendo en cada llamada al servicio por lo que nos convierte al widget en algo mutable en el tiempo y debemos guardar el estado del mismo.
De ahora en adelante iremos creando paso a paso una app en Flutter de ejemplo, puedes acceder al código en este repo. El repo está compuesto por varias carpetas que son proyectos con cada paso que vayamos viendo, este post corresponde al step 1.
MaterialApp
MaterialApp es un widget que nos proporciona un layout orientado a Material Design. Para utilizarlo, en la llamada al método runApp creamos una nueva instancia y se lo pasamos de la siguiente forma.
El widget MaterialApp tiene como atributos entre otros:
- title El título de la app
- theme El tema que vamos a usar, este atributo a su vez contiene otros atributos que podemos configurar. Como pueden ser el: primarySwatch, brightness, primaryColor, accentColor… Nosotros vamos a especificar en este ejemplo solo el primarySwatch con la ayuda de la clase Colors, la clase Colors implementa internamente las especificaciones de color de material Design. Al especificar Colors.blue, que es un mapa con los colores para el azul, al primarySwatch estamos definiendo la paleta de colores “blue” a la app. En sucesivos post veremos lo fácil que es cambiar el tema de una app en Flutter.
- home En el atributo home tenemos que pasar la primera ‘pantalla’ que queremos mostrar. En Flutter las pantallas se distribuyen por rutas, en este caso la ruta home representa a la ruta ‘/’. Otra forma de hacerlo es indicar la ruta ‘/’ y otras rutas mediante el atributo routes el cual utilizaremos cuando expliquemos como crear un Drawer.
El siguiente paso es crea un home, para esto haremos dos ejemplos uno con un StatelessWidget y otro con un StatefulWidget.
StatelessWidget
Para construir un nuevo widget del tipo StatelessWidget y pasárselo al atributo home del Material app lo hacemos de la siguiente forma.
Nota: Si sabes Java casi puedes entender el código por su similitud a Java, posiblemente lo único que no entiendas sea el this._appBarTitle en el constructor. Primero la barra baja hace que en dart un atributo se haga privado sin necesidad de poner un private y segundo al poner el this en la declaración del constructor hacemos que se auto asigne el valor al atributo, el equivalente en java seria this._appBarTitle = appBarTitle en el cuerpo del constructor.
Por un lado podemos ver que extendemos de StatelessWidget porqué la clase es inmutable dado que el atributo _appBarTitle es final y por otro tenemos un método build que devuelve un widget.
En el método build devolvemos un Scaffold que es el widget que implementa la estructura básica de un layout material design. Este layout entre otras cosas tiene un atributo appBar para obviamente pasar un AppBar y a su vez el AppBar un atributo title donde pondremos el título. Por último tenemos el body que es el resto de la pantalla excluyendo al AppBar.
Si modificamos el atributo home del MaterialApp creado antes y lanzamos la app este será el resultado.
home: StatelessWidgetExample(“Hello, World”)
StatefulWidget
Ahora hagamos lo mismo con un StatefulWidget, en este caso primero creamos el StatefulWidget y luego el State asociado al mismo para guardar su estado.
En la clase StatefulWidgetExample simplemente guardamos el atributo _appBarTitle, llamamos al constructor del padre con el valor opcional key, cuando ponemos {} estamos diciendo que el parámetro es opcional, y en el método createState devolvemos nuestro estado asociado que tendrá el método build que construye la vista.
En la clase _StatefulWidgetExampleState en el método build hacemos algo parecido a lo que hacíamos en el ejemplo anterior pero ahora añadimos un floatingActionButton que cuando se presione llame al método privado _incrementCounter. En el _incrementCounter debemos llamar al método setSate quien se encarga de invalidar el widget para que se vuelva a reconstruir y dentro del setSate en la función lambda que le pasamos por parámetro incrementamos el contador.
Al actualizar el estado se vuelve a llamar al método build y se construye un nuevo texto con la cuenta de veces que hemos presionado el botón.
El atributo floatingActionButton es parte del layout que nos ofrece el Scaffold y que por defecto nos posiciona el FAB en la esquina inferior izquierda con las medidas y distancias que se especifican en Material Design. Al FAB también le añadimos un tooltip para que muestre una ayuda cuando lo dejemos apretado y un icono. En la clase Icons tenemos referencia a los iconos de material design.
Ahora actualizamos el main pasando esta vez el nuevo widget como home.
home: StatefulWidgetExample(“Hello, World”)Y este es el resultado
Conclusión
Con respecto al primer post que hicimos sobre Flutter hemos avanzado en la creación de vistas más complejas y aplicando Material Design a nuestra app con los widgets MaterialApp y Scaffold. Además de ver las diferencias entre los dos tipos de widgets principales StatelessWidget y StatefulWidget.
Puedes encontrar el código completo en el siguiente repo en la carpeta step1. En él encontraras dos archivos punto dart ambos con un main con un ejemplo de un StatelessWidget y un StatefulWidget.
En el siguiente post de la serie seguiremos profundizando en la construcción de widgets aún mas complejos, en concreto listas y sus items.
