top of page
    • 3 nov 2023
    • 4 Min. de lectura

Desarrollo de apps en Flutter: Tu Primer Viaje al Mundo de las Apps

Actualizado: hace 1 día

¡Hola, desarrollador en ciernes! ¿Alguna vez te has preguntado cómo crear tu propia aplicación móvil desde cero? ¡Estás en el lugar correcto!


En este post, vamos a sumergirnos en el emocionante mundo del desarrollo de aplicaciones Flutter. ¿Preparado para aprender a crear tu propia app Flutter? ¡Vamos allá!


¿Qué es Flutter y por qué deberías usarlo?

Antes de sumergirnos en el desarrollo de aplicaciones Flutter, es importante entender qué es Flutter y por qué es tan increíble. Flutter es un marco de desarrollo de código abierto creado por Google que te permite construir aplicaciones nativas para iOS y Android desde una sola base de código. Sí, ¡has leído bien! Con Flutter, puedes escribir una vez y ejecutar en cualquier lugar.



¡El desarrollo de apps con Flutter está en auge!
¡El desarrollo de apps con Flutter está en auge!


Preparándote para el Viaje: Configuración de Flutter

Antes de comenzar nuestro viaje de desarrollo de aplicaciones Flutter, necesitamos configurar nuestro entorno de desarrollo. Para ello, asegúrate de tener instalado Flutter en tu sistema. Puedes encontrar guías detalladas a continuación.


Instalación de Flutter en macOS y Windows

Antes de comenzar a desarrollar aplicaciones Flutter, necesitas tener Flutter instalado en tu sistema. A continuación, te guiaré a través del proceso de instalación en sistemas macOS y Windows.


macOS

Requisitos previos:

  • macOS con la versión más reciente.

  • Xcode (disponible en la Mac App Store).

  • Habilitar las herramientas de línea de comandos de Xcode. Puedes hacerlo ejecutando el siguiente comando en tu terminal:

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer

Pasos para Instalar Flutter en macOS:

  1. Descarga Flutter: Abre tu terminal y ejecuta el siguiente comando para descargar Flutter en tu directorio de inicio: git clone https://github.com/flutter/flutter.git -b stable

  2. Agrega Flutter al Path: Agrega el directorio flutter/bin al PATH de tu sistema para que puedas ejecutar comandos de Flutter desde cualquier ubicación en tu terminal: export PATH="$PATH:`pwd`/flutter/bin". Para hacer esto de forma permanente, puedes agregar la línea anterior al final de tu archivo de perfil, como .bash_profile o .zshrc.

  3. Verifica la Instalación: Para verificar que Flutter se haya instalado correctamente, ejecuta el siguiente comando: flutter doctor .Esto verificará tu configuración y te mostrará si hay algo que debes corregir antes de comenzar.

Windows

Requisitos previos:

  • Windows 7 o superior (64 bits).

  • PowerShell habilitado (PowerShell viene habilitado de forma predeterminada en Windows 10).

Pasos para Instalar Flutter en Windows:

  1. Descarga Flutter: Descarga el archivo ZIP de Flutter desde el sitio web oficial de Flutter (https://flutter.dev/docs/get-started/install/windows). Descomprime el archivo ZIP en un lugar fácilmente accesible en tu sistema, por ejemplo, C:\flutter.

  2. Agrega Flutter al Path: Agrega la ruta del directorio flutter/bin al Path de tu sistema para poder ejecutar comandos de Flutter desde cualquier ubicación en tu línea de comandos. Para hacerlo, sigue estos pasos:

    • Haz clic con el botón derecho en "Este PC" en el escritorio o en el Explorador de Windows.

    • Selecciona "Propiedades" y luego haz clic en "Configuración avanzada del sistema" en el panel izquierdo.

    • En la ventana de Propiedades del sistema, haz clic en "Variables de entorno".

    • En la sección "Variables del sistema", encuentra y selecciona la variable Path, luego haz clic en "Editar".

    • Agrega la ruta del directorio flutter/bin al final de la lista de valores separados por punto y coma. Por ejemplo, C:\flutter\bin.


Una vez que tengas Flutter instalado, abre tu terminal y ejecuta el siguiente comando para asegurarte de que todo está configurado correctamente:

flutter doctor

Este comando verificará tu configuración y te indicará si hay algo que debas corregir antes de comenzar.


Creando tu Primer Proyecto Flutter

Ahora que todo está configurado, es hora de crear tu primer proyecto Flutter. Abre tu terminal y ejecuta el siguiente comando:

flutter create mi_primera_app_flutter

Este comando creará un nuevo proyecto Flutter llamado "mi_primera_app_flutter". Una vez que el proceso de creación se complete, entra en el directorio del proyecto con:

cd mi_primera_app_flutter

Explorando la Estructura del Proyecto Flutter

Antes de escribir código, es esencial entender la estructura de un proyecto Flutter típico. Tu proyecto contendrá varios archivos y carpetas importantes, incluyendo:

  • lib/: Esta carpeta es donde escribirás el código fuente de tu aplicación Flutter. El archivo main.dart es el punto de entrada de tu aplicación.

  • pubspec.yaml: En este archivo, puedes agregar dependencias externas, como paquetes y recursos, que tu aplicación necesitará.


Escribiendo tu Primera Aplicación Flutter

Ahora que conoces la estructura básica de un proyecto Flutter, es hora de escribir algo de código. Abre el archivo lib/main.dart en tu editor de código favorito y reemplázalo con el siguiente código:

import 'package:flutter/material.dart';

void main() {
  runApp(MiPrimeraApp());
}

class MiPrimeraApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Mi Primera App Flutter'),
        ),
        body: Center(
          child: Text('¡Hola, mundo!'),
        ),
      ),
    );
  }
}

Este código crea una aplicación Flutter simple con una barra de aplicación y un mensaje en el centro de la pantalla que dice "¡Hola, mundo!".

Puedes personalizar y expandir este código según tus necesidades y creatividad.



Probando tu Aplicación en un Emulador o Dispositivo Físico

Antes de terminar, es crucial probar tu aplicación en un emulador o dispositivo físico. Para hacerlo, asegúrate de tener un emulador en funcionamiento o conecta tu dispositivo Android o iOS a tu computadora.

Luego, en tu terminal, navega al directorio de tu proyecto y ejecuta el siguiente comando:

flutter run

Este comando compilará tu aplicación y la ejecutará en el emulador o dispositivo conectado. ¡Voilà! Ahora puedes ver tu primera aplicación Flutter en acción.



Conclusión

¡Felicidades! Has creado tu primera aplicación Flutter desde cero. Este es solo el comienzo de tu viaje en el emocionante mundo del desarrollo de aplicaciones móviles. Recuerda que la práctica constante, la exploración y la curiosidad son tus mejores amigos en este viaje.


Espero que este post te haya ayudado a dar tus primeros pasos en el desarrollo de apps Flutter. Recuerda que la comunidad de Flutter es vasta y siempre está ahí para ayudarte en caso de que te atores en algún punto.


¡Buena suerte en tu viaje de desarrollo de aplicaciones Flutter! 🚀


pd. Si necesitas más información sobre empresas en España pioneras en el desarrollo de apps, consulta nuestra guía actualizada de las mejores empresas de apps 2023/2024, ¡no te la pierdas!



bottom of page