Blog

Manuel Hernández-Ros
05 Ago 2022

Flutter. El nuevo Framework móvil de Google

Tiempo de lectura 4 minutos
  • android
  • desarrollo
  • flutter
  • Google
  • iOs
  • movilidad

Sumario Presentamos qué es Flutter y como instalarlo para comenzar a crear aplicaciones

Introducción

El mundo del desarrollo móvil está en constante evolución, contando con muchas tecnologías en crecimiento para desarrollar aplicaciones, entre ellas Flutter. Uno de los problemas fundamentales con los que nos encontramos son los diferentes sistemas operativos, como Android e IOS, y la necesidad de hacer aplicaciones nativas para cada una de las plataformas. Esto acaba en dos aplicaciones diferentes con un mantenimiento por separado.

Sin embargo, Flutter es una tecnología creada por Google que nos permite crear aplicaciones híbridas, es decir, que con un solo proyecto genera una aplicación para IOS, Android y un entorno web. Incluso con las últimas versiones, crea también aplicaciones de escritorio para Windows y Mac. De esta manera gestionamos todo desde el mismo código y es mucho más sencillo de administrar y de probar en cualquier dispositivo.

Flutter es un framework que funciona con Dart como lenguaje de programación, un lenguaje de programación tipado creado también por Google. La manera en la que se trabaja es mediante componentes conocidos como widgets.

A continuación, vas a poder ver como se instala flutter por primera vez, la creación de un proyecto de ejemplo.

Instalación

Para instalar flutter hay que seguir los pasos de la siguiente página web: https://docs.flutter.dev/get-started/install?gclid=CjwKCAjwt7SWBhAnEiwAx8ZLarxYzP03gFGh-3wlv2R28OiZnH89XwZEePzBXyOt25N6TnZ4SE_BuRoC1AYQAvD_BwE&gclsrc=aw.ds

Una vez que lo tengas instalado, con un IDE como VSCode o Android Studio puedes comenzar a programar. Utiliza las extensiones de Flutter y Dart para que te ayuden a programar y ejecutar el programa. Yo voy a hacer el ejemplo en VSCode con las dos siguientes extensiones:

Extensión Flutter para vsCode
Extensión Dart para vsCode

Una vez que tengas todo instalado, vamos a crear nuestro primer proyecto. Pulsas Ctrl + Mayus  + P para que salga el menú de funciones y buscas la función “flutter new project”.

A partir de aquí te van a salir diferentes opciones y seleccionas la de “application”, seleccionas la carpeta en la que quieres localizarlo y luego le das un nombre al proyecto. Esto lo que va a hacer es generar un proyecto con todas las carpetas y ficheros necesarios para la ejecución.

Estructura flutter en proyecto vsCode

Nosotros nos vamos a enfocar en la carpeta lib y el fichero main.dart. Es en esta carpeta donde van a ir la mayoría de los ficheros de programación y los componentes que van a generar nuestra aplicación.

Ahora vamos a comenzar a programar nuestra aplicación. Como podemos ver, ya hay código generado y comentado explicando que es cada uno de los componentes. Igualmente explicaremos en diferentes artículos que es cada uno de los elementos.

¡Ahora mismo podríamos pulsar el botón F5 y ya podríamos ver ejecutándose nuestra primera aplicación! Si todo ha salido bien deberíamos ver lo siguiente:

Si quieres probar en otro dispositivo para ver como se ve, puedes volver a pulsar las teclas Ctrl + Mayus  + P y buscar la funcionalidad de “Flutter select device”. Aquí verás una lista de dispositivos en los que podrás probar y ver como funciona.

Y con esto ya tienes lo mínimo para empezar con tus pruebas y comenzar a juguetear con Flutter

Autor

Manuel Hernández-Ros
Manuel Hernández-Ros

Desarrollador en dev&del

Desarrollador full stack y apasionado del desarrollo móvil.

Le encantan los videojuegos. Si no le ves programando seguro que está jugando.

¿Estás interesado?

Déjanos tus datos y contactaremos contigo lo antes posible