Saltar al contenido

Instala y Configura Flutter para desarrollar App’s para Móviles

noviembre 8, 2023
Aplicación Flutter corriendo simultáneamente en varios dispositivos, demostrando la compatibilidad y el diseño responsive

Hola, soy Javier Chiva, y aunque mi trayectoria profesional ha estado anclada en el desarrollo web, hoy me embarco en una nueva aventura: ¡el desarrollo de aplicaciones con Flutter! Si estás aquí, probablemente estés interesado en unirte a esta revolución en el desarrollo multiplataforma.

Flutter está ganando terreno rápidamente gracias a su capacidad para ayudarnos a crear aplicaciones profesionales y natively compiled para móvil, web y escritorio desde una única base de código. ¿Listo para sumergirte? ¡Comencemos con los fundamentos!

Progreso de descarga del SDK de Flutter en pantalla de escritorio, destacando el proceso de instalación para desarrolladores
Índice

    ¿Qué es Flutter y por qué elegirlo?

    Flutter es un SDK de código abierto creado por Google que nos permite, a los desarrolladores, construir interfaces de usuario visualmente atractivas y fluidas. Su lenguaje de programación, Dart, está optimizado para UI, ofreciendo una experiencia de desarrollo rápida y personalizable.

    Elegir Flutter significa apostar por la eficiencia y la innovación, y aquí te mostraré cómo puedes empezar a trabajar con él.

    Prerrequisitos para la instalación:

    Antes de sumergirnos en la instalación de Flutter, asegúrate de cumplir con los siguientes requisitos:

    1. Un sistema operativo compatible: Windows, macOS o Linux.
    2. Espacio suficiente en el disco duro para el SDK de Flutter y dependencias.
    3. Una versión actualizada de tu navegador preferido para la documentación en línea.
    4. Acceso a la terminal o línea de comandos en tu computadora.
    Desarrollador programando el clásico programa Hello World en Flutter, mostrando la facilidad de configurar un nuevo proyecto

    Guía Paso a Paso para la Instalación de Flutter:

    La instalación de Flutter es el primer paso crucial en nuestra travesía de desarrollo de apps. No te preocupes, te guiaré a través de cada detalle para asegurarnos de que tienes todo lo que necesitas.

    1. Descarga del SDK de Flutter:

    • En Windows:
      • Visita la página oficial de Flutter.
      • Descarga el último SDK de Flutter para Windows.
      • Extrae el contenido del archivo zip en un directorio adecuado, como C:\src\flutter. Este será tu directorio de instalación de Flutter.
      • Evita ubicaciones como C:\Program Files que requieren elevados permisos de seguridad.
    • En macOS:
      • Descarga el último SDK de Flutter para macOS desde la página oficial de Flutter.
      • Extrae el archivo en tu directorio home, por ejemplo, ~/development/flutter.
      • Utiliza la terminal para navegar a la carpeta flutter y ejecuta el comando sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer. Esto es necesario para vincular Flutter con Xcode.
    • En Linux:
      • Descarga el último SDK de Flutter para Linux.
      • Extrae el archivo en una ubicación como ~/flutter.
      • Agrega el Flutter a tu PATH usando la terminal: export PATH="$PATH:pwd/flutter/bin".
      • Considera agregar este comando a tu archivo ~/.bashrc o ~/.zshrc para hacer la configuración permanente.

    2. Actualización del Path del Sistema:

    • Windows:
      • Busca «Editar las variables de entorno del sistema» y selecciona la opción que aparece.
      • En la ventana del sistema, haz clic en «Variables de Entorno».
      • Bajo «Variables del sistema», busca «Path» y selecciona «Editar».
      • Haz clic en «Nuevo» y añade el path completo del directorio flutter\bin.
      • Haz clic en «Aceptar» para cerrar las ventanas.
    • macOS y Linux:
      • Abre tu terminal.
      • Utiliza tu editor favorito para abrir tu archivo ~/.bash_profile, ~/.zshrc, ~/.bashrc o ~/.profile.
      • Añade export PATH="$PATH:[TU_DIRECTORIO_FLUTTER]/bin".
      • Guarda el archivo y ejecuta source $HOME/.<tu_archivo_shellrc> para recargar la configuración de la terminal.
    Entorno de desarrollo integrado (IDE) listo para programar con Flutter, con enfoque en la configuración inicial del proyect

    3. Verificación de la Instalación:

    • Abre una nueva terminal o ventana de comandos.
    • Escribe flutter doctor y presiona enter.
    • Flutter Doctor verificará automáticamente que tu entorno está listo para construir apps con Flutter. Sigue las indicaciones para instalar herramientas adicionales si es necesario.

    4. Instalación de Android Studio (Opcional pero Recomendado):

    • Descarga e instala Android Studio, que viene con el emulador y las herramientas necesarias para el desarrollo en Android.
    • Durante la instalación, asegúrate de seleccionar la opción «Custom» para instalar el Android SDK y el Android Emulator.
    • Una vez instalado, inicia Android Studio, ve a «Preferences» o «Settings» y navega a «Plugins».
    • Busca y instala los plugins de ‘Flutter’ y ‘Dart’.

    5. Configuración del Dispositivo Virtual:

    • En Android Studio, abre el «AVD Manager» (Administrador de Dispositivos Virtuales).
    • Crea un nuevo dispositivo virtual Android (AVD) seleccionando una imagen del sistema y configurando las opciones de hardware.
    • Una vez creado, puedes iniciar el AVD y mantenerlo listo para cuando quieras ejecutar tu app de Flutter.

    6. Prueba de tu Entorno con tu Primer Proyecto Flutter:

    • En la terminal, navega al directorio donde deseas crear tu proyecto y ejecuta flutter create nombre_de_tu_app.
    • Una vez creado, ve al directorio de tu app con cd nombre_de_tu_app.
    • Ejecuta flutter run para iniciar tu app en el emulador o dispositivo conectado.
    Dispositivos móviles en fila mostrando las etapas de desarrollo de una aplicación en Flutter desde el diseño hasta la implementación final

    Recuerda que instalar Flutter es solo el comienzo. Habrá desafíos y aprendizajes continuos. Si encuentras algún problema, revisa siempre la documentación oficial de Flutter https://flutter.dev/docs

    Ahora que tienes las herramientas y el conocimiento para iniciar con Flutter, te animo a que des rienda suelta a tu creatividad. Diseña, codifica y construye algo increíble. Y si te atascas o tienes preguntas, no dudes en dejar un comentario. ¡El conocimiento crece cuando se comparte!

    es_ES
    Opciones