Flutter II: Widgets
En el anterior post (Flutter I: Introducción al desarrollo) dejamos listo el sistema para poder desarrollar con Flutter sobre el IDE IntelliJ. En este post trataremos a fondo qué son los Widget, unidad básica para construir interfaces de usuario.
Los Widgets son la piedra angular de Flutter, definen las vistas que conforman la pantalla que se muestra al usuario, es decir construyen la UI de la app.
Stateless Widget
Es el widget más básico que puedes crear, estos no guardan un estado, es decir, una vez fueron creados no cambiarán su definición. Se dice que son un tipo de widget inmutable.
Para crear un Stateless Widget únicamente debes hacer extender la clase de StatelessWidget y sobrescribir el método build, debe retornar un widget, para el siguiente ejemplo se devuelve un texto plano:
El objeto Text a su vez es otro stateless widget, en cuyo constructor le pasamos el texto que quedará como atributo interno e inmodificable.
RESULTADO:
El texto que contiene nuestro nuevo widget se pintaba en las coordenadas (0,0) en pantalla, y quedaba tapado por la status bar del dispositivo. He optado por añadir otro widget más (Center) para centrar en pantalla el texto.
Stateful Widget
En la otra cara de la moneda tenemos los stateful widgets, los cuales se diferencian por poder cambiar su definición una vez creados. Se dice que son widgets mutables (En ingles suena mejor).
Al extender la clase de StatefulWidget es necesario sobreescribir el método createState, que recibe el State el cual gestionará el widget. Para hacer un código más limpio el State que recibe el widget lo podemos poner en una clase aparte, y ésta sobreescribe el método build (funciona igual que en el stateless widget).
Además (aunque no es necesario) es posible sobreescribir el método initState, método que es llamado al iniciarse el State del widget, lo podemos aprovechar para inicializar las dependencias que tengamos.
Una imagen vale más que mil palabras, así que adjunto una imagen con el ciclo de vida de un State:
Material Design Widgets
Una de las cosas destacadas de Flutter es que trae ya implementados una colección de widgets con los que poder crear vistas basadas en las guías de estilo Material Design que, sinceramente, son realmente útiles. Podemos hacer una app realmente atractiva sólo llamando a esta colección de widgets.
Para poder llamar a los widgets material design es necesario importálos:
import 'package:flutter/material.dart';Aunque podemos ver toda la lista de widgets aquí, voy a tratar algunos de los más básicos:
Scaffold:
‘Implements the basic material design visual layout structure.’
Es el más básico para dibujar interfaces, sería como nuestro lienzo en blanco. Podemos empezar a dibujar en él pasándole un widget a su parámetro body.
Además cuenta con varios parámetros más a los que les podemos pasar una appBar (Toolbar), backgroundColor, una navigation drawer, o incluso un floatingActionButton.
AppBar:
‘A material design app bar.’
No tiene mucha ciencia, es una toolbar que se ajusta al ancho de la pantalla por defecto y podemos, al igual que con el widget anterior, jugar con varios de sus parámetros para conseguir un diseño a nuestro gusto.
FloatingActionButton:
‘A material design floating action button.’
Es un botón circular que contiene un icono y realiza una acción considerada la principal en esa pantalla, suele usarse para el botón de ‘crear’, ‘compartir’, ‘buscar’.
Vamos a combinar los 3 widgets anteriores sobre un stateful widget creado por nosotros para crear nuestra primera app estilo Material Design:
He creado un stateful widget para que cada vez que se pulse el FloatingActionButton el estado de este cambie y pueda actualizarse el texto.
En la funcion build devuelvo un Scaffold al que le he pasado al parametro body, un texto centrado en pantalla. Al parametro appBar le pasamos el widget AppBar con el titulo de la app. Y finalmente al parametro floatingActionButton le pasamos un widget FloatingActionButton (Si, es cierto que no tiene perdida).
En el interior del FloatingActionButton he llamado al objeto Icon y pasado uno de los iconos de la colección de iconos que Flutter ya trae consigo. Y en la función onPressed creamos una función anonima que llama al setEstate el cual notifica de un cambio de estado y se vuelve a llamar a la función build.
RESULTADO:
Ahora ya sabemos acerca de cómo funcionan los widgets en Flutter en el próximo post veremos acerca de la navegación entre pantallas. Cualquier duda o error en el post animo a comentar.
