Flutter - Aplicación de arquitectura
En este capítulo, analicemos la arquitectura del marco Flutter.
Widgets
El concepto central del marco Flutter es In Flutter, Everything is a widget. Los widgets son básicamente componentes de la interfaz de usuario que se utilizan para crear la interfaz de usuario de la aplicación.
En Flutter , la aplicación es en sí misma un widget. La aplicación es el widget de nivel superior y su interfaz de usuario se construye usando uno o más elementos secundarios (widgets), que nuevamente se construyen usando sus widgets secundarios. Estacomposability La función nos ayuda a crear una interfaz de usuario de cualquier complejidad.
Por ejemplo, la jerarquía de widgets de la aplicación Hello World (creada en el capítulo anterior) es la que se especifica en el siguiente diagrama:
Aquí los siguientes puntos son dignos de mención:
MyApp es el widget creado por el usuario y se construye utilizando el widget nativo de Flutter, MaterialApp .
MaterialApp tiene una propiedad de inicio para especificar la interfaz de usuario de la página de inicio, que nuevamente es un widget creado por el usuario, MyHomePage .
MyHomePage se construye usando otro widget nativo de flutter, Scaffold
Scaffold tiene dos propiedades: body y appBar
body se usa para especificar su interfaz de usuario principal y appBar se usa para especificar su interfaz de usuario de encabezado
La interfaz de usuario del encabezado se crea con el widget nativo de flutter, la barra de aplicaciones y la interfaz de usuario del cuerpo se crean con el widget Center .
El widget Center tiene una propiedad, Child , que se refiere al contenido real y se construye usando el widget Text
Gestos
Los widgets de Flutter admiten la interacción a través de un widget especial, GestureDetector . GestureDetector es un widget invisible que tiene la capacidad de capturar las interacciones del usuario, como tocar, arrastrar, etc., de su widget secundario. Muchos widgets nativos de Flutter admiten la interacción mediante el uso de GestureDetector . También podemos incorporar una función interactiva en el widget existente componiéndolo con el widget GestureDetector . Aprenderemos los gestos por separado en los próximos capítulos.
Concepto de Estado
Los widgets de Flutter admiten el mantenimiento del estado al proporcionar un widget especial, StatefulWidget . El widget debe derivarse del widget StatefulWidget para admitir el mantenimiento del estado y todos los demás widgets deben derivarse de StatefulWidget . Los widgets Flutter sonreactiveen nativo. Esto es similar a reactjs y StatefulWidget se auto re- vuelve cada vez que se cambia su estado interno. La reproducción se optimiza al encontrar la diferencia entre la interfaz de usuario del widget anterior y la nueva y al procesar solo los cambios necesarios
Capas
El concepto más importante del marco Flutter es que el marco está agrupado en varias categorías en términos de complejidad y claramente organizado en capas de complejidad decreciente. Una capa se construye utilizando su capa de siguiente nivel inmediata. La capa más superior es un widget específico para Android e iOS . La siguiente capa tiene todos los widgets nativos de flutter. La siguiente capa es la capa de renderizado , que es un componente de renderizado de bajo nivel y renderiza todo en la aplicación Flutter. Las capas se reducen al código específico de la plataforma central
La descripción general de una capa en Flutter se especifica en el siguiente diagrama:
Los siguientes puntos resumen la arquitectura de Flutter:
En Flutter, todo es un widget y un widget complejo se compone de widgets ya existentes.
Las funciones interactivas se pueden incorporar siempre que sea necesario mediante el widget GestureDetector .
El estado de un widget se puede mantener siempre que sea necesario utilizando el widget StatefulWidget .
Flutter ofrece un diseño en capas para que se pueda programar cualquier capa según la complejidad de la tarea.
Discutiremos todos estos conceptos en detalle en los próximos capítulos.