Diseño

Diseño de apps en Flutter: la mejor UI para tu app

Tiempo de lectura: 4 minutos

apps en flutter

Hoy en día se habla mucho de las aplicaciones de tipo cross-platform o multi plataforma. Cada vez son más los clientes que nos piden desarrollar sus apps de esta manera y por ello hemos querido dedicar un post para hablar de cómo diseñar apps en Flutter, una herramienta en auge para desarrollar este tipo de apps. Pero, antes de nada:

 

¿Qué son las aplicaciones cross platform o multi plataforma?

native vs cross platform

Las aplicaciones multi plataforma son aquellas que han sido desarrolladas para iOS, Android, e incluso web con un solo código y un solo lenguaje, es decir que con un desarrollo son efectivas para cualquier sistema operativo. Sin embargo, las aplicaciones nativas tienen que ser desarrolladas por separado, cada plataforma con su lenguaje, su programa específico y su desarrollador especializado.

Por esta razón están tan de moda últimamente, al fin y al cabo resultan más baratas que las nativas, son más rápidas de implementar y el equipo de desarrollo es mucho más reducido.

 

¿Qué es Flutter?

que es flutter

 

Flutter es una de las tecnologías de cross platform más populares que hay en el mercado, es de Google y fue lanzado en 2017. Cada vez son más los que utilizan esta herramienta y por lo tanto, existen muchos plugins que facilitan su desarrollo, comunidades o foros de apoyo que hablan de cómo mejorar o resolver determinados problemas, artículos para obtener información, etc.

 

¿Cómo funciona Flutter?

Para ponerte un poco en contexto (si estás pensando en diseñar para Flutter), me gustaría explicarte por encima cómo funciona este framework de Google para que veamos posteriormente cómo diseñar para Flutter. Resumiendo, todos los componentes que aparezcan en la interfaz serán para el desarrollador “widgets”. Cada elemento de la interfaz de usuario es un widget dentro de otro widget hasta llegar al widget superior. En realidad Flutter tiene sus propios widgets para cada plataforma, para Android son los componentes de Material y para iOS los llamados Cupertino. Al igual que ocurre en las apps nativas, también podemos obtener fácilmente widgets personalizados de otras librerías o realizarlos totalmente custom. Veamos un poquito más este tema de los widgets.

diseño flutter

 

Entonces, ¿cómo diseñar apps en Flutter?

diseñar para flutter

 

Lo más fácil y rápido sería usar los componentes de Material, ya que ahorraríamos mucho tiempo en desarrollo. Como mencionamos, Flutter es de Google, al igual que Android, por lo que los widgets de Material son más estándar, vienen integrados y son fáciles de implementar. En cambio, los widgets de Cupertino requieren más código, lo que implica más trabajo para los desarrolladores.

Ahora bien, ¿se puede hacer que la app tenga apariencia nativa en cada plataforma, usando Material en Android y Cupertino en iOS? Sí, en teoría, Flutter indica que es sencillo lograrlo, pero en la práctica no lo es tanto. Para ello, el desarrollador debe realizar dos implementaciones con raíces distintas, lo que contradice el objetivo de un desarrollo multiplataforma. Aunque es posible, supone un esfuerzo adicional y puede no ser la mejor opción en términos de eficiencia.

Por lo tanto, si vuestro equipo está utilizando Flutter por ahorrar costes, debéis realizar un único diseño con los componentes Material para ambas plataformas.

Aquí tienes una app de iOS o Android donde puedes consultar el catálogo de widgets de flutter desde tu dispositivo.

 

Algunos ejemplos de diseños de apps en Flutter

ejemplo de app en flutter app crossplatform

 

Como puedes ver en estos ejemplos que mostramos, los componentes utilizados son bastante sencillos o en su defecto nativos de Material. Si tienes más curiosidad, Flutter muestra algunos casos de uso de aplicaciones desarrolladas en Flutter.

Conclusiones

Cada vez hay más y más aplicaciones desarrolladas con Flutter pero para nosotros, los diseñadores, no hay mucho que temer por esta razón. Sencillamente haz tus diseños utilizando los componentes Material que hemos visto anteriormente y todo saldrá rodado. Como siempre, es imprescindible tener mucha comunicación con el desarrollador para comprobar que tus diseños son fáciles y factibles para implementarlos con Flutter.

Si quieres orientación en cómo diseñar apps en flutter, ¡contacta con nuestros expertos en desarrollo de apps!

Blog

Otros artículos