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:
🆕 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_proxectopolo 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
- Descrición da estrutura de directorios dun proxecto Flutter
- Estructura dun proxecto Flutter
- Guía de pubspec.yaml
▶️ 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.).
