En este libro, vamos a conocer cómo está formado el framework, las características básicas que nos permite Flutter como SDK para crear aplicaciones móviles, de escritorio y webs, todo con un mismo proyecto base y con pequeñas modificaciones.
Flutter es la herramienta del momento cuando se trata en crear aplicaciones móviles para Android e iOS; y esto, no se trata de una moda ni nada que se le aparezca; su sintaxis limpia y expresiva con Dart, su programación declarativa con los widgets y otras características como el Hot Reload, lo convierten en una interesante solución para crear aplicaciones nativas para Android e iOS y que pocas herramientas que ofrecen también soluciones para crear aplicaciones móviles, se les puede comparar.
Aparte de crear aplicaciones para móviles, en versiones recientes del framework, también permiten crear aplicaciones para Linux, Windows y Mac, aparte para web; todo, con un mismo proyecto y pocos cambios para adaptar a cada plataforma.
Nos ofrece un esquema modular entre proyecto y aplicaciones, un conjunto importante de paquetes para extender el ya de por sí, completo framework y con esto, la creación de proyectos escalables.
En este libro, vamos a conocer cómo está formado el framework, las características básicas que nos permite Flutter como SDK para crear aplicaciones móviles, de escritorio y webs, todo con un mismo proyecto base y con pequeñas modificaciones.
En el libro vamos a centrarnos principalmente en el desarrollo móvil.
En definitiva, tendrás un enorme material a tu disposición, para hacer verdaderas aplicaciones.
Para quién es este libro
- Este libro está dirigido a cualquiera que quiera comenzar a desarrollar con Flutter; puede que vengas de otro framework o inclusive PHP; en ambos casos es una gran idea aprender de uno de los frameworks webs más avanzados y completos que podrás encontrar.
- Para aquellos que quieran conocer el framework y que conozcan otros frameworks webs, pero no tienen los conocimientos necesarios para aventurarse en estos.
- Para aquellas personas que quieran aprender algo nuevo, conocer sobre una tecnología que, aunque tiene mucha documentación, la mayoría está en inglés y al estar el framework en constante evolución, tiende a quedar desactualizada.
- Para las personas que quieran mejorar una habilidad en el desarrollo de aplicaciones y que quieran crecer como desarrollador.
- Para aquellos que quieran aprender o mejorar una habilidad y con esto, aumentar sus posibilidades de empleo o para llevar un proyecto personal.
- Para aquellas personas que conozcan el lenguaje de programación de Dart y quieran aprender Flutter.
Introducción
Este libro tiene la finalidad de dar los primeros pasos con flutter; con esto, vamos a plantear dos cosas:
- No es un libro que tenga por objetivo conocer al 100% Flutter, o de cero a experto, ya que, sería un objetivo demasiado grande para el alcance de esta guía, si no conocer su ecosistema, que nos ofrece y cómo funciona el mismo en base a varios ejemplos y/o aplicaciones pequeñas con alcances limitados.
- Se da por hecho de que el lector tiene conocimientos al menos básicos en el lenguaje de programación de Dart, al igual que en tecnologías web como HTML, CSS y JavaScript; también es recomendado que tengas conocimientos básicos en el desarrollo de aplicaciones.
¿Qué es Flutter?
Flutter es un framework que también proporciona de una SDK o toolkit (conjunto de herramientas) que permiten crear interfaces de software; inicialmente para aplicaciones móviles en Android e iOS de manera nativa, pero fue evolucionando hasta permitir crear aplicaciones de escritorio y web.
Flutter transforma el proceso de desarrollo de aplicaciones. Cree, pruebe e implemente hermosas aplicaciones móviles, web, de escritorio e integradas desde una única base de código.
Inicios de Flutter
Tomando como referencia, otros frameworks para desarrollar aplicaciones móviles (aunque a partir de la versión 3 de Flutter ya es posible desarrollar en otras plataformas de manera estable, es importante mencionar que los orígenes de Flutter partieron en el desarrollo móvil con Android e iOS), Flutter es relativamente nuevo.
Flutter ha experimentado una gran gran evolución a lo largo de los años, veamos los puntos más importantes:
- Se llamó Sky, en su primera aparición en Dart Developer Summit 2015 presentado por Eric Seidel. Se presentó como la evolución de varios experimentos de Google para crear aplicaciones móviles de una manera más fluida.
- Presentado como Flutter en 2016 y con su primer lanzamiento alfa en mayo de 2017, ya permitía crear aplicaciones para Android e iOS.
- Flutter tuvo una gran acogida por la comunidad y a partir de la retroalimentación de esta u otros factores, se logró una constante evolución hasta llegar a una versión estable en 2018.
- En 2021 se presentó Flutter 2 que trae como novedades el soporte para aplicaciones web y la protección contra datos nulos (Null safety).
- En el 2022 se presenta Flutter 3 cuya principal novedad es la de poder desarrollar de manera estable aplicaciones de escritorio para Linux, Windows y MacOS.
Ventajas de Flutter
Las ventajas principales que tiene Flutter, son dos:
- Desarrollo conjunto para aplicaciones móviles y de escritorio (sin contar el desarrollo de aplicaciones web), lo que significa que, con un solo proyecto podemos desarrollar en múltiples plataformas.
- Desarrollo nativo para plataformas, las aplicaciones generadas en Flutter son nativas:
- En el caso del desarrollo móvil, no son aplicaciones web empaquetadas (webview) a diferencia de otras tecnologías como Cordova o Ionic.
- En el caso de aplicaciones de escritorio para Windows y MacOS, no son aplicaciones web empaquetadas en un ejecutable a diferencia de otras tecnologías como Electron.
Es posible desarrollar tanto para móvil, como para escritorio como para web con un solo proyecto (un solo código base y definiendo pequeños cambios en el proyecto para adaptar correctamente a cada plataforma) este último punto, pocos (o ningún) frameworks lo permiten; que también brindan soluciones similares a los problemas que pretenden resolver.
Características de Flutter
Las principales razones por las que Flutter empezó a tener tanta importancia entre los desarrolladores de todo el mundo es la capacidad de desarrollar aplicaciones de forma rápida y sencilla con un rendimiento y una experiencia de usuario que es prácticamente igual a las aplicaciones nativas.
Y en el desarrollo, posee una sintaxis muy limpia gracias al API declarativo y se puede ver el resultado en tiempo real mientras se escribe el código.
Veamos estas características más en detalle:
1. Tiempo de desarrollo de las aplicaciones
Generalmente, la ejecución de una aplicación en Android usando Android Studio tarda varios segundos, este tiempo se hace considerable, cuando, por ejemplo, queremos editar esos pequeños detalles en la interfaz gráfica; que, si bien es cierto que, Android Studio tiene una vista previa de diseño, muchas veces no funciona de la manera esperada.
La función de hot reloading o "recarga en caliente" de Flutter, permite ver los cambios aplicados casi al instante, sin siquiera perder el estado actual de la aplicación. Y esto es exactamente lo que hace que el desarrollo de aplicaciones de Flutter sea varias veces más rápido debido a la mayor velocidad de desarrollo.
Además, el framework de Flutter trae consigo una enorme variedad de widgets listos para usar. La mayoría de ellos son increíblemente personalizables, lo que le ahorra tiempo como ningún otro framework ya que, para gran parte de la aplicación, usamos los widgets como piezas de LEGO que vamos colocando en base a nuestras necesidades.
Flutter proporciona una API declarativa en base a widgets que a la final, reduce notablemente el tiempo de desarrollo.
En definitiva, el tiempo de desarrollo de aplicaciones en Flutter es mucho menor en comparación con crear la misma aplicación de manera separada para Android e iOS. Esto tiene que ver mucho con los puntos señalados anteriormente y que no hay que escribir ningún código específico para cada plataforma.
Cualquier interfaz de usuario basada en 2D se puede implementar en Flutter sin interactuar con una aplicación nativa equivalente.
2. Rendimiento de la aplicación
El rendimiento de la aplicación en Flutter es prácticamente el mismo que el de una aplicación nativa; Flutter es capaz de proporcionar un rendimiento de 60 frames por segundo (fps), o un rendimiento de 120 fps en dispositivos capaces de realizar actualizaciones de 120 Hz; además de esto, Flutter gobierna todos los píxeles de la aplicación; con esos widgets, podemos dibujar cada píxel en la pantalla, sin usar los componentes nativos de cada plataforma.
La parte de bajo nivel de Flutter es el motor, escrito en C ++, utiliza SKIA, una biblioteca de representación de gráficos 2D para decirle a la GPU cómo representar los gráficos y el texto, básicamente cómo pintar cada píxel en la pantalla.
Al contrario del enfoque de la mayoría de los frameworks multiplataforma, Flutter no utiliza ningún motor intermedio para representar la aplicación (usualmente un webview).
En definitiva, Flutter provee una manera eficiente para crear aplicaciones y por lo tanto, el rendimiento es excelente.
Al contrario del enfoque de la mayoría de los marcos multiplataforma, Flutter no se basa en ninguna representación o interpretación de código intermedio. La aplicación Flutter está integrada directamente en el código de la máquina, lo que elimina cualquier error de rendimiento del proceso de interpretación.
3. Altamente personalizable y extensible
Una de las mayores ventajas de Flutter es la capacidad de personalizar cualquier elemento en la pantalla, ya que, cada elemento visual es un widget, puedes personalizar enormemente los mismos e inclusive crear widgets más completos y personalizados basados en los definidos por defecto en el framework.
4. Motor de renderizado propio
Flutter te permite hacer tantas cosas con tus aplicaciones que no están disponibles en otras plataformas. Obviamente, requiere que el framework sea bastante poderoso. De hecho, la mayoría de los puntos presentados arriba son posibles al tener un motor propio.
Flutter y Dart
El lenguaje de programación llamado Dart fué desarrollado por Google, y es un lenguaje de programación que se puede utilizar para desarrollar aplicaciones web, de escritorio, del lado del servidor y móviles, por lo tanto, es el ideal para trabajar con Flutter.
- Dart es un lenguaje de programación moderno y orientado a objetos utilizado para codificar aplicaciones en Flutter y cuya sintaxis, nos recuerda a Java o C lo que permite brindar la mejor experiencia al desarrollador para la creación de aplicaciones móviles de alto nivel.
- Dart es de tipo seguro (Null Safety).
- El sistema de definición de las variables en Dart es flexible, lo que permite el uso de un tipo dinámico combinado con comprobaciones en tiempo de ejecución.
Una de las características principales que tiene Dart y que lo hacen el compañero perfecto para Flutter es que, la aplicación se ejecuta sin problemas en el dispositivo de un usuario, ya que Dart compila y ejecuta directamente en código nativo, sin un puente intermediario (por ejemplo, JavaScript a nativo).
Flutter VS desarrollo nativo en Android Studio y xCode
Al momento de querer crear aplicaciones para dispositivos móviles nativas empleando xCode y Android Studio que son los ambientes oficiales para iOS y Android respectivamente, si no se selecciona Flutter y se utilizan en su lugar las plataformas oficiales, tenemos varias desventajas:
- Ciclos de desarrollo largos/más costosos: Al momento de querer desarrollar una aplicación para dispositivos móviles, debe elegir construir para una sola plataforma o para ambas si la quieres desarrollar con las plataformas oficiales, crear varios equipos. Esto tiene algunas consecuencias en términos de costo y diferentes capacidades de estas tecnologías nativas.
- Múltiples lenguajes para aprender: Si un desarrollador quiere desarrollar para múltiples plataformas, debe aprender cómo hacer algo en un sistema operativo y lenguaje de programación, y luego, lo mismo en otro sistema operativo y lenguaje de programación. Esto ciertamente tiene un impacto en la productividad del desarrollador.
En definitiva, para desarrollar la misma aplicación en Android e iOS usando los entornos oficiales, se deben de manejar dos proyectos distintos, con dos IDEs distintos que manejan lenguajes de programación distintos, además de que Flutter al tener una sintaxis declarativa y contar con el hot reload, en definitiva, hacen que sea mucho más rápido y mantenible en el tiempo programar las aplicaciones móviles en Flutter.
Claro está, que, si quieres llevar la aplicación para que se ejecutan en Windows, Mac o Linux e inclusive web, son puntos a favor de usar Flutter en comparación de hacer los mismos proyectos para cada plataforma de manera individual.
Diferencias y comparaciones entre los frameworks existentes
Existe una gran cantidad de frameworks y tecnologías de alta calidad y bien aceptados. Algunos de ellos son los siguientes:
- Xamarin
- React native
- Ionic
- Cordova
Todos estos frameworks ofrecen diferentes implementaciones para un mismo problema; por lo tanto, puedes pensar que es difícil que un "nuevo" framework encuentre su lugar en un campo que ya está lleno, pero no lo es. Flutter tiene beneficios que le hacen un espacio, no necesariamente por superar a los otros frameworks, sino por estar ya al menos al mismo nivel que los frameworks nativos.
Es difícil comparar rendimientos entre las distintas tecnologías ya que, algunos pueden ser mejores en ciertas circunstancias, pero es seguro decir que pretende serlo. Tal cual se explicó anteriormente,
Flutter se desarrolló teniendo en cuenta una alta velocidad de fotogramas. Algunos de los frameworks existentes se basan en la representación de JavaScript y HTML, lo que puede causar un peor rendimiento porque todo se dibuja en una vista web
(un componente visual como un navegador web). Algunos usan componentes propios, pero confían en un puente para solicitar que la API del sistema operativo represente los componentes, lo que crea un cuello de botella en la aplicación porque necesita un paso adicional para representar la interfaz de usuario (UI) a diferencia de Flutter que todos los widgets son procesados internamente sin capas adicionales ni llamadas adicionales a la API del sistema operativo y elige hacer toda la interfaz de usuario por sí mismo.
Capítulos del libro
Este libro tiene un total de 14 capítulos, se recomienda que leas en el orden en el cual están dispuestos y a medida que vayamos explicando los componentes del framework, vayas directamente a la práctica, repliques, pruebes y modifiques los códigos que mostramos en este libro.
- Capítulo 1: En este capítulo, vamos a presentar el software necesario para crear aplicaciones en Flutter, en Mac y Windows.
- Capítulo 2: En este capítulo, vamos a conocer sobre Flutter y Dart para el desarrollo de aplicaciones.
- Capítulo 3: En este capítulo, vamos a conocer el uso de los widgets como elemento central al momento de crear aplicaciones en Flutter.
- Capítulo 4: En este capítulo, vamos a crear un proyecto en Flutter usando Visual Studio Code.
- Capítulo 5: En este capítulo, vamos a conocer los widgets principales en Flutter y los widgets con y sin estado.
- Capítulo 6: En este capítulo, vamos a dar un hola mundo en Flutter y conocer sus características más importantes.
- Capítulo 7: En este capítulo, vamos a crear una aplicación de una sola página sobre medidores de cantidades.
- Capítulo 8: En este capítulo, vamos a crear una aplicación para registrar sitios en base a fotos tomadas de la galería o por la cámara.
- Capítulo 9: En este capítulo, vamos a conocer el manejador de estado Provider aplicado a la aplicación anterior.
- Capítulo 10: Vamos a crear una aplicación web, tipo to do list, inicialmente, sería una maqueta.
- Capítulo 11: Para la aplicación de to do list creada anteriormente, vamos a realizar varias adaptaciones mediante los media queries para que sea adaptativa según el tamaño de pantalla.
- Capítulo 12: Aplicaremos cambios variados a la aplicación de tipo to do list, para que sea más adaptable; cambios como alineados, overflows, imágenes con esquinas redondeadas, serán tratadas en este capítulo.
- Capítulo 13: Integraremos el proyecto de to do list web, para que funcione con una base de datos en Cloud Firestore empleando Firebase.
- Capítulo Extra: En este capítulo, vamos a conocer posibles errores que pueden ocurrir al momento de ejecutar aplicaciones en Flutter.
Sin mas que decir, recuerda que es un libro para principiantes y al terminar el libro, serás capaz de crear cualquier aplicación básica en Flutter y conocer más que los aspectos básicos del mismo.
El libro se encuentra actualmente en desarrollo, por lo tanto habrá más capitulos a futuro.
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter