Flutter | Qué es y cómo instalarlo

Flutter es la solución de Google para el desarrollo de apps nativas. En sí mismo, Flutter es un SDK (Software Development Kit) desarrollado por Google, para crear aplicaciones multiplataforma. Es decir, escribiendo un solo código con Flutter, podemos obtener la misma aplicación para Android, iOS y Web.


Navegación rápida

Flutter es el nombre del proyecto o del producto, por llamarlo de alguna manera. Cuando nos referimos al lenguaje de programación utilizado en Flutter, nos referimos a DART. Antiguamente conocido como DASH, lleva desde octubre de 2011 entre nosotros. Es un lenguaje orientado a objetos como Java o C#, es muy fácil de aprender. DART está orientado a utilizar Widgets para todo, lo que en Android es una ‘View’ en DART es un Widget.

Existen widgets estáticos o dinámicos, que se conocen como «StatelessWidget«(sin estado) o «StatefulWidget» (con estado) respectivamente. Profundizaremos más en la programación en Dart en otros artículos, pero tengo que decirte que existen una multitud de widgets para utilizar en tus apps. Los widgets en Flutter se organizan en forma de árbol, en relación ‘padre-hijo’.

Como te he explicado antes, diferenciamos 2 tipos de widgets, con y sin estado. Cuando hablamos del estado de un widget (que en Dart lo declaramos como un objeto State), hacemos referencia a todos esos valores (variables mostradas en pantalla) que pueden cambiar, como el valor de un texto, una imagen o un fondo.

Tras esta breve introducción vamos a lo interesante…



Descargar Flutter

Antes de instalar nada tienes que asegurarte de cumplir ciertos requisitos (para Windows). Estos son:

  • Versión del sistema: Windows 7 SP1 o superior(64-bit)
  • Espacio libre en disco: 400 MB.
  • IDE: Android Studio
  • Windows PowerShell 5.0 o superior (instalada por defecto en Windows 10)
  • Git 2.x, con la opción «Usar Git desde la consola de Windows».

Si cumples con los requisitos de arriba, ya puedes pasar a descargar Flutter desde este enlace (v1.5.4)



Instalar Flutter

Una vez descargado extrae el contenido del zip en una carpeta. Como ejemplo yo la extraeré en:

«C:\flutter»

Cuando termine de extraer el paquete, localiza el archivo «flutter_console.bat» y ejecútalo. Esto que ves es la consola de Flutter, aquí puedes ejecutar comandos para crear un nuevo proyecto. Aunque en nuestro caso utilizaremos Android Studio para crearlos. No cierres la consola aún, en el siguiente paso la necesitarás.

Flutter Doctor

Este comando te permite verificar la instalación de Flutter y sus dependencias. Revisará el sistema en busca de todo lo necesario para poder ejecutarse correctamente.

Para utilizarlo, en la consola de Flutter que has abierto antes, escribe «flutter doctor» (sin comillas). Este proceso puede llevar unos minutos. En mi caso los errores que ha reportado son estos:

Flutter Doctor ha detectado que no tengo instalados aún los plugin de Flutter y Dart en Android Studio. Es lo más normal, puesto que aún están instalados.

Por otro lado saca una advertencia, diciendo que no ha detectado ningún dispositivo conectado donde ejecutar poder las apps, ya sea emulador o dispositivo físico.

Vamos ahora a instalar los plugins que faltan en Android Studio. Para ello en Android Studio, vamos al menú «File > Setting > Plugins».

En la parte superior puedes buscar por nombre de plugin, empieza buscando flutter e instala el plugin:

Al instalarlo, detectará que depende y necesita el otro plugin, Dart. Te mostrará un aviso para instalarlo también:

Una vez finalizada la instalación del plugin, podrás ver que el botón de instalación que has pulsado se ha convertido en «Restart IDE». Lo has adivinado, tienes que pulsarlo.

Android Studio se reiniciará y completará la instalación de los plugins. Ahora puedes volver a ejecutar flutter doctor y verificar que no aparece el error que tenías antes referente a los plugins.

Si has llegado hasta aquí ya tienes Flutter completamente instalado. En siguientes artículos veremos como crear tu primera aplicación, para que empieces a familiarizarte con el nuevo lenguaje.

Si has tenido algún problema con la instalación o tienes alguna duda puedes dejárnosla aquí abajo. 😀

También te podría gustar...

Ads Blocker Image Powered by Code Help Pro

Bloqueador de anuncios detectado

Por favor, desactiva tu bloqueador de anuncios para este sitio web. Sabemos que la publicidad puede resultarte molesta, pero esta es la única manera de mantener la web de forma gratuita y accesible para todo el mundo.