Flutter
Flutter es un SDK de aplicaciones móviles para la creación de aplicaciones de
alto rendimiento y alta fidelidad para iOS y Android, a partir de un único código
base.
El objetivo es permitir a los desarrolladores que lancen aplicaciones de alto
rendimiento que se adapten de forma natural a diferentes plataformas.
Abarcamos las diferencias en los comportamientos de scrolling, tipografía,
iconos, y más.
Esta es una aplicación de demostración de la Galería, una colección de
aplicaciones de ejemplo de Flutter que puedes ejecutar después de instalar
Flutter y de configurar tu entorno. Shrine tiene scrolling de imágenes de alta
calidad, cards interactivas, botones, listas desplegables, y una página de carrito
de compras. Para ver el código base único de este y otros ejemplos, visita
nuestro repositorio en GitHub.
No se requiere experiencia en desarrollo móvil para empezar. Las aplicaciones
están escritas en Dart, lo que resulta familiar si has utilizado un lenguaje como
Java o JavaScript. !La experiencia con lenguajes orientados a objetos es
definitivamente útil, pero, incluso los no programadores han desarrollado
aplicaciones Flutter!
¿Por qué usar Flutter?
VENTAJAS:
• Ser altamente productivo
o Desarrolla para iOS y Android desde un único código base
o Haz más con menos código, incluso en un solo sistema operativo,
con un lenguaje moderno y expresivo y un enfoque declarativo.
o Haz un prototipo e itera fácilmente
▪ Experimenta cambiando el código y recargando a medida
que tu aplicación se ejecuta (con hot reload)
▪ Corrige los fallos y continúa depurando desde donde la
aplicación se quedó
• Crear experiencias de usuario maravillosas y altamente personalizadas
o Benefíciate de un amplio conjunto de widgets Material Design y
Cupertino (toque iOS) construidos usando el propio framework de
Flutter
o Realiza diseños personalizados, agradables y de marca, sin las
limitaciones de los conjuntos de widgets OEM
Principios básicos
Flutter incluye un framework moderno de estilo reactivo, un motor de
renderizado 2D, widgets listos y herramientas de desarrollo. Estos componentes
trabajan juntos para ayudarte a diseñar, construir, probar y depurar aplicaciones.
Todo está organizado en torno a unos pocos principios básicos.
Todo es un Widget
Los widgets son los elementos básicos de la interfaz de usuario de una
aplicación Flutter. Cada widget es una declaración inmutable de parte de la
interfaz de usuario. A diferencia de otros frameworks que separan vistas,
controladores de vistas, layouts y otras propiedades, Flutter tiene un modelo de
objeto unificado y consistente: el widget.
Un widget puede definir:
• un elemento estructural (como un botón o menú)
• un elemento de estilo (como una fuente o un esquema de color)
• un aspecto del diseño (como padding)
• y así sucesivamente…
Los widgets forman una jerarquía basada en la composición. Cada widget se
integra en el interior y hereda propiedades de su padre. No existe un objeto
“application” separado. En su lugar, el widget raíz sirve para esta función.
Puedes responder a eventos, como la interacción del usuario, diciéndole al
framework que reemplace un widget en la jerarquía con otro widget. El
framework compara los widgets nuevos y antiguos y actualiza eficientemente la
interfaz de usuario.
Composición > herencia
Los widgets se componen a menudo de muchos widgets pequeños y de un solo
propósito, que se combinan para producir efectos poderosos. Por
ejemplo, Container, un widget de uso común está compuesto por varios
widgets responsables del diseño, pintado, posicionamiento y dimensionado.
Específicamente, Container está compuesto por
widgets LimitedBox, ConstrainedBox, Align, Padding, DecoratedBox,
y Transform widgets. En lugar de subclasificar Contenedor para producir un
efecto personalizado, puedes componer estos y otros widgets sencillos de
formas novedosas.
La jerarquía de clases es superficial y amplia para maximizar el número posible
de combinaciones.
También puedes controlar el diseño de un widget componiéndolo con otros
widgets. Por ejemplo, para centrar un widget, puedes envolverlo en un widget
Center. Hay widgets para padding, alignment, row, columns, y grids. Estos
widgets de diseño no tienen una representación visual propia. En cambio, su
único propósito es controlar algún aspecto del diseño de otro widget. Para
entender por qué un widget se renderiza de cierta manera, a menudo es útil
inspeccionar los widgets vecinos.
Los pasteles en capas son deliciosos
El framework Flutter está organizado en una serie de capas, con cada capa
construyéndose sobre la capa anterior.
El diagrama muestra las capas superiores de la estructura, que se utilizan más
frecuentemente que las capas inferiores. Para el conjunto completo de librerías
que componen la estructura de capas de Flutter, consulta
nuestra documentación de la API.
El objetivo de este diseño es ayudarte a hacer más con menos código. Por
ejemplo, la capa Material se construye componiendo widgets básicos a partir de
la capa de widgets, y la capa de widgets se construye organizando los objetos
de nivel inferior a partir de la capa de renderizado.
Las capas ofrecen muchas opciones para crear aplicaciones. Elige un enfoque
personalizado para liberar todo el poder expresivo del framework, o usa los
componentes de la capa de widgets, o mezcla y combina. Puedes componer los
widgets que Flutter proporciona, o crear tus propios widgets personalizados
usando las mismas herramientas y técnicas que el equipo de Flutter utilizó para
desarrollar el framework.
No se te oculta nada. Obtendrás los beneficios de productividad de un
concepto de widget unificado de alto nivel, sin sacrificar la capacidad de
profundizar tanto como desees en las capas inferiores.
Construyendo widgetss
Las características únicas de un widget se definen mediante la implementación
de una función build que devuelve un árbol (o jerarquía) de widgets. Este árbol
representa la parte del widget de la interfaz de usuario en términos más
concretos. Por ejemplo, un widget de la barra de herramientas puede tener una
función de compilación que devuelva un horizontal layout de
algún text y diversos botones. El framework solicita entonces, recursivamente, a
cada uno de estos widgets, que ejecuten su método build hasta que el proceso
llegue a su fin en un widget completo correcto, que luego el framework une en
un árbol.
La función de construcción de un widget debería estar libre de efectos
secundarios. Siempre que se le pida que construya, el widget debe devolver un
nuevo árbol de widgets independientemente de lo que el widget haya devuelto
previamente. El framework hace el trabajo pesado de comparar la construcción
anterior con la actual y determinar qué modificaciones se deben hacer a la
interfaz de usuario.
Esta comparación automatizada es bastante efectiva, permitiendo aplicaciones
interactivas de alto rendimiento. Y el diseño de la función build simplifica el
código al centrarse en declarar de qué está hecho un widget, en lugar de las
complejidades de actualizar la interfaz de usuario de un estado a otro.
Manejo de la interacción del usuario
Si las características únicas de un widget necesitan cambiar, basadas en la
interacción del usuario u otros factores, ese widget es stateful. Por ejemplo, si
un widget tiene un contador que se incrementa cada vez que el usuario pulsa
un botón, el valor del contador es el estado de ese widget. Cuando ese valor
cambia, el widget necesita ser reconstruido para actualizar la UI.
Estos widgets heredan de StatefulWidget (en lugar de StatelessWidget) y
almacenan su estado mutable en una subclase de State.
Cada vez que se muta un objeto State (p.ej., incrementando el contador), debes
llamar a setState() para indicar al framework que actualice la interfaz de usuario
llamando al método build de State de nuevo. Para ver un ejemplo de la gestión
del estado, consulta el template MyApp que es creado con cada nuevo proyecto
de Flutter.
El hecho de tener objetos state y widget separado permite que otros widgets
traten de la misma manera a los widgets stateless y stateful, sin preocuparse por
perder estado. En lugar de tener que aferrarse a un hijo para preservar su
estado, el padre es libre de crear una nueva instancia del hijo sin perder el
estado persistente del mismo. El framework hace todo el trabajo de encontrar y
reutilizar los objetos de estado existentes cuando sea apropiado.
• Estado (State): Flutter utiliza un sistema de manejo de estado que permite
controlar cómo cambia y se actualiza la interfaz de usuario en función de los
cambios en los datos. El estado puede ser estático (no cambia) o dinámico
(cambia durante la vida de la aplicación).
• Reactividad: Flutter promueve un enfoque reactivo para construir interfaces de
usuario. Esto significa que cuando cambia el estado de la aplicación, los widgets
afectados se actualizan automáticamente para reflejar esos cambios.
• Composición: Flutter fomenta la composición de widgets más pequeños en
widgets más grandes y complejos. Esto permite construir interfaces de usuario
de manera modular y reutilizable.
• Hot Reload: Una característica destacada de Flutter es el "Hot Reload", que
permite a los desarrolladores ver inmediatamente los cambios realizados en el
código sin reiniciar toda la aplicación. Esto agiliza el proceso de desarrollo y
depuración.
En términos de patrones de arquitectura, Flutter no impone uno específico, pero
proporciona libertad para elegir el patrón que mejor se adapte a las
necesidades del proyecto. Algunos patrones comunes utilizados con Flutter son:
• Estado local y gestión de estado: Enfoques como BLoC (Business Logic
Component), Provider, MobX y Redux se utilizan para gestionar el estado de la
aplicación y controlar cómo los datos fluyen a través de la interfaz de usuario.
• Arquitectura por capas: Separar la lógica de presentación de la lógica de
negocio y los servicios. Ejemplos de esto son MVC (Model-View-Controller) y
MVVM (Model-View-ViewModel).
• Arquitectura limpia (Clean Architecture): Promueve una separación clara entre
las capas de presentación, lógica de negocio y acceso a datos, facilitando la
prueba y el mantenimiento.
En resumen, la arquitectura de Flutter se basa en la composición de widgets, la
reactividad y el manejo eficiente del estado para crear aplicaciones nativas de alta
calidad para múltiples plataformas desde un solo código base. Ofrece flexibilidad en la
elección de patrones de arquitectura para adaptarse a diferentes necesidades de
desarrollo.
