[Flutter] El Framework definitivo (web, mobile, desktop)

Sk8eR #1 4 Ago

Mi experiencia:

Llevo unos 10m desarrollando y aprendiendo Flutter, vengo de trabajar con Swift haciendo apps nativas desde el 2014.
Es una autentica locura, la velocidad/calidad con la que se desarrolla con este Framework.
Animaría a toda persona que quiere empezar a desarrollar a echarle un vistazo.

Durante este tiempo he visto aplicaciones móvil, desktop, web y francamente me han evangelizado. Acabo de probar en VisionOS y tambien "compila" sin problema....

Actualmente utilizo una ariqutectura con routing, provider, bloc/cubit, repositorios, dominio/service.
Sí hay más desarrolladores flutter, me gustaria que este hilo sirva para compartir dudas/experiencias

Bienvenidos al Hilo Introductorio de Flutter

¿Qué es Flutter?

Flutter es un SDK de código abierto creado por Google que permite a los desarrolladores crear aplicaciones nativas para Android, iOS, Web y desktop desde una única base de código.

Ventajas de Flutter

Desarrollo multiplataforma: Flutter permite el desarrollo de aplicaciones para Android, iOS, Web y desktop con un solo código fuente.
Hot Reload: Este es una gran característica que permite a los desarrolladores ver los cambios casi en tiempo real sin la necesidad de reiniciar la aplicación.
Rendimiento: Dado que Flutter compila el código en código nativo de ARM, se pueden obtener altos niveles de rendimiento.
Personalización: Flutter ofrece una gran cantidad de widgets preconstruidos que puedes personalizar para lograr el aspecto deseado.
Comunidad: Cuenta con una comunidad activa que ayuda a resolver problemas, compartir ideas y mejorar el SDK.

Cómo empezar con Flutter

Antes de empezar a trabajar con Flutter, necesitas tener instalado el siguiente software:

Flutter SDK: Instalar Flutter
Android Studio o VS Code: Instalar Android Studio / Instalar VS Code

Luego de tener todo instalado, puedes crear tu primera aplicación siguiendo esta guía: Guía inicial de Flutter

Arquitecturas populares en Flutter

Hay muchas arquitecturas diferentes que puedes usar al desarrollar aplicaciones con Flutter, aquí te menciono algunas populares:

Provider: Este es un patrón de administración de estado recomendado por el equipo de Flutter. Más información
Bloc: Es un patrón que se basa en la idea de los eventos de entrada y los estados de salida. Más información
GetX: Es un paquete de alta productividad para Flutter que proporciona una solución de administración de estado, dependencia y rutas. Más información

Recursos adicionales

Documentación oficial de Flutter
Curso de Flutter en Udemy (siempre se recomienda la Dra Angela Yu)
Otro curso de Udemy recomendado en el hilo
Libro "Flutter in Action"
Galería de ejemplos de Flutter

Comunidad Flutter

Paquetes Populares en Flutter

Estos son algunos de los paquetes que utilizo usualmente

auto_route: Este paquete facilita la navegación y la generación de rutas en Flutter.
cached_network_image: Este paquete permite a las imágenes de la red ser almacenadas en caché para un rendimiento más rápido.
collection: Mejora las capacidades de las colecciones de Dart y proporciona algoritmos adicionales que no se encuentran en el SDK de Dart.
connectivity_plus: Este paquete permite a las aplicaciones Flutter detectar la conectividad de la red.
cupertino_icons: Proporciona íconos adicionales para tu aplicación.
another_flushbar: Es un widget que se utiliza para notificar mensajes y alertas en la aplicación.
datadog_flutter_plugin: Proporciona funciones de monitorización y trazabilidad para tu aplicación Flutter.
device_info_plus: Este paquete proporciona información detallada sobre el dispositivo que ejecuta la aplicación.
dio: Paquete para hacer solicitudes HTTP.
dio_cache_interceptor: Permite la gestión de la caché en las solicitudes HTTP de Dio.
dio_cache_interceptor_hive_store: Proporciona una tienda de caché basada en Hive para Dio.
isar: Paquete para manejar una base de datos NoSQL en la aplicación Flutter.
isar_flutter_libs: Dependencias necesarias para utilizar Isar en Flutter.
equatable: Ayuda con las comparaciones entre objetos en Dart.
firebase_analytics: Permite la integración con las funciones de análisis de Firebase.
firebase_core: Es el paquete base para todas las funcionalidades de Firebase.
firebase_crashlytics: Permite la integración con las funciones de reporte de errores de Firebase.
firebase_performance: Proporciona herramientas de seguimiento de rendimiento de Firebase.
firebase_remote_config: Permite la integración con la funcionalidad de configuración remota de Firebase.
flutter_branch_sdk: Permite la integración con la plataforma de enlaces profundos Branch.
flutter_secure_storage: Proporciona una forma segura de almacenar datos en dispositivos móviles.
freezed_annotation: Utilizado para la generación de código en conjunción con el paquete Freezed para el manejo de estados inmutables.
get_it: Un servicio de localización y administrador de estado para Dart y Flutter.
flutter_bloc: Un paquete de administración de estado basado en los patrones BLoC y cubit.
hydrated_bloc: Una extensión de flutter_bloc que permite almacenar y recuperar estados de BLoC automáticamente.
bloc_concurrency: Proporciona extensiones para controlar la ejecución concurrente de eventos de BLoC.
in_app_review: Proporciona una forma de solicitar y mostrar revisiones en la aplicación.
json_annotation: Proporciona anotaciones personalizadas que pueden ser utilizadas por el paquete json_serializable.
logging_flutter: Un paquete de registro para Flutter.
package_info_plus: Este paquete proporciona una API para consultar información sobre un paquete de aplicaciones.
permission_handler: Proporciona una forma de solicitar permisos en Flutter.
provider: Un paquete de administración de estado recomendado por el equipo de Flutter.
rxdart: Proporciona funcionalidades de programación reactiva para Dart.
shake: Permite abrir una consola QA al agitar el dispositivo.
shared_preferences: Proporciona una forma persistente y asíncrona de almacenar datos simples.
flutter_custom_tabs: Un paquete para lanzar URLs en tabs personalizadas en dispositivos móviles.
url_launcher: Proporciona una forma de lanzar URLs en la plataforma de destino.
auto_size_text: Un widget de texto que se redimensiona automáticamente su tamaño de fuente para ajustarse perfectamente dentro de sus límites.
devicelocale: Proporciona una forma de obtener el idioma actual del dispositivo.
flutter_localized_locales: Proporciona una forma de localizar los nombres de los idiomas en Flutter.
flutter_animate: Paquete para crear animaciones en Flutter.
animations: Proporciona una serie de widgets predefinidos con animaciones.
stream_transform: Proporciona una colección de utilidades de alto orden para Stream.
meta: Proporciona anotaciones que desarrolladores de Dart pueden usar para expresar las intenciones que las herramientas estáticas, como los analizadores, pueden usar para proporcionar comentarios.
share_plus: Proporciona una forma de compartir contenido.
path_provider: Encuentra directorios comunes y de aplicación en los sistemas de archivos del host.
infinite_scroll_pagination: Proporciona una forma de implementar la paginación con desplazamiento infinito.
rx_shared_preferences: Proporciona una forma de utilizar Shared Preferences con RxDart.
modal_bottom_sheet: Proporciona una forma de presentar una hoja inferior modal en Flutter.
flutter_markdown: Un renderizador de Markdown en Flutter.
Template básico que utilizamos dentro de poco le meteremos un update
CI para flutter Fastlane + GitHubActions]

Eventos en España

Sé que tanto en Madrid como Barcelona hay empresas como VGV, mediamarket y otras montando eventos. Si os interesa amplio sobre ello

Proximamente hare update con mejoras o comentarios que dejeis.

Muestra tu Proyercto en Flutter

@gonya707 Portfolio, Ramen Instructor App/Web, Beats en Flutter

32

MisKo #2 4 Ago

Buen post que meto en favoritos !

Yo he tocado flutter a nivel personal y hace un par de años me hice como 4 o 5 aplicaciones muy sencillas para aprender y me gustó en ese entonces lo que vi aunque algunas cosas se "enredaban" un poco (al combinar componentes con más componentes e ir escalando sobre todo).

Desde entonces no lo he tocado y justo estos días iba a empezar a desarrollar una app nueva y he estado trasteando con react-native, nativescript (con vue2, vue3, svelte), ionic... y la única que no he probado para esta app es Flutter, que no se cuanto habrá evolucionado desde el 2021.

Gracias a tu post voy a trastear de nuevo a ver que tal ha cambiado

Edit

Por cierto, en cuanto a lo del curso, yo prefiero el de Maximilian, que además suele actualizar sus cursos cuando salen cosas nuevas o cambian, por ejemplo, el suyo de Flutter lo compré en el 2018 y la ultima actualización que ha hecho ha sido en mayo del 2023 (volviendo a grabar todas las clases y demás)

https://www.udemy.com/course/learn-flutter-dart-to-build-ios-android-apps/

1 1 respuesta

gonya707 #3 4 Ago Moderador

Buen hilo. Yo me introduje a flutter hace como un año via el curso de app brewery en udemy, que en unas pocas horas ya te deja a tu bola y luego a pegarme con ello por mi cuenta. Si te lo sabes estructurar bien, te queda un código muy bien organizado y exportar a cualquier cosa es easy peasy

Tengo un par de apps publicadas hechas con flutter, por si quereis curiosear

https://play.google.com/store/apps/details?id=com.gonya707.noodlecalc
Version web: https://sensai7.github.io/ramen_noodle_calc/#/
https://play.google.com/store/apps/details?id=com.gonya707.make_a_beat

También me hice un portfolio con flutter por mantenerme ocupado, pero soy consciente de que no es lo ideal, pero aprendí un par de trucos https://sensai7.github.io/my-projects/#/

4 4 respuestas

CaRtEr0 #4 4 Ago

Flutter es de notable, yo he trabajado con él y me sorprende sinceramente que no lo tengamos hasta en la sopa xd

2 1 respuesta

Sk8eR #5 4 Ago

#2 estoy ahora mismo desarrollando una con 3.10, y la mejora cuando haces scrolling, se nota, que era lo que más me tiraba para atras en ios.
#3 la de ramen muy guapa xD se la he pasado a los ramen lovers que se pasan 231245321hs cocinando un ramen xd
#4 totalmente de acuerdo, sigue siendo un framework poco conocido que tiene muy buen potencial

me alegra que guste la idea!

2 respuestas

vibraboii #6 4 Ago

buen curro! a favs

MisKo #7 4 Ago

#5 Has trabajado en flutter con apps multi idioma y gráficas?

Por saber por donde tirar, que la que tengo pensada tendrá de ambas xD

1 respuesta

Sk8eR #8 4 Ago

#7 correcto para ello con l10n vas sobrado, se puede llegar a complicar, por ejemplo una de las apps usa una plataforma externa de traduccion, pero no ofrece soporte a .arb, asi que montas el l10n, vas llenando el .arb, luego lo exportas y lo conviertes a la extension que toque para la plataforma de traducción. Estoy preguntando a la empresa para la que trabajo cuantas utilidades/información puedo compartir.
Para graficas tipicas circulares y de barras la que utilice en su día fue https://pub.dev/packages/fl_chart

He añadido una sección muestra tu Proyecto en flutter, si no te molesta #3 lo estrenas!

1

Exor720 #9 4 Ago

Buen post, me lo leo y veo cuando pueda, me interesa para el proyecto de fin de grado

Torit0 #10 4 Ago

Ojalá Compose Multiplatform totalmente funcional dentro de poco. A mí es que Dart me da urticaria.

Buen hilo #1

bLaKnI #11 4 Ago Inocente

Que lenguaje base es?

edit: ya estamos...
Flutter uses the Dart programming language, a modern, object-oriented language created by Google
Que pereza nano.

4 1 respuesta

gonya707 #12 4 Ago Moderador

#11 Se llama dart, pero se aprende en 5 minutos si ya conoces cualquier lenguaje con sintaxis basada en C

Puedes hacer tus cosillas en dart online aquí para probarlo sin instalar todo el tinglado, incluyendo cosas con GUI usando flutter https://dartpad.dartlang.org/?

4

Zireael #13 4 Ago

Yo hice un par de apps en el curro y me gusto bastante.

Eso sí, al principio la estructura es un tanto liosa y eso que vengo de C#. No la estructura de los ficheros sino del código en sí, en ese sentido tiene más similitud a python bajo mi punto de vista.

1 1 respuesta

JohnVoiden #14 4 Ago Penitente

Yo he hehco una app con supabase de serverless , es mega facil pero la sintaxis esta hecho por un ciego.

1

Sk8eR #15 4 Ago

#13 a mi lo que siempre me peta la cabeza es que todos los elementos son Widgets, y metes un Bloc/Cubit/Logica y es padre pero es un widget lol

Chamborz #16 4 Ago :psyduck:

Si lo pilláis está con 100% descuento y en español.

NSFW

r2d2rigo #17 4 Ago Inocente

Muy util para hacer cosillas por los jajas pero en cuanto te tienes que salir del sandbox en el que te fuerza a estar, sudas tinta.

Ejemplo: embeber una webview.

nobody1 #18 4 Ago

Y para los vagos con el diseño existe https://flutterflow.io/

1 1 respuesta

isnotavail #19 4 Ago

A mi me parece una gozada, en nada tienes un boceto funcionando, lastima que no sea lo ideal para paginas webs, que es donde mas flojea, pero me parece super comodo de usar.

1

Sk8eR #20 4 Ago

#18 buff he intentado montar cosas alli, pero pierdes una de tiempo que me sale más a cuenta a mí montarmelo yo y me encanta la idea pero joder, no me hacia con él y eso que era de los de storyboard en iOS xd

PD ahora agrego un CI y un Template in house que montamos para Apps, 50 y 51 en #1 Si alguno le quiere dar una vuelta o mejorarlo son bienvenidas PR's
pd2 ninguno de los contributor soy yo lol por ahora...

#21 esta en

3. GetX: Es un paquete de alta productividad para Flutter que proporciona una solución de administración de estado, dependencia y rutas. Más información

en recomendadas puse las que suelo utilizar xD literal copy paste del ultimo proyecto, pero podemos ampliar y clasificar un poco a la que hayan más

1

kidandcat #21 4 Ago Gato Amable

Yo he sacado apps a producción con Flutter, y además he tenido que integrar librerias mierdosas en C de terceros (closed source).

Por cierto, no veo https://pub.dev/packages/get en las librerias recomendadas :3

PD: Fluttter es el futuro del frontend, pero por suerte para mi pude huir de ese horrible mundo y ahora solo hago backend

1 1 respuesta

D

demorador #22 5 Ago

#21 Ostia horrible por que?

NeV3rKilL #23 5 Ago :psyduck:

#3 en el porfolio, el scroll en tablet está rotísimo. Pilla los bullets como scrollable aún estando cerrados.

Ninja-Killer #24 5 Ago Le Connoisseur

Ya son tantos los lenguajes/frameworks/etc definitivos que he visto, que por muy bueno que sea... nunca ninguno será el "definitivo"

#1Sk8eR:
Animaría a toda persona que quiere empezar a desarrollar a echarle un vistazo.

Creo que es uno de los peores consejos que se le puede dar a una persona inexperta o muy novata que quiere empezar a programar

3 1 respuesta

Sk8eR #25 5 Ago

#24
Si me argumentas un poco mejor tu respuesta y por donde debería empezar? Xq para crear una interface de algo sencillo está de 10

Y estoy de acuerdo con lo de que hay muchos frameworks, y yo de nativo no salía xq todo lo demás era.... Lo que era....

Obviamente no será el definitivo pero desde mi punto de vista como mobile dev es un 9, si en vez de dart usará Swift sería un 10.
A nivel de app te permite hacer los Bridges de una manera eficiente, con buen rendimiento, sin perder en diseño y con una base de elementos muy digna y personalizable correspondiente a los últimos diseños de moda...
Y de gratis/poco effort puedes montar una "web" o desktop app

1 respuesta

Ninja-Killer #26 5 Ago Le Connoisseur

#25 No niego nada de lo que dices xD
Sólo he dicho que unnca habrá un lenguaje "definitivo" o "para siempre". Y que alguien que se vaya a dedicar a la programación yo no le aconsejaría empezar por ahí.. al menos si quiere tener algún tipo de base sólida

2

Kitsuo #27 5 Ago

Yo de vez en cuando he estado revisando ofertas de empleo, por curiosidad, y de Flutter siempre encuentro muchas menos ofertas que de otros lenguajes. A qué pensáis que se debe?

1 3 respuestas

Weahl #28 5 Ago

En mi trabajo lo usan para la parte mobile y nos dieron algún curso básico de Flutter, pero desde luego ni de broma se puede acercar a sustituir una aplicación web hecha con JS, ya solo el tema de CSS me parece una auténtica locura difícil de mantener, para mobile apps la verdad que sí que mola bastante.

3

eondev #29 5 Ago

#27 flutter yo me lo encuentro como un añadido o plus al perfil de mobile que buscan. Siempre suele ser nativo + flutter.

Yo lo probé cuando estaba aquello en pañales, que no habia nada y era la primera versión, cuando aún el mundo era java. Ni me moló lo que vi de Dart, ni su inexistente ecosistema, ni los bridges que había que hacer a código java para cualquier cosa que no fuese una pantallita etc.

Parece que ha evolucionado mucho el asunto no? O como lo veis. Lo único que me encandiló fue la forma de hacer UI que ahora también está en compose y swift ui. Si KMM y compose fuesen estables..., pero esto veo que es no-brain, escribes 1 vez, compilas a plataforma y chau

2

isnotavail #30 5 Ago

#27 Dart nacio muerto, y lo han ido resucitando de la mano de flutter a partir de 2019, pero fuera de el, hay poca cosa que hacer, por lo que mucha gente no quiere dar el paso, en cambio con JS puedes hacer practicamente de todo porque tienes frameworks para hacer tanto front como back.

Ademas, que flutter para apps multiplataforma, es una genialidad, te simplifica mucho el proceso, pero el rendimiento en webs por ejemplo decae mucho vs una web de react,next,etc.

3 1 respuesta

[Flutter] El Framework definitivo (web, mobile, desktop)

Mi experiencia:

Bienvenidos al Hilo Introductorio de Flutter

¿Qué es Flutter?

Ventajas de Flutter

Cómo empezar con Flutter

Arquitecturas populares en Flutter

Recursos adicionales

Comunidad Flutter

Paquetes Populares en Flutter

Eventos en España

Muestra tu Proyercto en Flutter

Edit

Usuarios habituales

Tags