Tabla de contenidos
Las aplicaciones de la arquitectura Flutter consiste principalmente en:
- Widgets
- Gestos
- Gestión de Estado
- Capas
Widgets
Los widgets son el componente principal de cualquier aplicación de flutter. Por medio de la cual actúa como una interfaz de usuario para que el usuario interactúe con la aplicación. Cualquier aplicación de 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 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 aplicación en sí. MaterialApp tiene un widget Scaffold que consta de los componentes visibles (widgets) de la aplicación. Scaffold tiene dos propiedades principales, 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 de flutter:
Dentro de Scaffold, generalmente hay un widget AppBar, que como su nombre indica define la barra de aplicaciones de la aplicación. Pero scaffold también tiene un cuerpo donde se colocan todos los widgets 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 usando 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 del sistema operativo del dispositivo (es decir, Android o iOS). La segunda capa consiste en los widgets de flutter nativos, que comprenden componentes de UI estructurales, detectores de gestos, componentes de administración de estado, etc.
Esta tercera capa es donde ocurre toda la representación de UI y de estado. Es la capa que incluye todos los componentes visibles de la aplicación Flutter. La siguiente capa consta de animaciones que se utilizan en transiciones, flujo de imágenes y gestos. Estos continúan hasta el muy alto nivel de diseño de sistemas 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 utiliza para procesar la interacción física con la aplicación Flutter. La interacción incluye gestos como tocar, arrastrar y desplazar, etc. Estas funciones se pueden usar para mejorar creativamente las experiencias del usuario de la aplicación al hacer que realice las acciones deseadas basadas en gestos simples.
Gestion 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 un césped similar. Para la gestión del estado en una aplicación Flutter, se utiliza StatefulWidget. Similar al concepto de estado en React js, la re-renderización de widgets específicos del estado ocurre cada vez que cambia el estado. Esto también evita la re-renderización de toda la aplicación, cada vez que cambia el estado de un widget.
La arquitectura de una aplicación Flutter o el marco de flutter generalmente consiste en una combinación de widgets pequeños y más grandes que interactúan conjuntamente para construir la aplicación. Todas sus capas son parte integral de su diseño y funcionamiento. Tan simple como construir una aplicación en Flutter, está construido con componentes igualmente complejos en su núcleo.
Fuente de Recurso
Pagina de geeksforgeeks Flutter – Architecture Application
- Iteradores y generadores en TypeScript
- Símbolo en TypeScript (Symbol)
- Tipos Avanzados en TypeScript
- Tipos de Compatibilidad en TypeScript
- Inferir Tipos en TypeScript
- Tipos Generalizados (Generics) en TypeScript
- Tipos Básicos de Datos en TypeScript
- Interfaces en TypeScript
- Declaración de Variables en TypeScript
- Funciones en TypeScript
- Categorías en TypeScript
- Introducción a TypeScript
- Clase MaterialApp en Flutter
- Clase Container en Flutter
- ¿Qué son los Widgets en Flutter?
- Introducción a la Arquitectura de Aplicaciones con Flutter
- Lista Doblemente Enlazada
- Listas Vinculadas en Estructura de Datos
- Introducción a las Matrices(Arrays)
- Estructuras de Datos en los Algoritmos de Programación
- Expresión const en JavaScript
- Expresión let en JavaScript
- Introducción al Lenguaje de Programación CSS
- Expresión var en JavaScript
- Expresión try…catch en JavaScript
- Expresión throw en JavaScript
- Continue en JavaScript
- Switch en JavaScript
- Expresiones if…else en JavaScript
- Declaración vacía o empty en JavaScript
- Break en JavaScript
- Sentencia block en JavaScript
- Arguments en JavaScript
- Promise en JavaScript
- Number en JavaScript
- Características JSON en JavaScript
- Array en JavaScript
- RegExp en JavaScript
- String en JavaScript
- Date en JavaScript
- Math en JavaScript
- URIError en JavaScript
- TypeError en JavaScript
- SyntaxError en JavaScript
