Introducción al desarrollo de aplicaciones móviles con la SDK de Flutter

- Andrés Cruz

In english
Introducción al desarrollo de aplicaciones móviles con la SDK de Flutter

En esta entrada quiero resumirte un poco sobre el ecosistema de Flutter, para que puedas obtener una rapida explicacion de qué va todo esto de Flutter, qué es Flutter y cómo esta formada una app en Flutter.

Esto con el objetivo de introducir un nuevo conjunto de secciones de las cuales vamos a trabajar en nuestro curso de Aprende a crear tus primeras apps en Android e iOS mediante una Api Rest en PHP con CodeIgniter; así que, bienvenidos a esta sección en donde vamos a aprender a dar los primeros pasos con Flutter y a crear nuestra primera aplicación con Flutter desde cero; que ahora no solo cubrimos lo siguiente:

  • Creación del backend
  • Creación de la Api Rest
  • Introduccìon a Kotlin
  • Introduccìon a Swift
  • Desarrollo de la aplicación de películas en Android y Android Studio
  • Desarrollo de la aplicación de películas en iOS con xCode

Ahora a esto le agregamos el desarrollo de una app en Flutter, y con esto vamos cumpliendo con las extensiones planteadas en un inicio para este gran curso de crear apps móviles y conectarlas a una Api Rest en PHP.

Razones para crear aplicaciones en Flutter

La ventaja enorme que tiene desarrollar aplicaciones en Flutter es que podemos crear para dos sistemas operativos móviles diferentes con un solo código base; es decir, con un solo proyecto podrá crear tus aplicaciones para Android e iOS mediante la interfaz declarativa de Flutter y bajo el lenguaje de programación de Dart.

Estas dos tecnologías, Dart como lenguaje de programación y Flutter como SDK o kit herramientas de interfaz gráfica para la creación de aplicaciones compiladas nativamente, es decir, nada de webview para nuestras aplicaciones móviles.

Estas dos tecnologías son creadas por una sola empresa, la madre o padre de Android como lo es Google, por lo tanto puedes esperar que la combinación de Dart con Flutter sea total para crear nuestras aplicaciones en Android y por supuesto iOS.

Y una prueba de esto, es el proceso de compilación que es tan rápido que al hacer un cambio en nuestro código los cambios se ven reflejados casi que al instantáneamente en nuestro emulador mediante la tecnología de Hot Reload que tiene como fundamentos inyectar el código que hemos modificado y de esta manera podemos experimentar y crear rápidamente interfaces lo cual es una ventaja enorme al desarrollo actual con Android Studio mediante Kotlin o Java y Swift con xCode.

Ventajas agregadas de conocer programar nativamente para Android e iOS de Dart y Flutter

Otra ventaja es que solamente necesitamos aprender un lenguaje de programación, Dart, para crear nuestras aplicaciones para Android e iOS. Aunque en este punto en donde también conocemos Kotlin y Swift para el desarrollo de apps móviles no tendremos ningún problema y esto también nos trae una ventaja a nosotros como desarrolladores, ya que al conocer más que los fundamentos en ambas plataformas móviles, se nos hará más fácil crear las aplicaciones en Flutter con Dart, y es que Flutter al abstraernos de gran parte del código que tenemos que implementar para el desarrollo de funcionalidades.

Por tal motivo, si no conociéramos el desarrollo tradicional en estas plataformas, esto podría traernos algunos problemas ya que podríamos no saber como es el comportamiento original de los componentes que intentamos implementar y que es lo que queremos implementar y el cómo.

Interfaz declarativa y los Widgets

La forma en la cual podemos trabajar con Flutter es mediante componentes, y estos componentes pueden ser cualquier cosa, cualquier cosa en el mundo de las apps móviles, botones, app bars, listados, textos imágenes y muchísimas más que existen y veremos los principales en este curso, pero hay muchísimos que puedes consultar desde la web oficial la cual vamos a emplear en esta sección.

Estos elementos de interfaz gráfica se conocen como widgets, que simplemente son piezas de una interfaz que podemos emplearlas y configurarlas, además de que emplean el Material Design que es una ruta de estilos creada por la propia Google y que es completamente extensible y personalizable.

¿Qué es Flutter?

A todas estas hemos visto varias pistas sobre de qué va esto de Flutter pero no te he dicho explícitamente ¿qué es Flutter?:

Flutter es un framework para Dart y una SDK con elementos de UI

Flutter es por una parte una SDK para elementos de Interfaz gráfica y por otra parte también es un framework para Dart que nos ofrece un abanico de funcionalidades y componentes empleamos para desarrollar nuestras apps móviles que nos permite crear nos permite crear apps en 2D (nada de juegos), las típicas que cuentan con los elementos explicados anteriormente mediante una SDK que además es un framework o kit de herramientas para Dart (funciones, clases, propiedades y por supuestos los Widgets que podemos usar en Dart de gratis al emplear Flutter)

Una app sencilla en flutter luce como la siguiente, como ves tenemos estos componentes que se conocen como widgets que son los elementos para nuestra interfaz declarativa que podemos emplear desde Dart mediante el framework de Flutter:

Flutter está pensado para cualquier tipo de app en 2D, como apps de notas, calendarios, mapas, consultas, como en el caso de nuestra aplicación etc, pero si quieres algo muy específico como un juego o usar elementos de interfaz gráfica avanzados, Flutter no te podra ayudar ya que no está pensado para esto.

Arquitectura tipo árbol de widgets en Flutter para una app

Para que podamos trabajar en la próxima sección, primero debemos conocer cómo es la arquitectura de una app o proyecto en Flutter, que como hemos dicho anteriormente, podemos es en base a componentes llamadas widgets, entonces, podemos tener tantos widgets como queramos en nuestra aplicación que parten desde un nodo o widgets raíz o padre, como lo quieras llamar, entonces, en este árbol de widgets en conjunto forman nuestra aplicación.

Y como puedes ver, nuestro árbol de widgets cuenta con múltiples niveles. Otro punto importante es que en aunque tengamos un solo proyecto base de manera opcional y dependiendo de nuestros requerimientos podemos desarrollar código específico para cada plataforma.

Qué veremos en la extensión de nuestro curso

El objetivo principal de esta sección es crear una app móvil similar y con las mismas funcionalidades que creamos en las secciones anteriores, elementos como navegación entre pantallas, pase de datos, listados con paginación y filtros, login y autenticación y mucho m[as serán tratados en esta sección, lo cuales tratan más que los fundamentos del propio Flutter y no se requiere ningún conocimiento previo en Dart o Flutter ya que también lo vamos a cubrir en el curso.

Editores: Visual Studio Code con los plugins de Flutter y Dart

Para crear tus apps en Flutter puedes emplear Android Studio o derivados que serían los IDEs de IntelliJ IDEA; también puedes emplear Visual Studio Code que es el que emplearemos para desarrollar nuestras apps en Flutter empleando los plugins oficiales que nos permitirán crear nuestras apps en Flutter:

Documentación oficial.

Andrés Cruz

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.