Skip to main content

Command Palette

Search for a command to run...

¿Que es FlutterFlow?

Todo lo que necesita para empezar a usar flutter-flow

Updated
5 min read
¿Que es FlutterFlow?
J

Actualmente estoy conociendo el mundo del #No-code utilizando como herramienta principal @flutterflow.

Con la herramienta FlutterFlow podemos crear interesantes interfaces de cualquier aplicación usando las tecnologías de Google Dart y Flutter sin la necesidad de codificar una sola linea de código.

Es una herramienta visual que nos permite estructurar las mayorías de aplicaciones que podría imaginar sin tener que preocuparte de tener avanzados conocimientos de desarrollo en Flutter, es un constructor de aplicaciones.

Con FlutterFlow podemos crear aplicaciones móviles para Android e iOS y actualmente para Linux, OSX y Windows, Web.

Hay que destacar que siempre es un plus conocer o haber trabajado con Dart y Flutter para conseguir aplicaciones robustas, pero en la mayoría de los casos no es necesario.

Para utilizar FlutterFlow, no hay que instalar nada en nuestro ordenador, los usuarios inician un nuevo proyecto en el navegador y construyen una interfaz de usuario arrastrando y soltando, utilizando iconos y componentes que van desde simples listas y botones hasta AudioPlayer, WebView, VideoPlayer o GoogleMap.

Algunos requisitos que hay que tener en cuenta: actualmente se puede construir en cualquier ordenador portátil o de sobremesa.

Se recomienda utilizar una pantalla de al menos 1280 x 1084.

FlutterFlow funciona mejor en Google Chrome (si experimentas algún problema, te recomendamos cambiar a Chrome).

También es recomendable permitir pop-up y redirecciones y ClipBoard de app.flutterflow.io.

Para tener acceso a la herramienta basta con entrar en la siguiente dirección:

flutterflow-login.png

Empieza a construir

Los elementos de diseño determinan cómo se colocan los componentes, incluyendo contenedores, filas, columnas, cuadrículas, pestañas y tarjetas.

Para dar vida a la interfaz de usuario, basta con seleccionar un componente y establecer sus propiedades, incluidas las opciones de diseño, como los colores, las fuentes y el relleno; las acciones, como la navegación o las llamadas a la API, las conexiones a las consultas de la base de datos y las animaciones para añadir algo de dinamismo.

Los controles pueden vincularse a los datos para mostrar los resultados de las consultas, incluyendo la autenticación del usuario para gestionar el acceso a los datos.

Un modo de vista previa muestra aproximadamente cómo funcionará la aplicación en tiempo de ejecución, aunque actualmente sin datos en vivo, autenticación o llamadas a la API. Un modo de ejecución realiza una compilación completa, pero tarda unos minutos en prepararse.

La principal opción para conectarse a los datos es Firestore de Google, que forma parte de su plataforma Firebase, aunque la capacidad de realizar llamadas a la API, llamadas REST GET o POST a cualquier punto final, significa que el código del servidor podría llamar a otras fuentes que el desarrollador elija, pero fuera del entorno de FlutterFlow.

Una vez completado, un proyecto puede ejecutarse en el navegador y desplegarse en la App Store de iOS o descargarse como APK para Android.

También es posible descargar el código generado por FlutterFlow e importarlo a otro entorno para completarlo, aunque es unidireccional y no hay forma de importar el código modificado de nuevo al entorno de FlutterFlow.

puede descargar código flutterflow.png

FlutterFlow se lanzó en mayo, pero este mes ha traído una importante novedad: las funciones personalizadas. Esto permite a los desarrolladores añadir código Dart (el lenguaje utilizado por Flutter) a un proyecto, definiendo funciones que pueden tomar argumentos derivados de los datos vinculados a un control.

Otra de las ventajas que tiene FlutterFlow es la interface UI Builder, te permite crear estructuras de tu App arrastrando y soltando objetos en el canvas principal, ademas te permite hacer uso de las plantillas que trae por defecto para que el proceso de construcción sea más rápido.

UI Builder FlutterFlow

Con FlutterFlow podemos añadir fácilmente funciones avanzadas como notificaciones push, aplicaciones multi-lenguajes, pagos, animaciones y mucho más.

Las actualizaciones son muy constantes, el equipo trabaja duramente para ir incorporando nuevas funcionalidades a la herramienta.

Unas de las mas esperada por los usuarios de la plataforma es poder clonar sus proyectos y durante esta semana han anunciado la implementación.

Algo impresionante que me gusta de esta herramienta, es la facilidad con la que podemos construir nuestros propios widgets personalizados, ademas podemos escribir cualquier código personalizado en cualquier otro editor de código y posteriormente utilizarlo en FlutterFlow.

Un dato que debemos tener muy en cuenta es el precio, es gratuito para probar las cosas con la vista previa en el navegador; 30 dólares al mes para la capacidad adicional de descargar el código y los APK; y 70 dólares al mes para añadir APIs personalizadas, integración con GitHub, que actualiza un repositorio cuando se modifica el código, despliegue en iOS y gestión del contenido de Firebase. Un código base soporta tanto iOS como Android.

pricelist-flutterflow.png

Sí, FlutterFlow parece tener un sabor a Google, no es sólo porque Flutter es un proyecto de Google, sino también porque los cofundadores de FlutterFlow son ex ingenieros de Google, Abel Mengistu y Alex Greaves, aunque no del equipo de Flutter.

Abel Mengistu y Alex Greaves.png

¿Qué tipos de aplicaciones puedo hacer con FltutterFlow?

Puede hacer desde Aplicaciones, Cloud, SaaS, Web, etc.. tu imaginación es el limite.

Qué tipos de aplicaciones puedo hacer con FltutterFlow.png

¿Dónde puedo seguir informándome sobre FlutterFlow?

FlutterFlow tiene una gran comunidad de usuarios en la que cada día estan compartiendo información muy importante sobre la herramienta.

Primer lugar en la que debe infórmate es en el mismo www.flutterflow.io, documentación oficial de la plataforma, esta en ingles, pero con la gran comunidad de habla hispana al instante se hace eco de las novedades en español.

todo-sobre-flutterflow.png

Segundo lugar te recomiendo hacer comunidad, cuando entre a la plataforma puede ingresar a la comunidad propia de FlutterFlow , aquí encontrarás mucho contenido y te ayudará en el camino para dominar la herramienta.

comunidad-propia de flutterflow.png

Tercer lugar: canal de youtube oficial de FlutterFlow, los creadores de FlutterFlow van creando contenido para enseñar a sus usuarios, es un canal muy vivo en la que puede aprender mucho.

canal de youtube oficial de flutterflow.png

Si necesitas más ayuda para seguir familiarizándote con el entorno de desarrollo, a continuación te muestro los principales canales oficiales:

Discord FlutterFlow:

discord-flutterflow.png

Preguntas y Respuestas

preguntas y respuestas flutterflow.png

Blog Oficial FlutterFlow

blog-flutterflow.png

Resumen: -> Esto ha sido un primer acercamiento con FlutterFlow, si quieres seguir informándote también puede seguir a esFlutterFlow | FireBase | Flutter | Dart | para estar informado sobre los principales avances de la plataforma.

J

Excelente

FlutterFlow

Part 1 of 1

Todo lo que necesita saber para empezar con FlutterFlow.