diegoRodicio

View Categories

🚀 Primeiro Proxecto en Flutter. Execución Básica

Tempo de lectura estimado: 5 minutos

Contido deste apartado:

Unha vez que o teu entorno de desenvolvemento está configurado, o seguinte paso é crear e executar a túa primeira aplicación Flutter.

CodeLab

Un CodeLab é un tutorial práctico e guiado que che permite aprender un concepto mentres escribes e executas código real
paso a paso.

Se queres practicar a creación dun proxecto en Flutter, segue o seguinte CodeLab:

Codelab de Flutter

🆕 Creación dun novo proxecto (flutter create)

Para iniciar unha nova aplicación Flutter, utilizas o comando flutter create na terminal. Este comando crea un novo proxecto Flutter no directorio actual cunha aplicación de exemplo básica.

Este comando:

  • Xera automaticamente toda a estrutura de ficheiros e directorios necesaria para un proxecto Flutter funcional.
  • Inclúe un exemplo básico funcional.
  • Prepara o código para Android, iOS, web, escritorio e máis (segundo o sistema operativo).

Uso básico:

Abre a túa terminal en VS Code e navega ata o directorio onde queres crear o teu proxecto. Despois, executa:

flutter create nome_do_teu_proxecto
  • Substitúe nome_do_teu_proxecto polo nome que desexes para a túa aplicación (ex: mi_primeira_app).
  • Recoméndase usar snake_case (todo en minúsculas e con guións baixos) para o nome do proxecto.

📌 Exemplo: 

flutter create primeiro_proxecto_flutter
cd primeiro_proxecto_flutter
code .

Abrindo o proxecto con code . ábrese en Visual Studio Code (se o tes instalado).

🔗 Máis info:

🗂️ Estrutura básica dun proxecto Flutter

Cando creas un proxecto Flutter, xérase unha estrutura de directorios estándar que organiza o código e os recursos da túa aplicación. Para o comezo, os directorios máis importantes son lib/, pubspec.yaml, android/ e ios/.

A estrutura do proxecto organiza o código fonte (Dart), os recursos da aplicación, e os ficheiros específicos de cada plataforma.

Ao crear un novo proxecto, obterás unha estrutura como esta:

primeiro_proxecto_flutter/
├── android/           # Código específico para Android
├── ios/               # Código específico para iOS
├── lib/               # Código Dart principal (aquí programamos)
│   └── main.dart      # Punto de entrada da app
├── test/              # Testes automáticos
├── pubspec.yaml       # Xestión de dependencias, assets e configuración
└── outros arquivos de configuración

Aquí tes os directorios e ficheiros clave:

lib/

Este é o directorio máis importante para ti como programador Flutter. Contén todo o código Dart da túa aplicación. Aquí é onde crearás os teus widgets, lóxica de negocio, pantallas, etc.

lib/main.dart

O punto de entrada da túa aplicación.

pubspec.yaml

Un ficheiro de configuración crucial. Aquí é onde:

  • Defines os metadatos da túa aplicación (nome, descrición, versión).
  • Declaras as dependencias (paquetes externos) que a túa aplicación utilizará.
  • Xestionas os assets (recursos como imaxes, fontes) que incluirás na túa aplicación.

android/

Contén o código e os recursos específicos da plataforma Android. Se necesitas configurar permisos, engadir funcionalidades nativas de Android (Java/Kotlin) ou personalizar a construción de Android, faralo aquí.

Normalmente non se modifica se traballas só con Flutter.

ios/

Contén o código e os recursos específicos da plataforma iOS. Similar ao directorio android/, pero para dispositivos Apple (Swift).

Normalmente non se modifica se traballas só con Flutter.

Outros cartafoles importantes

test/ (para os testes), web/ (para o código web),windows/, macos/, linux/ (para as aplicacións de escritorio).

🔗 Máis información

▶️ Execución básica dunha aplicación en Flutter

Unha vez que o proxecto está creado, podes despregar e executar a túa aplicación nun emulador, simulador, dispositivo físico ou nun navegador web.

  • O comando principal para isto é flutter run.
  • Alternativamente, podes usar as opcións de execución/depuración do teu IDE, como Visual Studio Code.

🔗 Máis info:

📱 En emulador/simulador (Android e iOS)

Os emuladores (Android) e simuladores (iOS) son aplicacións que imitan un dispositivo móbil no teu ordenador. Son ideais para probar a aplicación sen necesidade dun dispositivo físico.

Iniciar Emulador/Simulador en VS Code

Abre o teu proxecto Flutter en VS Code.

Na barra de estado inferior de VS Code (normalmente á dereita), verás o nome do dispositivo actualmente seleccionado (ou «No Device»). Fai clic nel e selecciona un dos emuladores/simuladores que tes iniciados ou inicia un dos que tes configurados (aparecen en Offline Emulators).

Executar a aplicación dende VS Code

Unha vez seleccionado o emulador/simulador, preme F5 ou vai a «Run» (Executar) no menú superior e selecciona «Start Debugging» (Iniciar depuración). VS Code despregará a aplicación no dispositivo seleccionado.

Executar a aplicación dende o terminal

Se o prefires, na terminal integrada de VS Code (asegúrate de estar no directorio raíz do teu proxecto), executa flutter run. Flutter detectará o emulador/simulador en execución.

🔗 Onde saber máis:

🔌 En dispositivo físico (Android e iOS)

Probar a aplicación nun dispositivo físico real é importante para verificar o rendemento e o comportamento en hardware de verdade.

Conecta o teu dispositivo móbil ao ordenador, actívalle o modo de depuración USB (Android) ou o modo desenvolvedor (iOS), e despois executa a aplicación Flutter dende VS Code.

Preparar o Dispositivo

  • Android: Activa as «Opcións de desenvolvedor» e a «Depuración USB» no teu teléfono Android. Asegúrate de ter os controladores USB adecuados instalados no teu ordenador.
  • iOS (só en macOS): Conecta o teu iPhone/iPad, confía no ordenador, e asegúrate de ter configurada unha conta de desenvolvedor en Xcode para poder despregar apps.

Preparar VS Code

  • Conecta o teu dispositivo físico ao ordenador mediante un cable USB.
  • Abre o teu proxecto Flutter en VS Code.
  • Na barra de estado inferior de VS Code (normalmente á dereita), fai clic no nome do dispositivo seleccionado e escolle o teu dispositivo físico na lista.

Executar a aplicación dende VS Code

Unha vez seleccionado o dispositivo físico, preme F5 ou vai a «Run» (Executar) no menú superior e selecciona «Start Debugging» (Iniciar depuración). VS Code instalará e executará a aplicación no teu dispositivo.

En Android pode que pida aceptar o acceso por USB. En iOS, pode pedir permisos adicionais dende Xcode.

Executar a aplicación dende o terminal

Na terminal integrada de VS Code, executa flutter run. Se tes varios dispositivos dispoñibles, Flutter preguntará ou despregará no último usado. Podes especificar o dispositivo con flutter run -d [ID_DO_DISPOSITIVO].

En Android pode que pida aceptar o acceso por USB. En iOS, pode pedir permisos adicionais dende Xcode.

🔗 Onde saber máis:

🌐 En navegador web

Flutter tamén permite compilar a túa aplicación para que se execute nun navegador web, o que é útil para prototipos, demostracións ou mesmo para despregar aplicacións web completas.

Asegúrate de ter habilitado o soporte web en Flutter e executa a aplicación escollendo un navegador dende VS Code.

Habilitar Soporte Web (se non o fixeches)

Se é a primeira vez que usas Flutter para web nun proxecto existente, pode que necesites habilitar o soporte web co comando na terminal:

flutter config --enable-web
flutter create

Preparar VS Code

  • Abre o teu proxecto Flutter en VS Code.
  • Na barra de estado inferior de VS Code, fai clic no nome do dispositivo seleccionado e escolle un navegador web (por exemplo, «Chrome (web)») na lista.

Executar a aplicación en VS Code

Dende VS Code: Unha vez seleccionado o navegador, preme F5 ou vai a «Run» (Executar) no menú superior e selecciona «Start Debugging» (Iniciar depuración). VS Code compilará a aplicación para web e abrirase unha nova pestana no teu navegador coa app.

Executar a aplicación no terminal

Na terminal integrada de VS Code, executa flutter run -d chrome (ou o nome do teu navegador como edge, firefox, etc.).

🔗 Onde saber máis:

🔗 Máis información oficial:

Que che parece esta páxina?