Flutter — Introducción e instalación del SDK
¿Qué es Flutter? ¿Qué lo hace especial y por qué creo que va a ser un punto de inflexión en el desarrollo de apps nativas? ¿Cómo instalar su SDK?
Este post es el primero de una serie que explicará el proceso de instalación de Flutter y su entorno de desarrollo, junto a algunos ejemplos.
Como dice la su página oficial, Flutter es la SDK de Google para la creación de interfaces móviles nativas de gran calidad para iOS y Android en tiempo récord.
Has leído bien, para iOS y Android. Al igual que otras alternativas como el popular React Native, Ionic o NativeScript, Flutter ofrece una alternativa para evitar el uso de dos lenguajes de programación (Swift para iOS y Java para Android) y conseguir que la mayor parte del código esté en un solo lenguaje, pero hay que tener en cuenta que para ciertas funcionalidades va a seguir siendo necesario el uso de código nativo.
¿Por qué Flutter?
En primer lugar, Google está invirtiendo en convertir a Flutter en una gran elección y para darle credibilidad, lo están utilizando en desarrollos propios.
Por otra parte, me gustaría remarcar lo sencillo que es comenzar a hacer cosas con Flutter: la configuración del entorno de desarrollo es sencilla comparado con las otras alternativas que he probado, en gran parte gracias a la documentación, que por cierto es muy buena. Y además, características como el Hot Reload hacen que trabajar con Flutter y Dart sea muy amigable debido a los cortos tiempos de espera al guardar y compilar, casi como los de una web, ¡y puede guardar tu estado actual en la aplicación!
Pero antes de adentrarnos más, cabe destacar que algo muy importante que debería hacerte pensar en probar Flutter. Al contrario que, por ejemplo, React Native, Flutter utiliza un lenguaje de programación compilado, Dart, también desarrollado por Google y muy sencillo de aprender si ya conoces otro anteriormente. Dart es compilado nativamente “ahead of time” (AOT) para múltiples plataformas, lo que evita bastantes problemas de rendimiento ya permite a Flutter comunicarse directamente con esta plataforma.
Pero como decía arriba, otra de las cosas que debería animarte a utilizar Flutter es lo fácil que es arrancarse a hacer algo con él, y en gran parte esto se debe a los Widgets.
Widgets
Para alguien como yo que viene del mundo web, los widgets son como los componentes. Elementos que Flutter nos da ya programados para que nuestro trabajo sea más sencillo y rápido.
Además, es que han pensado en casi todo: tienes barras de navegación superior e inferior, textos, distintos tipos de imágenes, listados, menús laterales… Y además, otros Widgets generales que te darán la flexibilidad necesaria para crear los tuyos propios.
Estos Widgets tienen algo que puede considerarse malo y bueno a la vez: utilizan principalmente Material Design, que es el estilo de diseño que Google propone para el diseño visual, las interacciones y movimientos en distintos dispositivos. Lo bueno, es que ahorrarás mucho tiempo al no tener que dar estilos desde cero. Sin embargo, es probable que no siempre quieras utilizar esta corriente, por lo que tendrás que esforzarte más en crear tus Widgets personalizados. Al fin y al cabo, en Flutter, todo son Widgets.
Y además, Flutter nos ofrece un pequeño pack de Cupertino Widgets para quienes quieran hacer una distinción entre como se ve la aplicación en iOS y Android, que aún así, no es muy grande y me encantaría que con el tiempo aumentase.
Instalación de la SDK de Flutter para MacOS
1. Documentación oficial de Flutter
Visita la sección de la instalación para MacOS
2. Descarga la última versión
Actualmente, Flutter está en su versión beta 0.6.0.
3. Coloca la SDK en una carpeta
En este paso, hay que extraer el contenido de la SDK en una carpeta que hayas creado, donde guardes este tipo de contenido. En mi caso, he creado una carpeta llamada Tools.
4. Añadir Flutter al $PATH
Ahora, vamos a cambiar algo llamado $PATH, para que podamos utilizar los comandos de Flutter en nuestra terminal, por ejemplo, flutter doctor , para saber si hemos hecho correctamente la instalación.
Si lo utilizamos ahora mismo, veremos que nuestra terminal no reconoce este comando. Hemos instalado la SDK de Flutter en nuestra máquina, pero no tiene ni idea de que son esos comandos.
Y aquí es cuando entra en juego el $PATH, el cual guarda referencias a algunas carpetas para poder usar estos comandos. Escribe en tu terminal echo $PATH para ver las referencias que guarda actualmente:
Lo primero que tenemos que hacer es ir a carpeta donde tenemos la SDK de Flutter, en mi caso:
cd Tools/flutterEn este momento, deberías estar en el directorio desde has extraído Flutter. El próximo paso es entrar dentro de la carpeta bin con el comando cd bin
Dentro de esta carpeta, utilizamos el comando pwd para obtener la ubicación actual, en mi caso, por ejemplo,/Users/plaso/tools/flutter/bin y la copiamos.
Abre una nueva ventana o pestaña de tu terminal para asegurarte que estás en el directorio raíz y escribe ls -a para ver todos los archivos, incluidos los ocultos.
Deberías ver un archivo llamado .bash_profile, si no lo encuentras créalo con el comando touch .bash_profile
Ahora tenemos que editar este archivo, por lo que ábrelo con tu editor de texto o simplemente con open .bash_profile y añade la siguiente línea:
export PATH={pega-la-ruta-copiada}:$PATHPor último, utiliza el siguiente comando para refrescar la ventana actual:
source $HOME/.bash_profileSi en los siguientes pasos de comprobación tienes problemas, cierra la termina y vuelve a escribir el comando anterior.
5. Comprobación de la instalación
Verifica que flutter/bin ha sido añadido a tu $PATH con el comando echo $PATH y con el comando flutter doctor comprobaremos también que tenemos acceso a comandos de Flutter. No te preocupes si aún no pasas los tests de la instalación, ¡los iremos cumpliendo!
Y hasta aquí la instalación de la SDK de Flutter, en próximos posts iremos poniendo a punto el resto de elementos que necesitamos en el desarrollo con Flutter como Xcode, Android Studio y Visual Studio Code.
Si te ha gustado el artículo te animo a que des algún clap al post y lo compartas si de verdad te ha llamado la atención.
Cualquier feedback o proposición de temas sobre los que escribir será realmente agradecido.
