logoImagina
iconCurso
Te recomendamos nuestro curso de Flutter
Descubre el curso de Flutter
Ir al curso

Tutorial Flutter, aprende los Primeros Pasos

iconImage
Publicado 07-03-2024
Actualizado el 30-05-2024
Duración: 30 min

Tutorial de Flutter para principiantes

¡Bienvenido al emocionante mundo de Flutter! Si estás listo para sumergirte en el desarrollo de aplicaciones móviles de manera rápida y eficiente, has llegado al lugar correcto. En este tutorial de primeros pasos, te guiaremos a través de los conceptos fundamentales de Flutter y te ayudaremos a construir tu primera aplicación desde cero.

Además, te invitamos a consultar nuestro curso de Flutter, donde podrás profundizar en cada aspecto de este increíble framework y desarrollar habilidades sólidas para la creación de aplicaciones móviles modernas y atractivas. ¡Comencemos a explorar el mundo de Flutter juntos!

¿Qué es Flutter?

Flutter es un Framework propiedad de Google que permite crear aplicaciones multiplataforma de forma nativa en el lenguaje Dart.

Este Framework es un SDK(Software Development Kit) que incluye librerías, elementos de UI y herramientas de testeo para que nuestra aplicación sea fácil y eficiente.

¿Cuáles son las ventajas de Flutter?

  • Es un Framework que nos permite crear aplicaciones multiplataforma de forma nativa.
  • El framework a pesar de estar creado en C++ utiliza un único lenguaje llamado Dart para crear aplicaciones para todas las plataformas. Al estar su núcleo creado con C++ permite que nuestras aplicaciones sean rápidas.
  • Tiene elementos ya predefinidos de interfaz de usuario que nos facilitan el desarrollo como botones, barras de navegación etc...
  • Más rápido y eficiente que Ionic o React Native
  • Es un Framework que tiene la cualidad de Hot reload lo que permite que mientras ejecutas la aplicación en el emulador los cambios se ven al instante en ella.
  • Tiene elementos ya predefinidos de interfaz de usuario que nos facilitan el desarrollo como botones, barras de navegación etc…
  • Posee un motor propio de renderizado de aplicaciones basado en Skia, lo que implica que no utiliza las Web Views ni los OEM Widgets de los dispositivos ya que tiene una gran librería widgets propios.
  • Además es el Framework oficial para Fucshia el primer sistema operativo desarrollado por Google que no está basado en Linux/Unix

Instalación

Cómo instalar Flutter en MacOS

Para poder instalar Flutter en nuestro ordenador Mac tendremos que acceder a la página de Flutter y descargarnos el paquete zip, abrirlo en el directorio deseado y ejecutar el siguiente comando si se quiere hacer por consola, deberemos tener en cuenta que la carpeta donde tengamos el archivo es donde tendremos que ejecutar los comandos:

1cd ~/Flutter unzip ./flutter_macos_v1.2.1-stable.zip

Ahora deberemos añadir Flutter a las variables de entorno de nuestro ordenador con el siguiente comando:

1export PATH="$PATH:`pwd`/flutter/bin"

A continuación deberemos comprobar si existen dependencias que se necesiten instalar con el siguiente comando:

1flutter doctor

El comando anterior nos mostrará por consola que tipo de dependencias y en que plataformas nos falta añadir dicha extensión por lo que deberemos ir a dichas plataformas e instalarlos.

Descubre la formación a tu medida
Rellena el formulario para obtener más información sobre los cursos.
Tamaño de la empresa *
Términos y condiciones *

Cómo instalar Flutter en Windows

Para instalar Flutter en Windows tendremos que realizar pasos similares. Comenzaremos por descargarnos el paquete de instalación de su página oficial.

A continuación, deberemos añadir a las variables de entorno Flutter, para ello tendremos que añadir la ruta de flutter a la variable de entorno.

Una vez tengamos la variable de entorno establecida iremos a la carpeta donde hemos descomprimido el archivo y abrimos una consola y ejecutaremos el siguiente comando:

1flutter doctor

Para usar Flutter en Windows vamos a necesitar ciertas herramientas que serán similares a las que necesitaremos en Mac:

Android studio para testeo en Android, Intellij para el testeo en iOS y Visual Studio Code para crear las aplicaciones.

Cómo crear un proyecto de Flutter

Para empezar a trabajar con Visual Studio debemos añadir la extensión Flutter a este. Esta extensión también añade la extensión para el lenguaje Dart, que como hemos visto es el que utiliza Flutter.

Para comprobar que que todo ha ido bien podemos utilizar Flutter Doctor a través de Command Palette de Visual Studio, para esto utilizamosCtrl+shift+p y tecleamos doctor para seleccionar Flutter: Run Flutter Doctor. Ahora en la consola de Visual Studio nos devolverá el retorno de Flutter Doctor

Ahora que todo funciona volvemos a la Command Palette, en la cual ahora escribimos flutter para seleccionar Flutter: New Project, el cual nos pedirá el nombre de nuestra aplicación y el directorio donde crearla. Este comando nos creará una aplicación básica de Flutter a partir de la cual realizaremos una modificaciones para observar cómo funciona el HotReload de Flutter.

Crear Emulador de Flutter

Ahora intentaremos iniciar nuestra aplicación sobre un dispositivo móvil, en nuestro caso vamos a crear un emulador en Android Studio para utilizarlo para esto. Lo primero que tenemos que hacer que es iniciar Android Studio y seleccionar Configure > AVD Manager

Opción Configure de Android Studio

Ahora en la parte inferior veremos un botón llamado “Create Virtual Device“. Pulsamos sobre él y se nos abrirá un sencillo asistente de configuración del hardware del dispositivo que vamos a virtualizar.

Opción Create Virtual Device en Android Studio

En nuestro caso, elegimos un dispositivo que utilice Android 9 como sistema operativo y hacemos click en “Siguiente”.

Selección de un dispositivo móvil en Flutter

Ahora nos pedirá que seleccionemos una versión de Android para descargar. Seleccionamos Android Pie “Android 9”, y la descargamos.

Selección de la versión de Android

Por último configuramos las opciones a nuestro gusto y guardamos los cambios para que nuestro nuevo móvil aparezca en la lista de nuestros dispositivos.

Configuración de diferentes opciones del dispositivo

Finalmente iniciamos el dispositivo pulsando en el botón de “Play” desde la lista de dispositivos.

Lista de dispositivos de Android Studio
Dispositivo virtual iniciado

Si hemos realizado esto correctamente nos deberá de aparecer en la parte inferior de Visual Studio para poder iniciar el proyecto:

Vista de la parte inferior de Visual Studio

Ahora pulsaremos F5 para iniciar el proyecto en el emulador que hemos creado:

Proyecto creado lanzado en el emulador

La aplicación básica de Flutter es un contador de veces que se pulsa un botón.

Estructura del proyecto de Flutter

Ahora que vemos que el proyecto funciona vamos a hablar de la estructura de este:

Estructura de un proyecto Flutter

Las carpetas más importantes son:

  • android: aqui se despliega la aplicación para Android
  • iOS: en la cual se añade el proyecto para iOS
  • test: para testear nuestro proyecto
  • lib: la carpeta principal del proyecto de flutter, en la cual encontramos el archivo main, que es el archivo principal de la aplicación de Flutter a partir del que realizaremos toda la aplicación.

Cómo mostrar un "Hola mundo!" en Flutter

Vamos a cambiar main.dart para que muestre Hola mundo! en el centro de la pantalla, para esto sobreescribimos la clase MyHomePage con :

1class MyHomePage extends StatelessWidget {  2 MyHomePage({Key key, this.title}) : super(key: key);  3 final String title;  4 5   6 Widget build(BuildContext context) {    7 return Scaffold(      8 appBar: AppBar(        9 title: Text(title)      10 ),      11 body: Center(        12 child: Text('Hola mundo!')      13 )    14 );  15 } 16}

La nueva clase extiende StatelessWidget porque no necesitamos que mantenga ningún estado para almacenar datos que van variando. Además hay que sobreescribir el método build para devolver el contenido que queremos mostrar, en este caso un Scaffold que es todo lo que vemos por pantalla, con una AppBar, que es la barra superior de la App y un Center, para que el texto quede centrado.

Y al guardar el documento se actualiza la aplicación para mostrar los cambios realizados en el código sin necesidad de volver a iniciar el proyecto

Aplicación sencilla en Flutter lanzada en el emulador

Con esto hemos creado un Hola Mundo! en Flutter.

Aprende Flutter desde cero

¡Felicidades por completar este tutorial de primeros pasos en Flutter! Esperamos que hayas encontrado esta introducción útil y emocionante. Has aprendido los conceptos fundamentales de Flutter y has construido tu primera aplicación. Pero esto es solo el comienzo de tu viaje en el desarrollo de aplicaciones móviles.

Si deseas llevar tus habilidades de Flutter al siguiente nivel y convertirte en un experto en la creación de aplicaciones móviles modernas y atractivas, te invitamos a consultar nuestro curso completo de Flutter. En este curso, te sumergirás en aspectos más avanzados de Flutter, aprenderás técnicas de diseño elegantes y descubrirás cómo aprovechar al máximo las características poderosas de este framework.

¡Gracias por seguir este tutorial y esperamos verte en nuestro curso de Flutter! ¡Sigue construyendo aplicaciones sorprendentes y disfruta del emocionante mundo de Flutter!

Descubre la formación a tu medida
Rellena el formulario para obtener más información sobre los cursos.
Tamaño de la empresa *
Términos y condiciones *
Tutoriales relacionados
Guía para Integrar Firebase en Aplicaciones Ionic
Descubre cómo Firebase revoluciona el desarrollo en Ionic: Una guía paso a paso para integrar Firebase en Aplicaciones Ionic
¿Qué es Firebase? Conviértete en un experto
Aprende Firebase: potente plataforma para desarrollar aplicaciones web y móviles. Crea, autentica y almacena datos fácilmente. ¡Impulsa tu proyecto!
¿Qué es Xamarin? ¿Cómo crear un proyecto?
Descubre Xamarin y domina la creación de proyectos con este tutorial único. Conviértete en un experto en desarrollo móvil. ¡Comienza ahora!
Crear Lista de Tareas en Tiempo Real con Xamarin y Firebase
Aprende Paso a Paso a Crear tu propia Lista de Tareas Sincronizada en Tiempo Real para Android con Xamarin y Firebase para Android
Tabla de contenido
Tutorial de Flutter para principiantes
¿Qué es Flutter?
¿Cuáles son las ventajas de Flutter?
Instalación
Cómo instalar Flutter en MacOS
Cómo instalar Flutter en Windows
Cómo crear un proyecto de Flutter
Crear Emulador de Flutter
Estructura del proyecto de Flutter
Cómo mostrar un "Hola mundo!" en Flutter
Aprende Flutter desde cero
Descubre la formación a tu medida
Rellena el formulario para obtener más información sobre los cursos.
Tamaño de la empresa *
Términos y condiciones *