Flutter: aplicación de arquitectura

La aplicación de arquitectura Flutter consiste principalmente en:

• Widgets
• Gestos
• Concepto de Estado
• Capas

Widgets

Los widgets son el componente principal de cualquier aplicación flutter. Actúa como una interfaz de usuario para que el usuario interactúe con la aplicación. Cualquier aplicación flutter es en sí misma un widget que se compone de una combinación de widgets. En una aplicación estándar, la raíz define la estructura de la aplicación seguida de un widget de MaterialApp que básicamente mantiene sus componentes internos en su lugar. Aquí es donde se establecen las propiedades de la interfaz de usuario y la propia aplicación. MaterialApp tiene un widget Scaffold que consta de los componentes visibles (widgets) de la aplicación. Scaffold tiene dos propiedades principales, a saber, el cuerpo y la barra de aplicaciones. Contiene todos los widgets secundarios y aquí es donde se definen todas sus propiedades. El siguiente diagrama muestra la jerarquía de una aplicación flutter:.

Dentro de Scaffold, suele haber un widget AppBar que, como sugiere el nombre, define la barra de aplicaciones de la aplicación. El andamio también tiene un cuerpo donde se colocan todos los widgets de componentes. Aquí es donde se establecen las propiedades de estos widgets. Todos estos widgets combinados forman la página de inicio de la propia aplicación. El widget Center tiene una propiedad, Child, que se refiere al contenido real y se construye utilizando el widget Text.

Capas

El marco Flutter se clasifica en función de su complejidad y establece una jerarquía basada en el nivel decreciente de estas complejidades. Estas categorías a menudo se denominan capas. Estas capas se construyen una encima de la otra. La capa superior es un widget específico para el sistema operativo del dispositivo (es decir, Android o iOS). La segunda capa consta de los widgets de aleteo nativos, que comprenden componentes estructurales de la interfaz de usuario, detectores de gestos, componentes de gestión de estado, etc. Esta tercera capa es donde se produce toda la representación de la interfaz de usuario y del estado. Es la capa que incluye todos los componentes visibles de la aplicación flutter. La siguiente capa consta de animaciones utilizadas en transiciones, flujo de imágenes y gestos. Estos continúan con el nivel muy alto de diseño del sistema que no es el objetivo de este artículo.

Gestos

Toda forma física de interacción con una aplicación flutter se realiza a través de gestos predefinidos. GestureDetectors se utilizan para lo mismo. Es un widget invisible que se usa para procesar la interacción física con la aplicación flutter. La interacción incluye gestos como tocar, arrastrar y deslizar, etc. Estas funciones se pueden usar para mejorar de forma creativa las experiencias del usuario de la aplicación al hacer que realice las acciones deseadas en función de gestos simples.

Concepto de Estado

Si alguna vez ha trabajado con React js, es posible que esté familiarizado con el concepto de estado. Los estados no son más que objetos de datos. Flutter también opera en territorio similar. Para la gestión de estado en una aplicación de Flutter se utiliza StatefulWidget. De manera similar al concepto de estado en React js, la nueva representación de widgets específicos del estado ocurre cada vez que cambia el estado. Esto también evita volver a renderizar toda la aplicación cada vez que cambia el estado de un widget.

La arquitectura de una aplicación Flutter o el marco flutter generalmente consiste en una combinación de widgets pequeños y más grandes que interactúan en conjunto para construir la aplicación. Todas sus capas son parte integral de su diseño y funcionamiento. Tan simple como es construir una aplicación en flutter, está construida con componentes igualmente complejos en su núcleo.